Skip to content

Commit 3991337

Browse files
sammyCZsammyCZ
committed
challenges 1-5 done
1 parent afb8865 commit 3991337

5 files changed

Lines changed: 43 additions & 31 deletions

File tree

‎Step3_challenges/challenge1.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -291,11 +291,13 @@ <h2>Challenge 1: Embed a Video</h2>
291291
</li>
292292

293293
<li>
294-
<strong>Customize your background</strong>
295-
<div class="note">Try modifying the <code class="inline">background-color</code> in <code
296-
class="inline">VideoPlayer.css</code> or experiment with gradients for a unique style!</div>
294+
<strong>Experiment!</strong>
295+
<ul>
296+
<li>Can you modify the background-color in VideoPlayer.css? Experiement with gradients for a unique style!</li>
297+
<li>Can you add multiple videos to your App?</li>
298+
</ul>
297299
</li>
298-
300+
299301
<li>
300302
<strong>Stop your app</strong>
301303
<pre class="cmd">Ctrl + C</pre>

‎Step3_challenges/challenge2.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ <h2>Challenge 2: Dynamic Color-Changing Background</h2>
255255
</li>
256256

257257
<li>
258-
<strong>Challenge questions:</strong>
258+
<strong>Experiment!</strong>
259259
<ul>
260260
<li>What else can you do to customize your background?</li>
261261
<li>If you add text, can you change the text color based on the background?</li>

‎Step3_challenges/challenge3.html‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -299,14 +299,18 @@ <h2>Challenge 3: Dynamic Custom Cursor</h2>
299299
<li><strong>Run your React app</strong></li>
300300
<pre class="cmd">npm start</pre>
301301

302-
<li><strong>9. Experiment!</strong><br>
303-
Try changing the cursor’s size, color, or even shape. You can also render an emoji as your cursor for fun!
302+
<li>
303+
<strong>Experiement</strong>
304+
<ul>
305+
<li>Try changing the cursor’s size, color, or even shape. You can also render an emoji as your cursor for fun!</li>
306+
</ul>
307+
</li>
308+
309+
<li>
310+
<strong>Close the app</strong>
311+
<pre class="cmd">Press Ctrl + C on Mac/Linux/Windows or stop the process in GitHub Codespaces.</pre>
304312
</li>
305313
</ol>
306-
307-
<p class="note">
308-
Close the app by pressing Ctrl+C on Mac/Linux/Windows devices or in GitHub Codespaces.
309-
</p>
310314
</main>
311315
</div>
312316
</div>

‎Step3_challenges/challenge4.html‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -179,15 +179,15 @@ <h2>Challenge 4: Creating a Navbar</h2>
179179
<li><strong>Navigate to your React project</strong></li>
180180
<pre class="cmd">cd my-app</pre>
181181

182-
<li><strong>Install dependencies</strong></li>
182+
<li><strong>Install dependencies</strong>
183183
<pre class="cmd">npm i react-router-dom react-icons styled-components@latest</pre>
184184

185-
<li><strong>Why each one?</strong>
186-
<ul>
187-
<li><code class="inline">react-router-dom</code>: For routing between pages/components.</li>
188-
<li><code class="inline">react-icons</code>: Provides ready-to-use icons like the hamburger menu.</li>
189-
<li><code class="inline">styled-components</code>: CSS-in-JS library to style components.</li>
190-
</ul>
185+
<pre class="note"><strong>Why each one?</strong>
186+
187+
<code class="inline">react-router-dom</code>: For routing between pages/components.
188+
<code class="inline">react-icons</code>: Provides ready-to-use icons like the hamburger menu.
189+
<code class="inline">styled-components</code>: CSS-in-JS library to style components.
190+
</pre>
191191
</li>
192192

193193
<li><strong>Create folders & files</strong>
@@ -488,19 +488,26 @@ <h2>Challenge 4: Creating a Navbar</h2>
488488

489489
export default App;
490490
</pre>
491+
492+
<pre class="note"><strong>Tip:</strong> element={<Component />} in &lt;Route&gt; tells React Router which component to render.
493+
</pre>
491494

492-
<li><strong>Run your app</strong></li>
493-
<pre class="cmd">npm start</pre>
494-
495-
<li><strong>Tip:</strong> element={
496-
<Component />} in &lt;Route&gt; tells React Router which component to render.
495+
<li><strong>Run your app</strong>
496+
<pre class="cmd">npm start</pre>
497497
</li>
498-
<li><strong>Experiment:</strong> Try adding a dropdown menu or customizing styling!</li>
499-
</ol>
498+
499+
<li>
500+
<strong>Experiement</strong>
501+
<ul>
502+
<li>Try adding a dropdown menu or customizing styling!</li>
503+
</ul>
504+
</li>
500505

501-
<p class="note">
502-
Close the app by pressing Ctrl+C on Mac/Linux/Windows devices or GitHub Codespaces.
503-
</p>
506+
<li>
507+
<strong>Close the app</strong>
508+
<pre class="cmd">Press Ctrl + C on Mac/Linux/Windows or stop the process in GitHub Codespaces.</pre>
509+
</li>
510+
</ol>
504511
</main>
505512
</div>
506513
</div>

‎Step3_challenges/challenge5.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -358,8 +358,7 @@ <h2>Challenge 5: Try Full-stack React (Frontend + Backend)</h2>
358358

359359
<li>
360360
<strong>Open a split terminal</strong>
361-
<div class="note">Use <code class="inline">Ctrl+\</code> on Windows/Linux or <code class="inline">Cmd+\</code>
362-
on macOS.</div>
361+
<pre class="cmd">Use <code class="inline">Ctrl+\</code> on Windows/Linux or <code class="inline">Cmd+\</code> on macOS.</pre>
363362
</li>
364363

365364
<li>
@@ -374,7 +373,7 @@ <h2>Challenge 5: Try Full-stack React (Frontend + Backend)</h2>
374373
</li>
375374

376375
<li>
377-
<strong>Questions to explore:</strong>
376+
<strong>Experiment!</strong>
378377
<ul>
379378
<li>What else can you do with the backend?</li>
380379
<li>Can you modify it to store a list of words instead of just one?</li>

0 commit comments

Comments
 (0)