From 3ecd851c1091ff639ce6b79f4c6c34380923decf Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 10:07:08 +0300 Subject: [PATCH 01/20] Completed 1-parent-child exercise --- package-lock.json | 6 ---- package.json | 61 ++++++++++++++++---------------- part-1/1-parent-child/index.html | 1 + 3 files changed, 31 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index c51d81cb..c234c842 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1998,12 +1998,6 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=", "dev": true }, - "prettier": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", - "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", - "dev": true - }, "pretty-quick": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-1.11.1.tgz", diff --git a/package.json b/package.json index c9808dbe..f5b52eb1 100644 --- a/package.json +++ b/package.json @@ -5,42 +5,41 @@ "author": "Codi", "license": "ISC", "scripts": { - "1": "live-server --open=week-1/1-parent-child", - "2": "live-server --open=week-1/2-html-attributes", - "3": "live-server --open=week-1/3-semantic-html", - "4": "live-server --open=week-1/4-links-scripts", - "5": "live-server --open=week-1/5-css-selectors", - "6": "live-server --open=week-1/6-css-properties", - "7": "live-server --open=week-1/7-css-box", - "8": "live-server --open=week-1/8-advanced-selectors", - "9": "live-server --open=week-1/9-git-branch", - "10": "live-server --open=week-2/10-media-queries", - "11": "live-server --open=week-2/11-flexbox", - "12": "live-server --open=week-2/12-justify-content", - "13": "live-server --open=week-2/13-align-items", - "14": "live-server --open=week-2/14-order", - "15": "live-server --open=week-2/15-align-self", - "16": "live-server --open=week-2/16-more-flexbox", - "17": "live-server --open=week-2/17-nav-menu", - "18": "live-server --open=week-2/18-git-merge", - "19": "live-server --open=week-3/19-search", - "20": "live-server --open=week-3/20-labels", - "21": "live-server --open=week-3/21-buttons", - "22": "live-server --open=week-3/22-checkout", - "23": "live-server --open=week-3/23-comments", - "24": "live-server --open=week-3/24-dietary", - "25": "live-server --open=week-3/25-shirt-size", - "26": "live-server --open=week-3/26-checkout-groups", - "27": "live-server --open=week-3/27-attributes", - "28": "live-server --open=week-3/28-git-conflict", - "29": "live-server --open=week-3/29-combined-skills", + "1": "live-server --open=part-1/1-parent-child", + "2": "live-server --open=part-1/2-html-attributes", + "3": "live-server --open=part-1/3-semantic-html", + "4": "live-server --open=part-1/4-links-scripts", + "5": "live-server --open=part-1/5-css-selectors", + "6": "live-server --open=part-1/6-css-properties", + "7": "live-server --open=part-1/7-css-box", + "8": "live-server --open=part-1/8-advanced-selectors", + "9": "live-server --open=part-1/9-git-branch", + "10": "live-server --open=part-2/10-media-queries", + "11": "live-server --open=part-2/11-flexbox", + "12": "live-server --open=part-2/12-justify-content", + "13": "live-server --open=part-2/13-align-items", + "14": "live-server --open=part-2/14-order", + "15": "live-server --open=part-2/15-align-self", + "16": "live-server --open=part-2/16-more-flexbox", + "17": "live-server --open=part-2/17-nav-menu", + "18": "live-server --open=part-2/18-git-merge", + "19": "live-server --open=part-3/19-search", + "20": "live-server --open=part-3/20-labels", + "21": "live-server --open=part-3/21-buttons", + "22": "live-server --open=part-3/22-checkout", + "23": "live-server --open=part-3/23-comments", + "24": "live-server --open=part-3/24-dietary", + "25": "live-server --open=part-3/25-shirt-size", + "26": "live-server --open=part-3/26-checkout-groups", + "27": "live-server --open=part-3/27-attributes", + "28": "live-server --open=part-3/28-git-conflict", + "29": "live-server --open=part-3/29-combined-skills", "precommit": "pretty-quick --staged --verbose", "serve": "live-server" }, "devDependencies": { - "live-server": "^1.2.1", "husky": "^0.14.3", - "prettier": "^1.14.2", + "live-server": "^1.2.1", "pretty-quick": "^1.6.0" } } diff --git a/part-1/1-parent-child/index.html b/part-1/1-parent-child/index.html index 458a4cb2..3c8abf1b 100644 --- a/part-1/1-parent-child/index.html +++ b/part-1/1-parent-child/index.html @@ -27,6 +27,7 @@

I can meet on Tuesday and Wednesday after 4.

+ 7:15pm From 92eb14ced50e9419fcf997ec64f2c355081a8add Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 10:41:34 +0300 Subject: [PATCH 02/20] Completed 2-html-attributes exercise --- part-1/2-html-attributes/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/part-1/2-html-attributes/index.html b/part-1/2-html-attributes/index.html index dc861fa4..9d782d4f 100644 --- a/part-1/2-html-attributes/index.html +++ b/part-1/2-html-attributes/index.html @@ -23,14 +23,14 @@
Luke

- Let's meet at the iCafe in Merchant City. https://goo.gl/maps/aza4h9nUBhn + Let's meet at the Icafe in Merchant City.

7:35pm
Won

- Ok! https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif + Ok! SeeYouSoon Gif

7:38pm
From a051e091b401fb05b8905d199aeeb1da02bdbcbd Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 11:35:19 +0300 Subject: [PATCH 03/20] Completed 3-html-semantic exercise --- part-1/3-semantic-html/index.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/part-1/3-semantic-html/index.html b/part-1/3-semantic-html/index.html index 3640deaf..6464981f 100644 --- a/part-1/3-semantic-html/index.html +++ b/part-1/3-semantic-html/index.html @@ -11,10 +11,13 @@ +
-
+ +
Messages
-
+ +
Won
@@ -37,7 +40,9 @@
+
+ From 4e7bd0d7cefbf01920e6e5da35e033488a04d1f6 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 11:37:54 +0300 Subject: [PATCH 04/20] UNDONE 3-html-semantic exercise --- part-1/3-semantic-html/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/part-1/3-semantic-html/index.html b/part-1/3-semantic-html/index.html index 6464981f..fc2be570 100644 --- a/part-1/3-semantic-html/index.html +++ b/part-1/3-semantic-html/index.html @@ -1,6 +1,6 @@ - + 3. Semantic HTML - HTML, CSS and Git Exercises From f19c43a60501d814cfa205958d5656b88832c206 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 11:47:57 +0300 Subject: [PATCH 05/20] Completed 4-html links-scripts exercise --- part-1/4-links-scripts/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/part-1/4-links-scripts/index.html b/part-1/4-links-scripts/index.html index 303c7fbd..721f7a32 100644 --- a/part-1/4-links-scripts/index.html +++ b/part-1/4-links-scripts/index.html @@ -1,6 +1,7 @@ + 4. Adding Links and Scripts - HTML, CSS and Git Exercises @@ -33,5 +34,6 @@ + From 00b8647cfec1c952faca75e85455304b4f90ba72 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 11:55:56 +0300 Subject: [PATCH 06/20] Completed 5-html css-selectors exercise --- part-1/5-css-selectors/message-backgrounds.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/part-1/5-css-selectors/message-backgrounds.css b/part-1/5-css-selectors/message-backgrounds.css index ffe48332..9481178a 100644 --- a/part-1/5-css-selectors/message-backgrounds.css +++ b/part-1/5-css-selectors/message-backgrounds.css @@ -1 +1,10 @@ /* Add your CSS code below */ +#first-message { + background-color: red; +} +article { + background-color: cadetblue; +} +.message--latest{ + background-color: yellow; +} \ No newline at end of file From 392adde6dd70c44d64b7714661fc467c2b4d0f28 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 12:30:35 +0300 Subject: [PATCH 07/20] Completed 6-html css-properties exercise --- part-1/6-css-properties/styles.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/part-1/6-css-properties/styles.css b/part-1/6-css-properties/styles.css index ffe48332..2134025d 100644 --- a/part-1/6-css-properties/styles.css +++ b/part-1/6-css-properties/styles.css @@ -1 +1,19 @@ /* Add your CSS code below */ +a { +color: red; +text-decoration: none; +font-weight: bold; +} +.message__time { + font-size: 0.9rem; +} +.message__time.message__time--old { + font-size: 0.9rem; +} + +.message:first-child { + opacity: 40%; +} +.message.message--unread { +border-left: 2px solid blue; +} \ No newline at end of file From 46720a0db9ba946a5b6e28a81b1eecb61d43fbf9 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 12:40:37 +0300 Subject: [PATCH 08/20] Added_Last to Completed 6-html css-properties exercise --- part-1/6-css-properties/styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/part-1/6-css-properties/styles.css b/part-1/6-css-properties/styles.css index 2134025d..b100419b 100644 --- a/part-1/6-css-properties/styles.css +++ b/part-1/6-css-properties/styles.css @@ -16,4 +16,8 @@ font-weight: bold; } .message.message--unread { border-left: 2px solid blue; +} + +.message__content { + line-height: 2.5rem; } \ No newline at end of file From 65e62ea86fb9776588e1226bad2f631df1c39f11 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 13:03:16 +0300 Subject: [PATCH 09/20] Added_Last to Completed 7-html css-box exercise --- part-1/7-css-box/styles.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/part-1/7-css-box/styles.css b/part-1/7-css-box/styles.css index 013b94f1..7a5d5b0a 100644 --- a/part-1/7-css-box/styles.css +++ b/part-1/7-css-box/styles.css @@ -3,4 +3,11 @@ border: 1px solid #4491db; border-radius: 4px; background: #fff; + } + + + .country { + padding: 20px; + + } From ab9ba2f7a5494740bef8976a0ece9f2630cb6ecb Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 13:57:13 +0300 Subject: [PATCH 10/20] Completed 8-html advanced-selectors exercise --- part-1/8-advanced-selectors/readme.md | 1 + part-1/8-advanced-selectors/styles.css | 19 ++++++++++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/part-1/8-advanced-selectors/readme.md b/part-1/8-advanced-selectors/readme.md index 9ec9beca..93d3a754 100644 --- a/part-1/8-advanced-selectors/readme.md +++ b/part-1/8-advanced-selectors/readme.md @@ -14,3 +14,4 @@ When you complete this exercise it should look like the image below. ![Screenshot of the solution](/images/8/solution.png). _Hint: All of the selectors you need are described [in this guide](https://learn.shayhowe.com/advanced-html-css/complex-selectors/)._ + diff --git a/part-1/8-advanced-selectors/styles.css b/part-1/8-advanced-selectors/styles.css index d35c3c37..47c48a2b 100644 --- a/part-1/8-advanced-selectors/styles.css +++ b/part-1/8-advanced-selectors/styles.css @@ -1 +1,18 @@ -/* Try different box model properties below */ + + +.site-header p { + color: white; +} + +.site-header{ + margin-bottom: -15px; +} + +.site-footer:last-child { + font-size: 12px; + text-align: center; +} + +.message.message--unread:last-child { + box-shadow: 4px 4px 0 #dba944; +} \ No newline at end of file From ea547bd6866093639ce9bf816f95ca6de2bf858b Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 13:58:43 +0300 Subject: [PATCH 11/20] Completed 7-html css-box exercise --- part-1/7-css-box/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/part-1/7-css-box/styles.css b/part-1/7-css-box/styles.css index 7a5d5b0a..f95b6740 100644 --- a/part-1/7-css-box/styles.css +++ b/part-1/7-css-box/styles.css @@ -5,7 +5,7 @@ background: #fff; } - + .country { padding: 20px; From 55bb6ea14511b3181a1812c3d7545ceebf4cf5a9 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 14:47:55 +0300 Subject: [PATCH 12/20] Completed 10-htmlMedia_Queries exercise --- part-2/10-media-queries/columns.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/part-2/10-media-queries/columns.css b/part-2/10-media-queries/columns.css index 43e80d23..9f3498b0 100644 --- a/part-2/10-media-queries/columns.css +++ b/part-2/10-media-queries/columns.css @@ -1 +1,12 @@ /* Add your own CSS code below */ + +@media (min-width: 768px) { + .countries { + columns: 2; + } + } + @media (min-width: 1200px) { + .countries { + columns: 3; + } + } From d658a4c0bcd25b7ce2367084ad2474f5fd1e4891 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 15:13:04 +0300 Subject: [PATCH 13/20] Completed 11-htmlMedia_Queries exercise --- part-2/11-flexbox/flexbox.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/part-2/11-flexbox/flexbox.css b/part-2/11-flexbox/flexbox.css index 43e80d23..e8facc5a 100644 --- a/part-2/11-flexbox/flexbox.css +++ b/part-2/11-flexbox/flexbox.css @@ -1 +1,17 @@ /* Add your own CSS code below */ +.countries { + display: flex; +} +.countries.countries--first{ + flex-direction: row-reverse; +} + +.countries.countries--second{ + flex-direction: column; +} + + +.countries.countries--third{ + flex-direction: column-reverse; +} + From 656ca333be76bb763cb6586da8b7494b12054001 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 19:18:03 +0300 Subject: [PATCH 14/20] Completed 12-html Justify_Content exercise" --- part-2/12-justify-content/flexbox.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/part-2/12-justify-content/flexbox.css b/part-2/12-justify-content/flexbox.css index 3c4c7ff1..90f450a5 100644 --- a/part-2/12-justify-content/flexbox.css +++ b/part-2/12-justify-content/flexbox.css @@ -7,3 +7,18 @@ } /* Add your own CSS code below */ +.countries.countries--first{ + justify-content: flex-end; + +} +.countries.countries--second{ + justify-content: space-around; +} +.countries.countries--tall.countries--third{ + flex-direction: column; +justify-content:flex-end; +} +.countries.countries--tall.countries--fourth { + flex-direction: column-reverse; + justify-content:space-between; +} \ No newline at end of file From efd653ccff17df7b11603c197b2e53292d857182 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 19:28:31 +0300 Subject: [PATCH 15/20] Completed_13_html_Align_Items_exercise --- part-2/13-align-items/flexbox.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/part-2/13-align-items/flexbox.css b/part-2/13-align-items/flexbox.css index 3675a0df..8faad298 100644 --- a/part-2/13-align-items/flexbox.css +++ b/part-2/13-align-items/flexbox.css @@ -2,3 +2,22 @@ display: flex; } /* Add your own CSS code below */ + + +.countries.countries--tall.countries--first{ + flex-direction:row ; + align-items:center ; +} + +.countries.countries--tall.countries--second{ + flex-direction: row-reverse; + align-items: flex-end; +} +.countries.countries--tall.countries--third{ + flex-direction: column; + align-items:flex-end; +} +.countries.countries--tall.countries--fourth{ + flex-direction: column-reverse; + align-items: center; +} \ No newline at end of file From 91c47e6c4433e13fd3f3da14251366baf3586cf2 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 19:56:29 +0300 Subject: [PATCH 16/20] Completed_HTML14_Order --- part-2/14-order/flexbox.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/part-2/14-order/flexbox.css b/part-2/14-order/flexbox.css index ed621b79..de6c7964 100644 --- a/part-2/14-order/flexbox.css +++ b/part-2/14-order/flexbox.css @@ -3,3 +3,25 @@ } /* Add your own CSS code below */ +.countries.countries--first .country:nth-of-type(1){ + order: 4; +} +.countries.countries--second .country:nth-of-type(1){ + order: 3; +} +.countries.countries--second .country:nth-of-type(5){ + order: 4; +} +.countries.countries--third .country:nth-of-type(1){ + order: 5; +} +.countries.countries--third .country:nth-of-type(4){ +order: 1; +} + +.countries.countries--third .country:nth-of-type(3){ +order: 2; +} +.countries.countries--third .country:nth-of-type(2){ + order: 3; + } \ No newline at end of file From 042c887101090e5f33bed8daa6dfbe0c2a45179e Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 20:42:03 +0300 Subject: [PATCH 17/20] Completed_15HTML_Align_Self --- part-2/15-align-self/flexbox.css | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/part-2/15-align-self/flexbox.css b/part-2/15-align-self/flexbox.css index ed621b79..a417430a 100644 --- a/part-2/15-align-self/flexbox.css +++ b/part-2/15-align-self/flexbox.css @@ -3,3 +3,35 @@ } /* Add your own CSS code below */ + +.countries.countries--tall.countries--first .country.country--ethiopia{ + align-self: flex-end; +} +.countries.countries--tall.countries--second{ + align-items: center; +} +.countries.countries--tall.countries--second .country.country--ethiopia{ + align-self: flex-end; +} + +.countries.countries--tall.countries--third { + align-items:flex-end; +} +.countries.countries--tall.countries--third .country.country--brazil{ + align-self: flex-start; +} +.countries.countries--tall.countries--third .country.country--uganda{ + align-self: flex-start; +} + +.countries.countries--tall.countries--fourth { + flex-direction: column; + align-items: flex-start; +} +.countries.countries--tall.countries--fourth .country.country--uganda { + align-self: center; +} + +.countries.countries--tall.countries--fourth .country.country--ethiopia { + align-self:flex-start; +} \ No newline at end of file From 14bd5f92cf89b2e2f59cce4c8deb47d8be3d2e84 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Thu, 13 May 2021 21:29:34 +0300 Subject: [PATCH 18/20] Completed_16_HTML_MORE_Flexbox(no more brain cells) --- part-2/16-more-flexbox/flexbox.css | 80 ++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/part-2/16-more-flexbox/flexbox.css b/part-2/16-more-flexbox/flexbox.css index ed621b79..668925fa 100644 --- a/part-2/16-more-flexbox/flexbox.css +++ b/part-2/16-more-flexbox/flexbox.css @@ -3,3 +3,83 @@ } /* Add your own CSS code below */ + +.countries.countries--tall.countries--first{ + align-items: flex-end; + justify-content: flex-end; +} +.countries.countries--tall.countries--second{ + align-items: flex-end; + justify-content: center; +} +.countries.countries--tall.countries--second .country.country--brazil{ + order: 4; + +} +.countries.countries--tall.countries--second .country.country--croatia{ + order:3; + +} +.countries.countries--tall.countries--second .country.country--ethiopia{ + order: 2; + +} +.countries.countries--tall.countries--second .country.country--laos{ + order: 1; + +} + +.countries.countries--tall.countries--third{ + align-items: flex-start; + justify-content:center; +} +.countries.countries--tall.countries--third .country.country--brazil{ + align-self:flex-end; +} + + + + +.countries.countries--tall.countries--fourth { + flex-direction: column; + align-items: flex-end; + justify-content: center; +} +.countries.countries--tall.countries--fourth .country.country--ethiopia{ + align-self: center; + +} +.countries.countries--tall.countries--fourth .country.country--laos{ + align-self: center; + +} + + + +.countries.countries--tall.countries--fifth { + flex-direction: column; + align-items: flex-end; + justify-content: space-evenly; +} + + + +.countries.countries--tall.countries--fifth .country.country--uganda{ +align-self: center; +} + +.countries.countries--fifth .country:nth-of-type(1) { + order: 1; +} +.countries.countries--fifth .country:nth-of-type(2) { + order: 2; +} +.countries.countries--fifth .country:nth-of-type(3) { + order: 3; +} +.countries.countries--tall.countries--fifth .country.country--brazil{ + order: 5; +} +.countries.countries--tall.countries--fifth .country.country--ethiopia{ + order: 1; +} \ No newline at end of file From 2cacf79a861c6e7f16ddb04663337a399852a510 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Sun, 16 May 2021 14:49:42 +0300 Subject: [PATCH 19/20] Completed 17-html nav_menu exercise --- part-2/17-nav-menu/styles.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/part-2/17-nav-menu/styles.css b/part-2/17-nav-menu/styles.css index f04f4c7b..d9af156b 100644 --- a/part-2/17-nav-menu/styles.css +++ b/part-2/17-nav-menu/styles.css @@ -1 +1,22 @@ /* Write your media queries and flexbox CSS below */ + + +@media (min-width: 480px){ + nav { + display: flex; + } +} +@media (min-width: 700px) { + .site-header{ + display:flex; + + } +} +@media (min-width: 992px) { + header { + display: flex; + justify-content: space-between; + } + + +} \ No newline at end of file From 7f4aede5275cf650210c67b5d70c5bb2a8c88d28 Mon Sep 17 00:00:00 2001 From: LeaZN Date: Sun, 16 May 2021 15:13:26 +0300 Subject: [PATCH 20/20] orangeLinks --- part-2/18-git-merge/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/part-2/18-git-merge/styles.css b/part-2/18-git-merge/styles.css index 0051cdba..af46a4f7 100644 --- a/part-2/18-git-merge/styles.css +++ b/part-2/18-git-merge/styles.css @@ -1,6 +1,6 @@ /* Add your own CSS code below */ .link { - color: #4491db; + color: orangered; font-weight: 700; text-decoration: none; }