From 9f4b249803f2251c5d4f3b3a8cc3497b3a4cf1b9 Mon Sep 17 00:00:00 2001 From: Pedro Martin Date: Wed, 25 Sep 2024 11:40:57 +0100 Subject: [PATCH] Fws73 (#147) * add content to first lesson * Fix broken links on lesson 2 * Lint --- biome.json | 2 +- lessons/src/lessons/fewd/01-html-basics.md | 3 +- .../fewd/02-advanced-html-intro-to-css.md | 74 +++++++++---------- 3 files changed, 38 insertions(+), 41 deletions(-) diff --git a/biome.json b/biome.json index 76a6fbc..357595c 100644 --- a/biome.json +++ b/biome.json @@ -1,5 +1,5 @@ { - "$schema": "https://biomejs.dev/schemas/1.1.2/schema.json", + "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json", "organizeImports": { "enabled": false }, diff --git a/lessons/src/lessons/fewd/01-html-basics.md b/lessons/src/lessons/fewd/01-html-basics.md index fb3b4b6..62975a6 100644 --- a/lessons/src/lessons/fewd/01-html-basics.md +++ b/lessons/src/lessons/fewd/01-html-basics.md @@ -21,6 +21,7 @@ In this lesson, you will: ## Meet the Team - Pedro Martin +- Tech lead in previous roles. - Senior Software engineer at Red Badger. - Former science teacher. - General Assembly alumni 2015. @@ -33,7 +34,7 @@ In this lesson, you will: ## Tell us a highlight from a random year -- Go to the random year generator +- Go to the random year generator - Enter your year of birth - Tell us your name? - Tell us a highlight from your life that happened that year diff --git a/lessons/src/lessons/fewd/02-advanced-html-intro-to-css.md b/lessons/src/lessons/fewd/02-advanced-html-intro-to-css.md index b0b6cbd..db2dd3b 100644 --- a/lessons/src/lessons/fewd/02-advanced-html-intro-to-css.md +++ b/lessons/src/lessons/fewd/02-advanced-html-intro-to-css.md @@ -452,33 +452,31 @@ p { ### Hexadecimal values .row[ - .col[ +.col[ Each hex value consists of a hash/pound symbol (`#`) followed by six hexadecimal numbers, each of which can take a value between 0 and f (which represents 15) — so **0123456789abcdef**. Each pair of values represents one of the channels — **red**, **green** and **blue** — and allows us to specify any of the 256 available values for each (16 x 16 = 256.) - ] - .col[ +] +.col[ + ```css p:nth-child(1) { -/* equivalent to the red keyword */ - background-color: #ff0000; + /* equivalent to the red keyword */ + background-color: #ff0000; } p:nth-child(2) { -/* equivalent to the blue keyword */ - background-color: #0000ff; + /* equivalent to the blue keyword */ + background-color: #0000ff; } p:nth-child(3) { -/* has no exact keyword equivalent */ - background-color: #e0b0ff; + /* has no exact keyword equivalent */ + background-color: #e0b0ff; } ``` - ] ] - - - +] --- @@ -487,33 +485,33 @@ p:nth-child(3) { ### RGB .row[ - .col[ +.col[ An RGB value is a function `rgb()` which is given three parameters that represent the `red`, `green` and `blue` channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between **0** and **255**. - ] - .col[ +] +.col[ + ```css p:nth-child(1) { -/* equivalent to the red keyword */ - background-color: rgb(255, 0, 0); + /* equivalent to the red keyword */ + background-color: rgb(255, 0, 0); } p:nth-child(2) { -/* equivalent to the blue keyword */ - background-color: rgb(0, 0, 255); + /* equivalent to the blue keyword */ + background-color: rgb(0, 0, 255); } p:nth-child(3) { -/* has no exact keyword equivalent */ - background-color: rgb(224, 176, 255); + /* has no exact keyword equivalent */ + background-color: rgb(224, 176, 255); } ``` - ] ] - +] --- @@ -522,7 +520,7 @@ p:nth-child(3) { ### HSL .row[ - .col[ +.col[ The `hsl()` function accepts **hue**, **saturation**, and **lightness** values, which are used to distinguish between the 16.7 million colors, but in a different way: - **Hue**: the base shade of the color. This takes a value between 0 and @@ -535,24 +533,21 @@ The `hsl()` function accepts **hue**, **saturation**, and **lightness** values, ```css p:nth-child(1) { -/* equivalent to the red keyword */ - background-color: hsl(0, 100%, 50%); + /* equivalent to the red keyword */ + background-color: hsl(0, 100%, 50%); } p:nth-child(2) { -/* equivalent to the blue */ - background-color: hsl(240, 100%, 50%); + /* equivalent to the blue */ + background-color: hsl(240, 100%, 50%); } p:nth-child(3) { -/* has no exact keyword equivalent */ - background-color: hsl(276, 100%, 85%); + /* has no exact keyword equivalent */ + background-color: hsl(276, 100%, 85%); } -``` - ] -] - - - +``` +] +] --- @@ -688,8 +683,9 @@ Take a movie that you like and create a web page about the CV of one the charact Here are some examples - [Darth Vader](https://www.giraffecvs.co.uk/wp-content/uploads/2013/05/CVDarthVader_rev8-page-001.jpg) -- [Darth Vader](http://uk.businessinsider.com/what-darth-vaders-resume-would-be-2015-12) -- [Disney characters](https://iletaitunepub.fr/wp/wp-content/uploads/2017/03/cv-personnages-disney-2.jpg) +- [Fictional Characters](https://www.filmdaddy.com/archives/5-resumes-of-famous-fictional-characters) +- [Spiderman](https://pbs.twimg.com/media/FN7Q5fQWQAMVH1z?format=jpg&name=large) +- [Peppa Pig](https://pbs.twimg.com/media/FN7Q5ewXsAgzr3o?format=jpg&name=large) ---