diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
index bf345cc1dd8..bd4c2e4d98c 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
@@ -16,19 +16,23 @@ To get them on the same line, you need to apply some styling to the `p` elements
 You should apply the `item` class to your `article` element.
 
 ```js
-assert(code.match(/<article\s*class=('|")item\1\s*>/i))
+const el = document.querySelector('article.item');
+assert.exists(el);
 ```
 
 You should only have one `item` class element.
 
 ```js
-assert($('.item').length === 1);
+const elements = document.querySelectorAll('.item');
+assert.lengthOf(elements, 1);
 ```
 
 Your first `article` element should have the `item` class.
 
 ```js
-assert($('article')[0].className === 'item');
+const el = document.querySelectorAll('article')[0];
+
+assert.equal(el.className, 'item');
 ```
 
 # --seed--