diff --git a/starter/03-CSS-Fundamentals/challenge-01/index.html b/starter/03-CSS-Fundamentals/challenge-01/index.html new file mode 100644 index 000000000..654fad608 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-01/index.html @@ -0,0 +1,40 @@ + + + + + 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

+ + + +
+ + diff --git a/starter/03-CSS-Fundamentals/challenge-01/style.css b/starter/03-CSS-Fundamentals/challenge-01/style.css new file mode 100644 index 000000000..8d674a236 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-01/style.css @@ -0,0 +1,59 @@ +body { + font-family: sans-serif; + line-height: 1.4; +} + +article { + border: 4px solid black; +} + +.product-title { + text-transform: uppercase; + text-align: center; + font-size: 22px; + background-color: #f7f7f7; +} + +.price { + font-size: 24px; +} + +.free-shipping { + text-transform: uppercase; + font-weight: bold; + color: #777; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +/* button */ +.add-button { + color: white; + background-color: black; + text-transform: uppercase; + border: none; + cursor: pointer; +} + +.add-button:hover { + color: black; + background-color: white; +} + +/* */ +.product-details { + text-transform: uppercase; + font-size: 16px; +} + +.product-list { + list-style: square; +} 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..d8b7805a8 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-02/index.html @@ -0,0 +1,40 @@ + + + + + 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

+ + + +
+ + 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..e8e40756b --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-02/style.css @@ -0,0 +1,81 @@ +/* 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; +} + +.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; +} 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..9ed9d43b6 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-03/index.html @@ -0,0 +1,50 @@ + + + + + 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

+ + + +
+ + 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..4692cba10 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-03/style.css @@ -0,0 +1,149 @@ +/* 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; + 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-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; + 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 { + 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; +} diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..5e4a4b63b 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 + @@ -14,133 +15,147 @@

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!

-
- - - - + + +

+ 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: +

+ + + +

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

+ + + + + + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..4488f7908 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,292 @@ +* { + margin: 0; + padding: 0; +} +/* PAGE SECTION */ +body { + font-family: sans-serif; + color: #444; + position: relative; +} +/* list selector - apply this rule to all this selectors */ +/* h1, +h2, +h3, +h4, +p, +li { + font-family: sans-serif; + color: #444; +} + */ + +.container { + width: 800px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; + /* position: relative; */ +} + +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} + +nav { + font-size: 18px; + text-align: center; +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 0; + width: 500px; +} + +/* smaller elements */ +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + 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; + margin-bottom: 30px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + /* align the text at the center of the parent element */ + text-align: center; +} + +p { + font-size: 22px; + /* change the line height between each line by multiplying it by 1.5 */ + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin-bottom: 10px; +} + +li:last-child { + margin-bottom: 0; +} + +/* 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; +} + +/* .first-li { + font-weight: bold; +} */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +/* nth child of the list (in this case, second) */ +li:nth-child(2) { + /* color: red; */ +} + +/* requires that the first element of the article is a p paragraph, not the +first occurence of a p element inside an article */ +article p:first-child { + color: red; +} + +/* ============= +hyperlinks +*/ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + /* not used */ +} + +/* When the mouse is hover the link */ +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +#author { + font-style: italic; + font-size: 18px; +} + +.author-text { + font-size: 20px; +} + +p, +li { + /* font-style: italic; */ + font-size: 22px; +} + +/** ======== +resolving conflicts +*/ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +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; +} + +/* 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; */ + + margin-right: 30px; + margin-top: 10px; + display: inline-block; +} + +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; +} + +/* 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; +} 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

+ +
+ + +
+ + 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..fcc28b6a3 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge-01/style.css @@ -0,0 +1,162 @@ +/* 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; + margin-top: 8px; +} + +.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: 10px 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; +} diff --git a/starter/04-CSS-Layouts/challenge-02/index.html b/starter/04-CSS-Layouts/challenge-02/index.html new file mode 100644 index 000000000..82d367bca --- /dev/null +++ b/starter/04-CSS-Layouts/challenge-02/index.html @@ -0,0 +1,58 @@ + + + + + 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-02/readme.md b/starter/04-CSS-Layouts/challenge-02/readme.md new file mode 100644 index 000000000..c0cebfb18 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge-02/readme.md @@ -0,0 +1,9 @@ +# List of this to be done + +Use flexbox 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 +4. Refactor the color list +5. Do not set the width of the column of product info and product details. Flexbox must calculate it on its own diff --git a/starter/04-CSS-Layouts/challenge-02/style.css b/starter/04-CSS-Layouts/challenge-02/style.css new file mode 100644 index 000000000..2f99834e6 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge-02/style.css @@ -0,0 +1,162 @@ +/* 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-body { + display: flex; + gap: 40px; +} + +.price-block { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.price { + font-size: 24px; +} + +.free-shipping { + text-transform: uppercase; + font-weight: bold; + color: #777; + 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; +} + +/* set product-heading and product-details equally large in the container */ +.product-heading { + flex: 1; +} + +.product-details { + flex: 1; +} + +.detail-title { + text-transform: uppercase; + font-size: 16px; + margin: 10px 0; +} + +.product-list { + list-style: square; +} + +.product-list li { + margin-bottom: 10px; +} + +.color-choose-list { + margin: 30px 5px; + display: flex; + gap: 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 */ + width: 25px; + height: 25px; +} + +.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; +} diff --git a/starter/04-CSS-Layouts/challenge-03/index.html b/starter/04-CSS-Layouts/challenge-03/index.html new file mode 100644 index 000000000..38db00b3a --- /dev/null +++ b/starter/04-CSS-Layouts/challenge-03/index.html @@ -0,0 +1,56 @@ + + + + + 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

+ +
+ +
+ + diff --git a/starter/04-CSS-Layouts/challenge-03/readme.md b/starter/04-CSS-Layouts/challenge-03/readme.md new file mode 100644 index 000000000..28412dee2 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge-03/readme.md @@ -0,0 +1,8 @@ +# List of this to be done + +Use flexbox to: + +1. put the label of FREE SHIPPING on the right of price +2. Remove the container `container` +3. The first column is the one containing the image +4. Change only the layout diff --git a/starter/04-CSS-Layouts/challenge-03/style.css b/starter/04-CSS-Layouts/challenge-03/style.css new file mode 100644 index 000000000..875139113 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge-03/style.css @@ -0,0 +1,163 @@ +/* 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; + + display: grid; + grid-template-columns: 250px 1fr 1fr; + column-gap: 40px; +} + +ul { + margin-left: 30px; +} + +.product-title { + text-transform: uppercase; + text-align: center; + font-size: 22px; + background-color: #f7f7f7; + padding: 15px 0; + grid-column: 1 / -1; + /* position: relative; */ +} + +.price-block { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.price { + font-size: 24px; +} + +.free-shipping { + text-transform: uppercase; + font-weight: bold; + color: #777; + 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; + grid-column: 1 / -1; +} + +.add-button:hover { + color: black; + background-color: white; + border-top: 2px solid black; +} + +/* set product-heading and product-details equally large in the container */ +.product-heading { + flex: 1; +} + +.product-details { + flex: 1; +} + +.detail-title { + text-transform: uppercase; + font-size: 16px; + margin: 10px 0; +} + +.product-list { + list-style: square; +} + +.product-list li { + margin-bottom: 10px; +} + +.color-choose-list { + margin: 30px 5px; + display: flex; + gap: 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 */ + width: 25px; + height: 25px; +} + +.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; +} diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..8bd65809d 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -36,23 +36,65 @@ /* STARTER */ font-family: sans-serif; background-color: #ddd; - font-size: 40px; + font-size: 30px; margin: 40px; /* CSS GRID */ + display: grid; + /* grid-template-columns: 200px 200px 1fr 1fr; */ + /* grid-template-columns: 3fr 1fr 1fr 1fr; */ + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr 1fr; + + column-gap: 30px; + row-gap: 60px; + /* temp */ + display: none; } .container--2 { + /* STARTER */ font-family: sans-serif; background-color: black; font-size: 40px; - margin: 100px; - - width: 1000px; + margin: 40px; + gap: 20px; + + width: 700px; height: 600px; /* CSS GRID */ + display: grid; + grid-template-columns: 125px 200px 125px; + grid-template-rows: 250px 100px; + + /* Aligning tracks inside container - distribute empty space */ + + justify-content: center; + /* align vertically */ + align-content: center; + + /* Alignin items INSIDE cells - default: stretch -> occupy all the space in the cell */ + align-items: center; + /* align vertically */ + justify-items: end; + } + + .el--8 { + /* start at column 2, end at column 3 */ + grid-column: 2 / 3; + /* start at row 1, end at row 2 */ + grid-row: 1 / 2; + } + + .el--2 { + /* grid-column: 1 / 3; */ + /* grid-column: 1 / span 2; */ + + /* expand till the end of the row */ + grid-column: 1 / -1; + grid-row: 2 / 3; } @@ -64,7 +106,7 @@
(4) are
(5) amazing
(6) languages
-
(7) to
+
(8) learn
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 15ecbeb77..772d1c504 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,143 +18,158 @@
The Basic Language of the Web: HTML
-->
-
+

📘 The Code Magazine

+
-
-
-

The Basic Language of the Web: HTML

+ +
+
+

The Basic Language of the Web: HTML

+ +
+ Headshot of Laura Jones + +

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

+
- 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.

- 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. -

+

+ 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. -

+

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?

+

Why should you learn HTML?

-

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

+

+ 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!

-
- - + + +

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

+ + + +