` tag that reads "HELLO WORLD!!!". +1. Set an inline style to change the text color of the tag to `color: orangered` and give it a solid red border of 1px. + -## 💻 Preview +### 💡 Hint: -It should look like this: +- A convenient way to import the basic html structure of your web page is to just type an exclamation mark `!` and select the emmet option that will pop up in Gitpod. +- Read how to apply borders here: https://www.w3schools.com/css/css_border_shorthand.asp +- For this exercise, do NOT use `styles.css` file or ``; diff --git a/exercises/03-List-styling/README.md b/exercises/03-List-styling/README.md index b6fe482a..74744621 100644 --- a/exercises/03-List-styling/README.md +++ b/exercises/03-List-styling/README.md @@ -22,6 +22,8 @@ Will remove the numbers or bullets and will move the text to the left so there i **Note:** +Build the existing code first to see what the page originally looks like. +Then make the changes below and build again. ## 📝 Instructions: diff --git a/exercises/03-List-styling/index.html b/exercises/03-List-styling/index.html index 4271f95a..0af7b4c5 100644 --- a/exercises/03-List-styling/index.html +++ b/exercises/03-List-styling/index.html @@ -1,6 +1,9 @@ + + + diff --git a/exercises/03-List-styling/styles.css b/exercises/03-List-styling/styles.css index 9cf23e9e..7699bdf3 100644 --- a/exercises/03-List-styling/styles.css +++ b/exercises/03-List-styling/styles.css @@ -12,3 +12,4 @@ body { padding: 120px; width: 300px; } + diff --git a/exercises/03-List-styling/tests.js b/exercises/03-List-styling/tests.js index 8192affe..42790b16 100644 --- a/exercises/03-List-styling/tests.js +++ b/exercises/03-List-styling/tests.js @@ -4,7 +4,7 @@ const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); jest.dontMock("fs"); -describe("The Table tag should contain inline style background: green", function() { +describe("The lists should be modified accordingly", function() { beforeEach(() => { //here I import the HTML into the document document.documentElement.innerHTML = html.toString(); @@ -12,19 +12,31 @@ describe("The Table tag should contain inline style background: green", function afterEach(() => { jest.resetModules(); }); + it("You should not change the existing head tag elements", function () { let head = document.querySelector('head'); - let meta = head.querySelector("meta") - let title = head.querySelector('title').innerHTML + let title = head.querySelector('title').innerHTML; - expect(meta).toBe(null) - expect(title).toBe('03 Inline Styles') + expect(title).toBe('03 List styling') }) - it("The background should be green", function() { - const table = document.querySelector("table"); - // expect(table.style.background === "green").toBeTruthy(); - var styles = window.getComputedStyle(table); - expect(styles["background"]).toBe("green"); - }); + // Test in progress: + // it("The lists should be correctly styled", function() { + // const uls = document.querySelectorAll("ul"); + // const ols = document.querySelectorAll("ol"); + // console.log(uls); + // console.log(ols); + + // var style1 = window.getComputedStyle(ols[0]); + // var style2 = window.getComputedStyle(uls[0]); + // var style3 = window.getComputedStyle(ols[1]); + // var style4 = window.getComputedStyle(uls[1]); + + + // expect(style1["listStyleType"]).toBe("lower-alpha"); + // expect(style2["listStyleType"]).toBe("square"); + // expect(style3["listStyleType"]).toBe("armenian"); + // expect(style4["listStyleType"]).toBe("none"); + + // }); }); From 849fd02e47deff0c2cb2e56368bece57a81b11d4 Mon Sep 17 00:00:00 2001 From: George Mihov Date: Sat, 14 Aug 2021 17:19:32 +0000 Subject: [PATCH 4/6] Corrected the tests of ex 03 so they don't break --- exercises/02.1-Background/index.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/exercises/02.1-Background/index.html b/exercises/02.1-Background/index.html index 1f3d8d87..ce03ce24 100644 --- a/exercises/02.1-Background/index.html +++ b/exercises/02.1-Background/index.html @@ -1,9 +1,6 @@ - - - From a7227b0f6820570dde91397953a7c39c62eab000 Mon Sep 17 00:00:00 2001 From: George Mihov Date: Sun, 15 Aug 2021 15:00:51 +0000 Subject: [PATCH 5/6] Added to ex 01.1 - extra explanation and tasks - students practice color, font-size, padding, to make text look closer to the sample image --- exercises/01-Hello-World/README.md | 6 ++++-- exercises/01.1-The-Style-Tag/README.md | 13 +++++++++++-- exercises/01.1-The-Style-Tag/index.html | 2 +- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/exercises/01-Hello-World/README.md b/exercises/01-Hello-World/README.md index 39b8be40..da65dfa5 100644 --- a/exercises/01-Hello-World/README.md +++ b/exercises/01-Hello-World/README.md @@ -4,14 +4,16 @@ tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU" # `01` Hello World in CSS CSS is about adding styles to our HTML elements. -The most basic way to apply a style to an HTML element is to use the html `style` attribute within the tag. This is called "inline styles" and works like this: + +The most **basic** way to apply a style to an HTML element is to use the html `style` attribute within the tag. This is called "inline styles" and works like this: ```HTML Go to google ``` This will set the text color of the link above to red, and the font size to 14 pixels. -In contemporary web design this way of applying styles is discouraged, because it is not efficient - you have to apply styles tag by tag. But you will run into examples of it and need to be familiar with it. + +In contemporary web design this way of applying styles is **discouraged**, because it is not efficient - you have to apply styles tag by tag. But you will run into examples of it and need to be familiar with it. To apply styles you always have to follow thеse steps: diff --git a/exercises/01.1-The-Style-Tag/README.md b/exercises/01.1-The-Style-Tag/README.md index df26f527..721877bc 100644 --- a/exercises/01.1-The-Style-Tag/README.md +++ b/exercises/01.1-The-Style-Tag/README.md @@ -4,8 +4,10 @@ tutorial: "https://www.youtube.com/watch?v=C5sOchuD2d4" # `01.1` The Style Tag -If you want to add styles into a website by writing CSS you have to always add it within a `` tag. +A more efficient approach to adding styles into your webpages is by writing your CSS in a `` tag, within the head section of your HTML code. + You can have as many style tags as you want but it is recomended to have only one at the beginning of your website code. + ```HTML /* the website CSS Styles go here */ @@ -14,7 +16,14 @@ You can have as many style tags as you want but it is recomended to have only on ## 📝 Instructions -Add a `` tag into your website and using CSS select all `

` tags to turn their text into blue color. +- Add a `` tag into your website +- Using CSS properties select all `

` tags to turn their text color to blue. +- Make tthe font size 36px. +- Give the p tag padding of 40px. + +### 💡 Hint + +Remember that you will need the complete html structure of the page, because the `style` tags need to go inside of the `head` tags. ## 💻 Preview diff --git a/exercises/01.1-The-Style-Tag/index.html b/exercises/01.1-The-Style-Tag/index.html index 1c51e8e0..44d8ee1a 100644 --- a/exercises/01.1-The-Style-Tag/index.html +++ b/exercises/01.1-The-Style-Tag/index.html @@ -1,4 +1,4 @@ - +

Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity, From 5f9ca171657e4313bbdae78e36df660d8cfd790b Mon Sep 17 00:00:00 2001 From: George Mihov Date: Sun, 15 Aug 2021 19:16:23 +0000 Subject: [PATCH 6/6] Updates --- exercises/01.1-The-Style-Tag/README.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/exercises/01.1-The-Style-Tag/README.md b/exercises/01.1-The-Style-Tag/README.md index 721877bc..7007cb3d 100644 --- a/exercises/01.1-The-Style-Tag/README.md +++ b/exercises/01.1-The-Style-Tag/README.md @@ -16,14 +16,18 @@ You can have as many style tags as you want but it is recomended to have only on ## 📝 Instructions -- Add a `` tag into your website -- Using CSS properties select all `

` tags to turn their text color to blue. -- Make tthe font size 36px. -- Give the p tag padding of 40px. +1. Add a `` tag into your website +2. Using CSS properties select all `

` tags to turn their text color to blue. +3. Make the font (text) twice its original size - use the `em` units. +4. Give the `p` tag padding of `2rem`. ### 💡 Hint -Remember that you will need the complete html structure of the page, because the `style` tags need to go inside of the `head` tags. +- Remember that you will need the complete html structure of the page, because the `style` tags need to go inside of the `head` tags. + +- You can learn more about the different measurement units in CSS here: +https://www.w3schools.com/cssref/css_units.asp + ## 💻 Preview