From 51f147ab548333954e79d3e196b10a0b2be0baa9 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Sun, 26 Dec 2021 10:43:11 +0100 Subject: [PATCH 01/59] L-3: Add style for simple elements --- starter/03-CSS-Fundamentals/index.html | 1 + starter/03-CSS-Fundamentals/style.css | 36 ++++++++++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 starter/03-CSS-Fundamentals/style.css diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..c6d474b81 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -3,6 +3,7 @@ The Basic Language of the Web: HTML + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..5ec4056a2 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,36 @@ +h1 { + font-size: 26px; + font-family: sans-serif; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + font-family: sans-serif; +} + +h3 { + font-size: 30px; + font-family: sans-serif; +} + +h4 { + font-size: 20px; + font-family: sans-serif; + text-transform: uppercase; + /* align the text at the center of the parent element */ + text-align: center; +} + +p { + font-size: 22px; + font-family: sans-serif; + /* change the line height between each line by multiplying it by 1.5 */ + line-height: 1.5; +} + +li { + font-size: 20px; + font-family: sans-serif; +} From d6fa1aa6e3589b2bf5add26d3f80f23c09a1dee2 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Sun, 26 Dec 2021 11:41:32 +0100 Subject: [PATCH 02/59] L-3: list selectors and nested selectors --- starter/03-CSS-Fundamentals/index.html | 2 +- starter/03-CSS-Fundamentals/style.css | 18 +++++++++++++----- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index c6d474b81..dfd7b5995 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -142,6 +142,6 @@

Related posts

-
Copyright © 2027 by The Code Magazine.
+

Copyright © 2027 by The Code Magazine.

diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 5ec4056a2..dfe638e76 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -1,13 +1,20 @@ +h1, +h2, +h3, +h4, +p, +li { + font-family: sans-serif; +} + h1 { font-size: 26px; - font-family: sans-serif; text-transform: uppercase; font-style: italic; } h2 { font-size: 40px; - font-family: sans-serif; } h3 { @@ -17,7 +24,6 @@ h3 { h4 { font-size: 20px; - font-family: sans-serif; text-transform: uppercase; /* align the text at the center of the parent element */ text-align: center; @@ -25,12 +31,14 @@ h4 { p { font-size: 22px; - font-family: sans-serif; /* change the line height between each line by multiplying it by 1.5 */ line-height: 1.5; } li { font-size: 20px; - font-family: sans-serif; +} + +footer p { + font-size: 16px; } From 1204ba07bad47e735117fed026b579c6ac29855b Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Sun, 26 Dec 2021 12:28:18 +0100 Subject: [PATCH 03/59] L-3: ids and classes --- starter/03-CSS-Fundamentals/index.html | 16 +++++++++------ starter/03-CSS-Fundamentals/style.css | 27 ++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index dfd7b5995..ce4989dc3 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -38,7 +38,9 @@

The Basic Language of the Web: HTML

width="50" /> -

Posted by Laura Jones on Monday, June 21st 2027

+

+ Posted by Laura Jones on Monday, June 21st 2027 +

Why should you learn HTML?

-

Copyright © 2027 by The Code Magazine.

+
+ +
diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index dfe638e76..d6d593352 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -1,3 +1,4 @@ +/* list selector - apply this rule to all this selectors */ h1, h2, h3, @@ -39,6 +40,32 @@ li { font-size: 20px; } +/* apply this rule to the paragraph inside a footer element */ +/* footer p { font-size: 16px; } +*/ + +/* article header p { + font-size: 16px; +} */ + +/* get elements with this id */ +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; +} From bba58f999b533a8a96a7b9aad7b4bf2fb1402f10 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Sun, 26 Dec 2021 13:03:11 +0100 Subject: [PATCH 04/59] L3: pseudo-classes for lists --- starter/03-CSS-Fundamentals/index.html | 2 +- starter/03-CSS-Fundamentals/style.css | 40 ++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index ce4989dc3..9f8f3ebf7 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -16,7 +16,7 @@
The Basic Language of the Web: HTML
The Basic Language of the Web: HTML
--> -
+

📘 The Code Magazine

-
+

The Basic Language of the Web: HTML

Date: Sun, 26 Dec 2021 17:34:05 +0100 Subject: [PATCH 10/59] L3: Auto-centering content --- starter/03-CSS-Fundamentals/index.html | 263 +++++++++++++------------ starter/03-CSS-Fundamentals/style.css | 16 ++ 2 files changed, 151 insertions(+), 128 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 424dd98d2..55e4aff84 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -15,139 +15,146 @@

The Basic Language of the Web: HTML

The Basic Language of the Web: HTML
The Basic Language of the Web: HTML
--> - -
-

📘 The Code Magazine

- - -
- -
-
-

The Basic Language of the Web: HTML

- - Headshot of Laura Jones - -

- Posted by Laura Jones on Monday, June 21st 2027 -

- - HTML code on a screen +
+
+

📘 The Code Magazine

+ +
-

- All modern websites and web applications are built using three - fundamental - technologies: HTML, CSS and JavaScript. These are the languages of the - web. -

- -

- In this post, let's focus on HTML. We will learn what HTML is all about, - and why you too should learn it. -

- -

What is HTML?

-

- HTML stands for HyperText - Markup Language. It's a markup - language that web developers use to structure and describe the content - of a webpage (not a programming language). -

-

- HTML consists of elements that describe different types of content: - paragraphs, links, headings, images, video, etc. Web browsers understand - HTML and render HTML code as websites. -

-

In HTML, each element is made up of 3 parts:

- -
    -
  1. The opening tag
    2. -
  2. The closing tag
    3. -
  3. The actual element
    4. -
- -

- You can learn more at - MDN Web Docs. -

- -

Why should you learn HTML?

- -

- There are countless reasons for learning the fundamental language of the - web. Here are 5 of them: -

- -
    -
  • To be able to use the fundamental web dev language
    • -
  • - To hand-craft beautiful websites instead of relying on tools like - Worpress or Wix -
    • -
  • To build web applications
    • -
  • To impress friends
    • -
  • To have fun 😃
    • -
- -

Hopefully you learned something new here. See you next time!

-
- - - -
-

- Copyright © 2027 by The Code Magazine. -

-
+
+ +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web. +

+ +

+ In this post, let's focus on HTML. We will learn what HTML is all + about, and why you too should learn it. +

+ +

What is HTML?

+

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the content + of a webpage (not a programming language). +

+

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers + understand HTML and render HTML code as websites. +

+

In HTML, each element is made up of 3 parts:

+ +
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
+ +

+ You can learn more at + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

+ There are countless reasons for learning the fundamental language of + the web. Here are 5 of them: +

+ +
    +
  • To be able to use the fundamental web dev language
    • +
  • + To hand-craft beautiful websites instead of relying on tools like + Worpress or Wix +
    • +
  • To build web applications
    • +
  • To impress friends
    • +
  • To have fun 😃
    • +
+ +

Hopefully you learned something new here. See you next time!

+
+ + + +
+

+ Copyright © 2027 by The Code Magazine. +

+
+ diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 66b8ab7c4..d8341cd94 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -19,6 +19,13 @@ li { } */ +.container { + width: 800px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} + .main-header { background-color: #f7f7f7; /* padding: 20px; @@ -26,6 +33,7 @@ li { padding-right: 40px; */ padding: 20px 40px; margin-bottom: 60px; + height: 80px; } nav { @@ -45,6 +53,7 @@ aside { border-top: 5px solid #1098ad; border-bottom: 5px solid #1098ad; padding: 50px 0; + width: 500px; } h1, @@ -209,3 +218,10 @@ resolving conflicts footer p { color: green; } */ + +.post-image { + width: 100%; + /* must be specified to autofit the height - necessary only because it is already set + in the html. If it was not set, it won't be necessary */ + height: auto; +} From f57fe44169f014db6312498850c956afd64096f7 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Sun, 26 Dec 2021 17:55:11 +0100 Subject: [PATCH 11/59] L3: Challenge#2: My solution --- .../challenge-02/index.html | 42 ++++++++++ .../challenge-02/style.css | 80 +++++++++++++++++++ 2 files changed, 122 insertions(+) create mode 100644 starter/03-CSS-Fundamentals/challenge-02/index.html create mode 100644 starter/03-CSS-Fundamentals/challenge-02/style.css diff --git a/starter/03-CSS-Fundamentals/challenge-02/index.html b/starter/03-CSS-Fundamentals/challenge-02/index.html new file mode 100644 index 000000000..b25493e4c --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-02/index.html @@ -0,0 +1,42 @@ + + + + + The Basic Language of the Web: HTML + + + + +
+
+

Converse Chuck Taylor All Star Low Top

+ Chuck Taylor All Star Shoe + +

$65.00

+

Free shipping

+

+ Ready to dress up or down, these classic canvas Chucks are an everyday + wardrobe staple. +

+ + More information → + +

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
+ + +
+
+ + diff --git a/starter/03-CSS-Fundamentals/challenge-02/style.css b/starter/03-CSS-Fundamentals/challenge-02/style.css new file mode 100644 index 000000000..b33e5d32a --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-02/style.css @@ -0,0 +1,80 @@ +/* global reset */ +* { + margin: 0; + padding: 0; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +.container { + width: 825px; + margin: 0 auto; +} + +article { + border: 4px solid black; +} + +ul { + margin-left: 30px; +} + +.product-title { + text-transform: uppercase; + text-align: center; + font-size: 22px; + background-color: #f7f7f7; + padding: 15px 0; +} + +.price { + font-size: 24px; +} + +.free-shipping { + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 15px; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +/* button */ +.add-button { + color: white; + width: 100%; + background-color: black; + text-transform: uppercase; + border: none; + cursor: pointer; + padding: 15px 0; +} + +.add-button:hover { + color: black; + background-color: white; + border-top: 2px solid black; +} + +/* */ +.product-details { + text-transform: uppercase; + font-size: 16px; + margin: 15px 0; +} + +.product-list { + list-style: square; +} From afb5cad0d03b2ff23516d5555329c9d14959203b Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Sun, 26 Dec 2021 18:02:16 +0100 Subject: [PATCH 12/59] L3: Challenge#2: instructor solution --- .../challenge-02/index.html | 52 +++++++++---------- .../challenge-02/style.css | 15 +++--- 2 files changed, 33 insertions(+), 34 deletions(-) diff --git a/starter/03-CSS-Fundamentals/challenge-02/index.html b/starter/03-CSS-Fundamentals/challenge-02/index.html index b25493e4c..d8b7805a8 100644 --- a/starter/03-CSS-Fundamentals/challenge-02/index.html +++ b/starter/03-CSS-Fundamentals/challenge-02/index.html @@ -7,36 +7,34 @@ -
-
-

Converse Chuck Taylor All Star Low Top

- Chuck Taylor All Star Shoe +
+

Converse Chuck Taylor All Star Low Top

+ Chuck Taylor All Star Shoe -

$65.00

-

Free shipping

-

- Ready to dress up or down, these classic canvas Chucks are an everyday - wardrobe staple. -

+

$65.00

+

Free shipping

+

+ Ready to dress up or down, these classic canvas Chucks are an everyday + wardrobe staple. +

- More information → + More information → -

Product details

-
    -
  • Lightweight, durable canvas sneaker
    • -
  • Lightly padded footbed for added comfort
    • -
  • Iconic Chuck Taylor ankle patch
    • -
+

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
- -
-
+ + diff --git a/starter/03-CSS-Fundamentals/challenge-02/style.css b/starter/03-CSS-Fundamentals/challenge-02/style.css index b33e5d32a..e8e40756b 100644 --- a/starter/03-CSS-Fundamentals/challenge-02/style.css +++ b/starter/03-CSS-Fundamentals/challenge-02/style.css @@ -9,13 +9,10 @@ body { line-height: 1.4; } -.container { - width: 825px; - margin: 0 auto; -} - -article { +.product { border: 4px solid black; + width: 825px; + margin: 50px auto; } ul { @@ -38,7 +35,7 @@ ul { text-transform: uppercase; font-weight: bold; color: #777; - margin-bottom: 15px; + margin-bottom: 20px; } .more-info:link, @@ -78,3 +75,7 @@ ul { .product-list { list-style: square; } + +.product-list li { + margin-bottom: 10px; +} From 56a7769a9387e17a813b8a905f88b76b55b37746 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Mon, 27 Dec 2021 10:37:22 +0100 Subject: [PATCH 13/59] L3: Type of boxes - inline to block --- starter/03-CSS-Fundamentals/style.css | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index d8341cd94..ff37ee8dd 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -2,7 +2,7 @@ margin: 0; padding: 0; } - +/* PAGE SECTION */ body { font-family: sans-serif; color: #444; @@ -33,7 +33,7 @@ li { padding-right: 40px; */ padding: 20px 40px; margin-bottom: 60px; - height: 80px; + /* height: 80px; */ } nav { @@ -56,6 +56,7 @@ aside { width: 500px; } +/* smaller elements */ h1, h2, h3 { @@ -225,3 +226,13 @@ footer p { in the html. If it was not set, it won't be necessary */ height: auto; } + +/* margin on a tags are applied only on left and right (withouth display block). +When display: block is added, the element is rendered as block, it occupies all the parent's +width and margin/pading are applied. */ +nav a:link { + background-color: orangered; + margin: 20px; + padding: 20px; + display: block; +} From f843a9a3cb7ee9061b1a8e6cb5f1a579196efc69 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Mon, 27 Dec 2021 10:48:41 +0100 Subject: [PATCH 14/59] L3: Type of boxes - inline-block display --- starter/03-CSS-Fundamentals/style.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index ff37ee8dd..c80f3f7e7 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -231,8 +231,16 @@ footer p { When display: block is added, the element is rendered as block, it occupies all the parent's width and margin/pading are applied. */ nav a:link { - background-color: orangered; + /* background-color: orangered; margin: 20px; padding: 20px; - display: block; + display: block; */ + + margin-right: 30px; + margin-top: 10px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; } From ed966f02ef3dc616b5c486a8b2bbab797eb4f907 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Mon, 27 Dec 2021 11:18:40 +0100 Subject: [PATCH 15/59] L3: Positioning absolute --- starter/03-CSS-Fundamentals/index.html | 1 + starter/03-CSS-Fundamentals/style.css | 14 ++++++++++++++ 2 files changed, 15 insertions(+) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 55e4aff84..1b7e5c55d 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -25,6 +25,7 @@

📘 The Code Magazine

Flexbox CSS Grid +
diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index c80f3f7e7..e1620a028 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -6,6 +6,7 @@ body { font-family: sans-serif; color: #444; + position: relative; } /* list selector - apply this rule to all this selectors */ /* h1, @@ -24,6 +25,7 @@ li { /* margin-left: auto; margin-right: auto; */ margin: 0 auto; + /* position: relative; */ } .main-header { @@ -244,3 +246,15 @@ nav a:link { nav a:link:last-child { margin-right: 0; } + +button { + padding: 20px; + cursor: pointer; + font-size: 22px; + + position: absolute; + /* top: 0; + left: 0; */ + bottom: 50px; + right: 50px; +} From a12ae77d230810206813caf6c9d17b4200aa522e Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Mon, 27 Dec 2021 11:40:31 +0100 Subject: [PATCH 16/59] L3: Pseudo-elements - after --- starter/03-CSS-Fundamentals/style.css | 33 ++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index e1620a028..66c53dade 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -71,11 +71,21 @@ h1 { font-style: italic; } +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + h2 { font-size: 40px; margin-bottom: 30px; + position: relative; } +/* h2::first-letter { + font-size: 80px; +} */ + h3 { font-size: 30px; font-family: sans-serif; @@ -199,7 +209,7 @@ a:active { p, li { - font-style: italic; + /* font-style: italic; */ font-size: 22px; } @@ -258,3 +268,24 @@ button { bottom: 50px; right: 50px; } + +/* Only the first line of the paragraph which is sibling of h3 tags (i.e. are its brother and +come right after it) will get this rule */ +h3 + p::first-line { + color: red; +} + +h2:after { + content: "TOP"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + /* added so that I can set padding top/bottom */ + display: inline-block; + padding: 5px 10px; + /* so I can move it on the corner */ + position: absolute; + top: -10px; + right: -25px; +} From fd93fe0f6423d66d41bbf4e46c0e856237838da8 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Mon, 27 Dec 2021 14:27:11 +0100 Subject: [PATCH 17/59] L3: html fix and navbar element center from parent --- starter/03-CSS-Fundamentals/index.html | 4 ++-- starter/03-CSS-Fundamentals/style.css | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 1b7e5c55d..5e4a4b63b 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -123,7 +123,7 @@

Related posts

src="img/related-1.jpg" alt="Person programming" width="75" - width="75" + height="75" /> How to Learn Web Development

By Jonas Schmedtmann

@@ -133,7 +133,7 @@

Related posts

src="img/related-2.jpg" alt="Lightning" width="75" - heigth="75" + height="75" /> The Unknown Powers of CSS

By Jim Dillon

diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 66c53dade..4488f7908 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -40,6 +40,7 @@ li { nav { font-size: 18px; + text-align: center; } article { From 281a53f82c15eacaa388d1b30d4d105a49e358c2 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Mon, 27 Dec 2021 15:02:06 +0100 Subject: [PATCH 18/59] L3: Challenge#3: My solution --- .../challenge-03/index.html | 49 +++++++ .../challenge-03/readme.md | 4 + .../challenge-03/style.css | 129 ++++++++++++++++++ 3 files changed, 182 insertions(+) create mode 100644 starter/03-CSS-Fundamentals/challenge-03/index.html create mode 100644 starter/03-CSS-Fundamentals/challenge-03/readme.md create mode 100644 starter/03-CSS-Fundamentals/challenge-03/style.css diff --git a/starter/03-CSS-Fundamentals/challenge-03/index.html b/starter/03-CSS-Fundamentals/challenge-03/index.html new file mode 100644 index 000000000..77fead965 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-03/index.html @@ -0,0 +1,49 @@ + + + + + The Basic Language of the Web: HTML + + + + +
+

Converse Chuck Taylor All Star Low Top

+ Chuck Taylor All Star Shoe + +

$65.00

+

Free shipping

+

+ Ready to dress up or down, these classic canvas Chucks are an everyday + wardrobe staple. +

+ + More information → + +
+
+
+
+
+
+
+
+ +

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
+ + +
+ + diff --git a/starter/03-CSS-Fundamentals/challenge-03/readme.md b/starter/03-CSS-Fundamentals/challenge-03/readme.md new file mode 100644 index 000000000..9b82b97a2 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-03/readme.md @@ -0,0 +1,4 @@ +# List of this to be done + +1. Add a red label in top right corner of the product with text "SALES". Add a space between letters. +2. Add the choice of color of the shoes. diff --git a/starter/03-CSS-Fundamentals/challenge-03/style.css b/starter/03-CSS-Fundamentals/challenge-03/style.css new file mode 100644 index 000000000..e49b235c3 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-03/style.css @@ -0,0 +1,129 @@ +/* global reset */ +* { + margin: 0; + padding: 0; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +.product { + border: 4px solid black; + width: 825px; + margin: 50px auto; +} + +ul { + margin-left: 30px; +} + +.product-title { + text-transform: uppercase; + text-align: center; + font-size: 22px; + background-color: #f7f7f7; + padding: 15px 0; + position: relative; +} + +.product-title::before { + position: absolute; + content: "sale"; + font-size: 16px; + color: #f7f7f7; + top: -20px; + left: -40px; + background-color: #c90000; + padding: 5px 15px; + text-transform: uppercase; +} + +.price { + font-size: 24px; +} + +.free-shipping { + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +/* button */ +.add-button { + color: white; + width: 100%; + background-color: black; + text-transform: uppercase; + border: none; + cursor: pointer; + padding: 15px 0; +} + +.add-button:hover { + color: black; + background-color: white; + border-top: 2px solid black; +} + +/* */ +.product-details { + text-transform: uppercase; + font-size: 16px; + margin: 15px 0; +} + +.product-list { + list-style: square; +} + +.product-list li { + margin-bottom: 10px; +} + +.color-choose-list { + margin: 30px 5px; +} + +.color-choose { + display: inline-block; + width: 25px; + height: 25px; + margin-right: 10px; +} + +.color-choose.background-black { + background-color: #040404; +} + +.color-choose.background-bluette { + background-color: #3c3a8b; +} + +.color-choose.background-red { + background-color: #c90000; +} + +.color-choose.background-beige { + background-color: #aaa482; +} + +.color-choose.background-green { + background-color: #5bd351; +} + +.color-choose.background-brown { + background-color: #75482ae1; +} From f4747a03d4bb15f395b635d41f65e79d295294ed Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Mon, 27 Dec 2021 17:25:21 +0100 Subject: [PATCH 19/59] L3: Challenge#3: instructor solution --- .../challenge-03/index.html | 1 + .../challenge-03/style.css | 26 ++++++++++++++++--- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/starter/03-CSS-Fundamentals/challenge-03/index.html b/starter/03-CSS-Fundamentals/challenge-03/index.html index 77fead965..9ed9d43b6 100644 --- a/starter/03-CSS-Fundamentals/challenge-03/index.html +++ b/starter/03-CSS-Fundamentals/challenge-03/index.html @@ -18,6 +18,7 @@

Converse Chuck Taylor All Star Low Top

$65.00

Free shipping

+

Sale

Ready to dress up or down, these classic canvas Chucks are an everyday wardrobe staple. diff --git a/starter/03-CSS-Fundamentals/challenge-03/style.css b/starter/03-CSS-Fundamentals/challenge-03/style.css index e49b235c3..4692cba10 100644 --- a/starter/03-CSS-Fundamentals/challenge-03/style.css +++ b/starter/03-CSS-Fundamentals/challenge-03/style.css @@ -13,6 +13,7 @@ body { border: 4px solid black; width: 825px; margin: 50px auto; + position: relative; } ul { @@ -25,10 +26,10 @@ ul { font-size: 22px; background-color: #f7f7f7; padding: 15px 0; - position: relative; + /* position: relative; */ } -.product-title::before { +/* .product-title::before { position: absolute; content: "sale"; font-size: 16px; @@ -38,7 +39,7 @@ ul { background-color: #c90000; padding: 5px 15px; text-transform: uppercase; -} +} */ .price { font-size: 24px; @@ -54,6 +55,8 @@ ul { .more-info:link, .more-info:visited { color: black; + margin-bottom: 30px; + display: inline-block; } .more-info:hover, @@ -97,7 +100,24 @@ ul { margin: 30px 5px; } +.sale { + position: absolute; + content: "sale"; + font-size: 12px; + color: #f7f7f7; + top: -15px; + left: -40px; + background-color: #c90000; + padding: 5px 15px; + text-transform: uppercase; + font-weight: bold; + display: inline-block; + /* space between letters of the content */ + letter-spacing: 2px; +} + .color-choose { + /* can't be inline or height and width won't work */ display: inline-block; width: 25px; height: 25px; From 34d04072a6c35798c0d1180dba44e967bc1a3430 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Mon, 27 Dec 2021 17:57:54 +0100 Subject: [PATCH 20/59] L4: Float in author image and in the header --- starter/04-CSS-Layouts/index.html | 6 ++++-- starter/04-CSS-Layouts/style.css | 32 +++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..2e1fe1add 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,7 +18,7 @@

The Basic Language of the Web: HTML
-->
-
+

📘 The Code Magazine

+
@@ -39,9 +40,10 @@

The Basic Language of the Web: HTML

alt="Headshot of Laura Jones" height="50" width="50" + class="author-image" /> -

+

Posted by Laura Jones on Monday, June 21st 2027

diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..f14304c2a 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -22,6 +22,7 @@ body { .main-header { background-color: #f7f7f7; + background-color: red; /* padding: 20px; padding-left: 40px; padding-right: 40px; */ @@ -265,3 +266,34 @@ footer p { nav p { font-size: 18px; } */ + +/* FLOATS */ +.author { + margin-left: 20px; + margin-top: 10px; + float: left; +} + +.author-image { + margin-bottom: 20px; + float: left; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +.clear { + clear: both; +} + +.clearfix::after { + clear: both; + /* needed for after */ + content: ""; + display: block; +} From 382055ee3a32ee77b36dda8795f5ded3e6093309 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Mon, 27 Dec 2021 18:25:55 +0100 Subject: [PATCH 21/59] L4: Fix aside width with box-sizing border-box --- starter/04-CSS-Layouts/style.css | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index f14304c2a..228df3c07 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -2,6 +2,8 @@ /* border-top: 10px solid #1098ad; */ margin: 0; padding: 0; + /* not inherited */ + box-sizing: border-box; } /* PAGE SECTIONS */ @@ -14,7 +16,7 @@ body { } .container { - width: 800px; + width: 1200px; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; @@ -22,7 +24,6 @@ body { .main-header { background-color: #f7f7f7; - background-color: red; /* padding: 20px; padding-left: 40px; padding-right: 40px; */ @@ -49,10 +50,7 @@ aside { background-color: #f7f7f7; border-top: 5px solid #1098ad; border-bottom: 5px solid #1098ad; - /* padding-top: 50px; - padding-bottom: 50px; */ - padding: 50px 0; - width: 500px; + padding: 50px 40px; } /* SMALLER ELEMENTS */ @@ -83,6 +81,7 @@ h4 { font-size: 20px; text-transform: uppercase; text-align: center; + margin-bottom: 30px; } p { @@ -135,6 +134,7 @@ li:last-child { .related { list-style: none; + margin-left: 0; } body { @@ -297,3 +297,17 @@ nav { content: ""; display: block; } + +article { + width: 825px; + float: left; +} +aside { + width: 300px; + float: right; + /* padding is within 300px width */ + /* box-sizing: border-box; */ +} +footer { + clear: both; +} From 6ff30602a81105c4e8c71cf4e6900032c01ba303 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Mon, 27 Dec 2021 19:56:23 +0100 Subject: [PATCH 22/59] L4: Challenge#1: My solution --- .../04-CSS-Layouts/challenge-01/index.html | 55 ++++++ starter/04-CSS-Layouts/challenge-01/readme.md | 7 + starter/04-CSS-Layouts/challenge-01/style.css | 161 ++++++++++++++++++ 3 files changed, 223 insertions(+) create mode 100644 starter/04-CSS-Layouts/challenge-01/index.html create mode 100644 starter/04-CSS-Layouts/challenge-01/readme.md create mode 100644 starter/04-CSS-Layouts/challenge-01/style.css diff --git a/starter/04-CSS-Layouts/challenge-01/index.html b/starter/04-CSS-Layouts/challenge-01/index.html new file mode 100644 index 000000000..2f734b1b1 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge-01/index.html @@ -0,0 +1,55 @@ + + + + + The Basic Language of the Web: HTML + + + + +
+

Converse Chuck Taylor All Star Low Top

+ Chuck Taylor All Star Shoe + +
+

$65.00

+

Free shipping

+

Sale

+

+ Ready to dress up or down, these classic canvas Chucks are an everyday + wardrobe staple. +

+ + More information → + +
+
+
+
+
+
+
+
+
+ +
+

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
+
+ + +
+ + diff --git a/starter/04-CSS-Layouts/challenge-01/readme.md b/starter/04-CSS-Layouts/challenge-01/readme.md new file mode 100644 index 000000000..4757994cd --- /dev/null +++ b/starter/04-CSS-Layouts/challenge-01/readme.md @@ -0,0 +1,7 @@ +# List of this to be done + +Use float to: + +1. put the label of FREE SHIPPING on the right of price +2. Use a container with 3 children: image, (money, description, colors), details +3. Add 40px of space between children and calculate the correct width diff --git a/starter/04-CSS-Layouts/challenge-01/style.css b/starter/04-CSS-Layouts/challenge-01/style.css new file mode 100644 index 000000000..4baf15e75 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge-01/style.css @@ -0,0 +1,161 @@ +/* global reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +.product { + border: 4px solid black; + width: 825px; + margin: 50px auto; + position: relative; +} + +ul { + margin-left: 30px; +} + +.product-title { + text-transform: uppercase; + text-align: center; + font-size: 22px; + background-color: #f7f7f7; + padding: 15px 0; + /* position: relative; */ +} + +.product-image { + float: left; + width: 250px; + margin-right: 40px; +} + +.product-heading { + float: left; + width: 250px; + margin-right: 40px; +} + +.price { + font-size: 24px; + float: left; +} + +.free-shipping { + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; + float: right; +} + +.more-info:link, +.more-info:visited { + color: black; + margin-bottom: 30px; + display: inline-block; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +/* button */ +.add-button { + color: white; + width: 100%; + background-color: black; + text-transform: uppercase; + border: none; + cursor: pointer; + padding: 15px 0; +} + +.add-button:hover { + color: black; + background-color: white; + border-top: 2px solid black; +} + +/* */ +.product-details { + float: left; + width: 200px; +} + +.detail-title { + text-transform: uppercase; + font-size: 16px; + margin: 15px 0; +} + +.product-list { + list-style: square; +} + +.product-list li { + margin-bottom: 10px; +} + +.color-choose-list { + margin: 30px 5px; +} + +.sale { + position: absolute; + content: "sale"; + font-size: 12px; + color: #f7f7f7; + top: -15px; + left: -40px; + background-color: #c90000; + padding: 5px 15px; + text-transform: uppercase; + font-weight: bold; + display: inline-block; + /* space between letters of the content */ + letter-spacing: 2px; +} + +.color-choose { + /* can't be inline or height and width won't work */ + display: inline-block; + width: 25px; + height: 25px; + margin-right: 10px; +} + +.color-choose.background-black { + background-color: #040404; +} + +.color-choose.background-bluette { + background-color: #3c3a8b; +} + +.color-choose.background-red { + background-color: #c90000; +} + +.color-choose.background-beige { + background-color: #aaa482; +} + +.color-choose.background-green { + background-color: #5bd351; +} + +.color-choose.background-brown { + background-color: #75482ae1; +} + +.clearfix { + clear: both; +} From 01bb1926f0cbaaa75f0f012593db20a0e17ecea6 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Tue, 28 Dec 2021 16:41:20 +0100 Subject: [PATCH 23/59] L4: Flexbox replace float in elements --- starter/04-CSS-Layouts/challenge-01/style.css | 3 +- starter/04-CSS-Layouts/flexbox.html | 34 +++++++++++++ starter/04-CSS-Layouts/index.html | 50 +++++++++++-------- starter/04-CSS-Layouts/style.css | 50 +++++++++++++++++-- 4 files changed, 110 insertions(+), 27 deletions(-) diff --git a/starter/04-CSS-Layouts/challenge-01/style.css b/starter/04-CSS-Layouts/challenge-01/style.css index 4baf15e75..fcc28b6a3 100644 --- a/starter/04-CSS-Layouts/challenge-01/style.css +++ b/starter/04-CSS-Layouts/challenge-01/style.css @@ -53,6 +53,7 @@ ul { color: #777; margin-bottom: 20px; float: right; + margin-top: 8px; } .more-info:link, @@ -93,7 +94,7 @@ ul { .detail-title { text-transform: uppercase; font-size: 16px; - margin: 15px 0; + margin: 10px 0; } .product-list { diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..233e8b923 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -40,6 +40,40 @@ margin: 40px; /* FLEXBOX */ + display: flex; + align-items: center; + justify-content: flex-start; + /* gap: 32px; */ + } + + .el { + /* DEFAULTS: + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + */ + /* flex-basis: 100px; */ + flex-grow: 1; + flex-shrink: 0; + } + + .el--1 { + align-self: flex-start; + /* order: 2; */ + /* this element will be twice the size of other elements + if flex-grow: 1 on the others. */ + flex-grow: 2; + } + + .el--5 { + align-self: stretch; + /* put as last element */ + order: 1; + } + + .el--6 { + /* put as first element */ + order: -1; } diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 2e1fe1add..3b3d4fc7a 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -25,8 +25,8 @@

📘 The Code Magazine

Blog Challenges - Flexbox - CSS Grid + Flexbox + CSS Grid
@@ -35,17 +35,19 @@

📘 The Code Magazine

The Basic Language of the Web: HTML

- Headshot of Laura Jones +
+ Headshot of Laura Jones -

- Posted by Laura Jones on Monday, June 21st 2027 -

+

+ Posted by Laura Jones on Monday, June 21st 2027 +

+

Why should you learn HTML?

Related posts

diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index 228df3c07..68f085db3 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -198,7 +198,6 @@ nav a:link { display: block; */ margin-right: 30px; - margin-top: 10px; display: inline-block; } @@ -268,7 +267,7 @@ nav p { } */ /* FLOATS */ -.author { +/* .author { margin-left: 20px; margin-top: 10px; float: left; @@ -293,7 +292,7 @@ nav { .clearfix::after { clear: both; - /* needed for after */ + /* needed for after content: ""; display: block; } @@ -305,9 +304,50 @@ article { aside { width: 300px; float: right; - /* padding is within 300px width */ - /* box-sizing: border-box; */ + /* padding is within 300px width + /* box-sizing: border-box; } footer { clear: both; +} */ + +/* FLEXBOX */ +.main-header { + display: flex; + align-items: center; + /* I have only 2 items, so there will be space only between them.*/ + justify-content: space-between; +} + +.author-box { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.author { + margin-bottom: 0; + margin-left: 15px; +} + +.related-post { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 30px; +} + +.related-link:link { + font-size: 17px; + font-weight: bold; + font-style: normal; + margin-bottom: 5px; + display: block; +} + +.related-author { + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + font-style: italic; } From 8f244eac222fd12884b69314a3ebb8c11a2aa469 Mon Sep 17 00:00:00 2001 From: Wolf Developer Date: Tue, 28 Dec 2021 16:55:05 +0100 Subject: [PATCH 24/59] L4: Flexbox create layout width right aside --- starter/04-CSS-Layouts/index.html | 267 +++++++++++++++--------------- starter/04-CSS-Layouts/style.css | 17 ++ 2 files changed, 152 insertions(+), 132 deletions(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 3b3d4fc7a..af862913f 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -30,141 +30,144 @@

📘 The Code Magazine

- -
-
-

The Basic Language of the Web: HTML

- -
- Headshot of Laura Jones - -

- Posted by Laura Jones on Monday, June 21st 2027 -

-
- - HTML code on a screen - -
- -

- All modern websites and web applications are built using three - fundamental - technologies: HTML, CSS and JavaScript. These are the languages of the - web. -

- -

- In this post, let's focus on HTML. We will learn what HTML is all - about, and why you too should learn it. -

- -

What is HTML?

-

- HTML stands for HyperText - Markup Language. It's a markup - language that web developers use to structure and describe the content - of a webpage (not a programming language). -

-

- HTML consists of elements that describe different types of content: - paragraphs, links, headings, images, video, etc. Web browsers - understand HTML and render HTML code as websites. -

-

In HTML, each element is made up of 3 parts:

- -
    -
  1. The opening tag
    2. -
  2. The closing tag
    3. -
  3. The actual element
    4. -
- -

- You can learn more at - MDN Web Docs. -

- -

Why should you learn HTML?

- -

- There are countless reasons for learning the fundamental language of - the web. Here are 5 of them: -

- -
    -
  • - To be able to use the fundamental web dev language -
    • -
  • - To hand-craft beautiful websites instead of relying on tools like - Worpress or Wix -
    • -
  • To build web applications
    • -
  • To impress friends
    • -
  • To have fun 😃
    • -
- -

Hopefully you learned something new here. See you next time!

-
- - + + + +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of + the web. +

+ +

+ In this post, let's focus on HTML. We will learn what HTML is all + about, and why you too should learn it. +

+ +

What is HTML?

+

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the + content of a webpage (not a programming language). +

+

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers + understand HTML and render HTML code as websites. +

+

In HTML, each element is made up of 3 parts:

+ +
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
+ +

+ You can learn more at + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

+ There are countless reasons for learning the fundamental language of + the web. Here are 5 of them: +

+ +
    +
  • + To be able to use the fundamental web dev language +
    • +
  • + To hand-craft beautiful websites instead of relying on tools like + Worpress or Wix +
    • +
  • To build web applications
    • +
  • To impress friends
    • +
  • To have fun 😃
    • +
+ +

Hopefully you learned something new here. See you next time!

+
+ + +