Skip to content

Commit 97b3d99

Browse files
authored
feat: use the tip admonition for exercise hints (#1887)
1 parent 8689501 commit 97b3d99

13 files changed

+78
-14
lines changed

sources/academy/webscraping/scraping_basics_javascript2/01_devtools_inspecting.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,13 @@ We're not here for playing around with elements, though—we want to create a sc
144144

145145
### Find FIFA logo
146146

147-
Open the [FIFA website](https://www.fifa.com/) and use the DevTools to figure out the URL of FIFA's logo image file. Hint: You're looking for an [`img`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) element with a `src` attribute.
147+
Open the [FIFA website](https://www.fifa.com/) and use the DevTools to figure out the URL of FIFA's logo image file.
148+
149+
:::tip Need a nudge?
150+
151+
You're looking for an [`img`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) element with a `src` attribute.
152+
153+
:::
148154

149155
<details>
150156
<summary>Solution</summary>

sources/academy/webscraping/scraping_basics_javascript2/02_devtools_locating_elements.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,11 @@ Go to Shein's [Jewelry & Accessories](https://shein.com/RecommendSelection/Jewel
188188

189189
Go to Guardian's [page about F1](https://www.theguardian.com/sport/formulaone). Use the **Console** to find all HTML elements representing the articles.
190190

191-
Hint: Learn about the [descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator).
191+
:::tip Need a nudge?
192+
193+
Learn about the [descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator).
194+
195+
:::
192196

193197
![Articles on Guardian's page about F1](./images/devtools-exercise-guardian1.png)
194198

sources/academy/webscraping/scraping_basics_javascript2/06_locating_elements.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,11 +273,17 @@ Djibouti
273273

274274
### Use CSS selectors to their max
275275

276-
Simplify the code from previous exercise. Use a single for loop and a single CSS selector. You may want to check out the following pages:
276+
Simplify the code from previous exercise. Use a single for loop and a single CSS selector.
277+
278+
:::tip Need a nudge?
279+
280+
You may want to check out the following pages:
277281

278282
- [Descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator)
279283
- [`:nth-child()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)
280284

285+
:::
286+
281287
<details>
282288
<summary>Solution</summary>
283289

sources/academy/webscraping/scraping_basics_javascript2/07_extracting_data.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -349,13 +349,15 @@ Hamilton reveals distress over ‘devastating’ groundhog accident at Canadian
349349
...
350350
```
351351

352-
Hints:
352+
:::tip Need a nudge?
353353

354354
- HTML's `time` element can have an attribute `datetime`, which [contains data in a machine-readable format](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time), such as the ISO 8601.
355355
- Cheerio gives you [.attr()](https://cheerio.js.org/docs/api/classes/Cheerio#attr) to access attributes.
356356
- In JavaScript you can use an ISO 8601 string to create a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.
357357
- To get the date, you can call `.toDateString()` on `Date` objects.
358358

359+
:::
360+
359361
<details>
360362
<summary>Solution</summary>
361363

sources/academy/webscraping/scraping_basics_javascript2/10_crawling.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,11 @@ https://en.wikipedia.org/wiki/Cameroon +237
226226
...
227227
```
228228

229-
Hint: Locating cells in tables is sometimes easier if you know how to [filter](https://cheerio.js.org/docs/api/classes/Cheerio#filter) or [navigate up](https://cheerio.js.org/docs/api/classes/Cheerio#parent) in the HTML element tree.
229+
:::tip Need a nudge?
230+
231+
Locating cells in tables is sometimes easier if you know how to [filter](https://cheerio.js.org/docs/api/classes/Cheerio#filter) or [navigate up](https://cheerio.js.org/docs/api/classes/Cheerio#parent) in the HTML element tree.
232+
233+
:::
230234

231235
<details>
232236
<summary>Solution</summary>
@@ -290,11 +294,13 @@ PA Media: Lewis Hamilton reveals lifelong battle with depression after school bu
290294
...
291295
```
292296

293-
Hints:
297+
:::tip Need a nudge?
294298

295299
- You can use [attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) to select HTML elements based on their attribute values.
296300
- Sometimes a person authors the article, but other times it's contributed by a news agency.
297301

302+
:::
303+
298304
<details>
299305
<summary>Solution</summary>
300306

sources/academy/webscraping/scraping_basics_javascript2/12_framework.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -410,11 +410,13 @@ If you export the dataset as JSON, it should look something like this:
410410
]
411411
```
412412

413-
Hints:
413+
:::tip Need a nudge?
414414

415415
- The website uses `DD/MM/YYYY` format for the date of birth. You'll need to change the format to the ISO 8601 standard with dashes: `YYYY-MM-DD`
416416
- To locate the Instagram URL, use the attribute selector `a[href*='instagram']`. Learn more about attribute selectors in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).
417417

418+
:::
419+
418420
<details>
419421
<summary>Solution</summary>
420422

@@ -503,8 +505,12 @@ async requestHandler({ ..., addRequests }) {
503505
},
504506
```
505507

508+
:::tip Need a nudge?
509+
506510
When navigating to the first IMDb search result, you might find it helpful to know that `enqueueLinks()` accepts a `limit` option, letting you specify the max number of HTTP requests to enqueue.
507511

512+
:::
513+
508514
<details>
509515
<summary>Solution</summary>
510516

sources/academy/webscraping/scraping_basics_python/01_devtools_inspecting.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,13 @@ We're not here for playing around with elements, though—we want to create a sc
143143

144144
### Find FIFA logo
145145

146-
Open the [FIFA website](https://www.fifa.com/) and use the DevTools to figure out the URL of FIFA's logo image file. Hint: You're looking for an [`img`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) element with a `src` attribute.
146+
Open the [FIFA website](https://www.fifa.com/) and use the DevTools to figure out the URL of FIFA's logo image file.
147+
148+
:::tip Need a nudge?
149+
150+
You're looking for an [`img`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) element with a `src` attribute.
151+
152+
:::
147153

148154
<details>
149155
<summary>Solution</summary>

sources/academy/webscraping/scraping_basics_python/02_devtools_locating_elements.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,11 @@ Go to Shein's [Jewelry & Accessories](https://shein.com/RecommendSelection/Jewel
189189

190190
Go to Guardian's [page about F1](https://www.theguardian.com/sport/formulaone). Use the **Console** to find all HTML elements representing the articles.
191191

192-
Hint: Learn about the [descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator).
192+
:::tip Need a nudge?
193+
194+
Learn about the [descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator).
195+
196+
:::
193197

194198
![Articles on Guardian's page about F1](./images/devtools-exercise-guardian1.png)
195199

sources/academy/webscraping/scraping_basics_python/06_locating_elements.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -270,11 +270,17 @@ Djibouti
270270

271271
### Use CSS selectors to their max
272272

273-
Simplify the code from previous exercise. Use a single for loop and a single CSS selector. You may want to check out the following pages:
273+
Simplify the code from previous exercise. Use a single for loop and a single CSS selector.
274+
275+
:::tip Need a nudge?
276+
277+
You may want to check out the following pages:
274278

275279
- [Descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator)
276280
- [`:nth-child()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)
277281

282+
:::
283+
278284
<details>
279285
<summary>Solution</summary>
280286

sources/academy/webscraping/scraping_basics_python/07_extracting_data.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -326,13 +326,15 @@ Hamilton reveals distress over ‘devastating’ groundhog accident at Canadian
326326
...
327327
```
328328

329-
Hints:
329+
:::tip Need a nudge?
330330

331331
- HTML's `time` element can have an attribute `datetime`, which [contains data in a machine-readable format](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time), such as the ISO 8601.
332332
- Beautiful Soup gives you [access to attributes as if they were dictionary keys](https://beautiful-soup-4.readthedocs.io/en/latest/#attributes).
333333
- In Python you can create `datetime` objects using `datetime.fromisoformat()`, a [built-in method for parsing ISO 8601 strings](https://docs.python.org/3/library/datetime.html#datetime.datetime.fromisoformat).
334334
- To get the date, you can call `.strftime('%a %b %d %Y')` on `datetime` objects.
335335

336+
:::
337+
336338
<details>
337339
<summary>Solution</summary>
338340

0 commit comments

Comments
 (0)