fix(curriculum): improve step 3 description and add example in build-…

…a-heart (#63692)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7e.md

@@ -7,12 +7,19 @@ dashedName: step-3
 
 # --description--
 
-You are getting closer. The next thing to do is to set the `viewBox` attribute of the `svg` element. This will
-control how much of the image is visible. The first two numbers set the center of the image.
+You are getting closer, now look at this example:
 
-The following two numbers set the size of the image we can see: width followed by height.
+```html
+<svg viewBox="0 0 50 50">
+</svg>
+```
+
+The `viewBox` attribute controls what part of the image is visible inside the SVG.
+
+- The first two numbers (`0 0`) set the starting position of the `viewBox` — the top-left corner (x and y). 
+- The next two numbers (`50 50`) define the `viewBox`'s width and height.
 
-Since here the entirety of the icon should be visible, you should set the `viewBox` attribute to `0 0 24 24`.
+Set the `viewBox` attribute to `0 0 24 24`.
 
 # --hints--