diff --git a/README.md b/README.md index 88e3430a5..cf52121fc 100644 --- a/README.md +++ b/README.md @@ -59,3 +59,39 @@ Use starter code to start each section, and **final code to compare it with your ### Q13: Do you accept pull requests? **A:** No, for the simple reason that I want this repository to contain the _exact_ same code that is shown in the videos. However, please feel free to add an issue if you found one. + +# Notes + +## Box Model +- content: the content of the html element, text, images, etc +- padding: transparent area around the content, inside the border +- border: goes around the padding and the content +- margin: transparent area around the border, outside the border + - we normally use margin to **create space between elements** + - collapsing margin: when two margins touch each other, they collapse into one margin + - the margin will be the size of the larger margin + - this is a feature of CSS + - it does not happen with padding or border +- There are two kind of elements in the box model: block and inline + - block elements: elements that always start on a new line and take up the full width available + - ex: div, h1, p, form, etc + - by default, block elements have a width of 100% + - inline elements: elements that do not start on a new line and only take up as much width as necessary + - ex: span, a, img, etc + - width and height properties have no effect on inline elements + - padding, margin, and border properties can be applied to inline elements (only horizontally) + - `display: block;` can make an inline element be rendered as a block element + - `display: inline-block;`: looks like inline from outside, behave like block element on the inside + - it won't create line breaks + - it takes up only as much width as necessary for the content + - all box model properties can be applied to inline-block elements + - an `` element is by default an inline-block element + +# Useful Links +- https://jonas.io/resources/ +- W3C page for pseudo classes: https://www.w3schools.com/css/css_pseudo_classes.asp + - the n-th child pseudo class: it selects the elements that are the n-th child of their parent and that match a certain type of selector + - ex: 'artical p:first-child' does not select the first p element in the article element, but the p element that is the first child of a article element + - it's perfect to apply to the child elements that are of the same type +- https://www.youtube.com/watch?v=uFXweZepi1o&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R +- HTML validator: https://validator.w3.org/ diff --git a/css-priority.heic b/css-priority.heic new file mode 100644 index 000000000..4141b6f8d Binary files /dev/null and b/css-priority.heic differ diff --git a/flex-note.md b/flex-note.md new file mode 100644 index 000000000..6555d696a --- /dev/null +++ b/flex-note.md @@ -0,0 +1,22 @@ +# CSS Flex Property Guide + +## Basic Properties + +The `flex` property is a shorthand for: +- `flex-grow` +- `flex-shrink` +- `flex-basis` + +## Common Values + +```css +/* Most used flex values */ +flex: 0; /* flex: 0 1 auto */ +flex: 1; /* flex: 1 1 0% */ +flex: auto; /* flex: 1 1 auto */ +flex: none; /* flex: 0 0 auto */ +flex: initial; /* flex: 0 1 auto */ +``` + +## Links +- https://flexboxfroggy.com/ \ No newline at end of file diff --git a/grid-note.md b/grid-note.md new file mode 100644 index 000000000..502788e8e --- /dev/null +++ b/grid-note.md @@ -0,0 +1,13 @@ +## CSS Grid: `fr` Unit + +The `fr` unit in CSS Grid stands for "fraction". It is used to define a portion of the available space in the grid container. For example, `1fr` represents one fraction of the available space, and `2fr` represents two fractions of the available space. This unit is useful for creating flexible and responsive grid layouts. + +### Examples + +```css +.grid-container { + display: grid; + grid-template-columns: 1fr 2fr 1fr; + grid-template-rows: 1fr 2fr 1fr; +} +``` \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..68e163324 --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + Document + + + + + diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..bd0129367 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,12 @@ + + + + + + Blog + + +

Blog

+ Back to Home + + diff --git a/starter/02-HTML-Fundamentals/challange.html b/starter/02-HTML-Fundamentals/challange.html new file mode 100644 index 000000000..35faa5681 --- /dev/null +++ b/starter/02-HTML-Fundamentals/challange.html @@ -0,0 +1,27 @@ +
+

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/02-HTML-Fundamentals/challenges.jpg b/starter/02-HTML-Fundamentals/img/challenges.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/challenges.jpg rename to starter/02-HTML-Fundamentals/img/challenges.jpg diff --git a/starter/02-HTML-Fundamentals/laura-jones.jpg b/starter/02-HTML-Fundamentals/img/laura-jones.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/laura-jones.jpg rename to starter/02-HTML-Fundamentals/img/laura-jones.jpg diff --git a/starter/02-HTML-Fundamentals/post-img.jpg b/starter/02-HTML-Fundamentals/img/post-img.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/post-img.jpg rename to starter/02-HTML-Fundamentals/img/post-img.jpg diff --git a/starter/02-HTML-Fundamentals/related-1.jpg b/starter/02-HTML-Fundamentals/img/related-1.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-1.jpg rename to starter/02-HTML-Fundamentals/img/related-1.jpg diff --git a/starter/02-HTML-Fundamentals/related-2.jpg b/starter/02-HTML-Fundamentals/img/related-2.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-2.jpg rename to starter/02-HTML-Fundamentals/img/related-2.jpg diff --git a/starter/02-HTML-Fundamentals/related-3.jpg b/starter/02-HTML-Fundamentals/img/related-3.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-3.jpg rename to starter/02-HTML-Fundamentals/img/related-3.jpg diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..8a1d29848 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,129 @@ + + + + + + The Basic Language of the Web: HTML + + +
+

📘 The Code Magazine

+ +
+
+
+

The Basic Language of the Web: HTML

+ the potrait of the author +

+ Posted by Laura Jones on Monday, June 21st 2027 In + this post, let's focus on HTML. +

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

+

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

+ + +

+ You can learn more at the + 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/challange/index.html b/starter/03-CSS-Fundamentals/challange/index.html new file mode 100644 index 000000000..51e8e1594 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challange/index.html @@ -0,0 +1,51 @@ + + + + + + + Document + + +
+
+
+

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 → +
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
+

Product details

+ + + +
+
+ + diff --git a/starter/03-CSS-Fundamentals/challange/style.css b/starter/03-CSS-Fundamentals/challange/style.css new file mode 100644 index 000000000..74070f43f --- /dev/null +++ b/starter/03-CSS-Fundamentals/challange/style.css @@ -0,0 +1,141 @@ +* { + margin: 0; + padding: 0; + border: 0; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +ul { + padding: 0 20px; +} + +li { + margin: 10px 0; +} + +p { + margin: 20px 0; +} + +h3 { + margin: 20px 0; +} + +.container { + width: 800px; + margin: 0 auto; + padding-top: 20px; +} + +.product { + border: 4px black solid; + width: 100%; +} + +.product-title-container { + position: relative; +} + +.product-title-container::after { + content: "sale"; + text-transform: uppercase; + background-color: red; + color: white; + padding: 5px 15px; + position: absolute; + top: -15px; + left: -15px; + letter-spacing: 2px; +} + +.product-title { + font-size: 22px; + text-transform: uppercase; + text-align: center; + background-color: #f7f7f7; + padding: 15px; +} + +.product-price { + font-size: 24px; + margin-bottom: 0px; +} + +.product-shipping { + text-transform: uppercase; + color: #777777; + font-size: 12px; + font-weight: bold; + margin-top: 0px; +} + +.more-info { + color: black; + font-size: 16px; + background-color: #f7f7f7; +} + +.more-info:hover { + text-decoration: none; +} + +.variant-list { + list-style: none; +} + +.variant-list li { + display: inline-block; + width: 20px; + height: 20px; + margin: 30px 5px; +} + +.variant-list li:first-child { + background-color: black; + margin-left: 2px; +} + +.variant-list li:nth-child(2) { + background-color: blue; +} + +.variant-list li:nth-child(3) { + background-color: red; +} +.variant-list li:nth-child(4) { + background-color: yellow; +} +.variant-list li:nth-child(5) { + background-color: green; +} +.variant-list li:nth-child(6) { + background-color: brown; +} + +.product-details-header { + text-transform: uppercase; +} + +.product-details-list { + list-style: square; +} + +.add-cart { + background-color: black; + color: white; + font-size: 20px; + cursor: pointer; + width: 100%; + padding: 15px; + text-transform: uppercase; + border-top: 4px solid black; +} + +.add-cart:hover { + background-color: #f7f7f7; + color: black; +} diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..08205c813 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -3,144 +3,161 @@ 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..55d0ba977 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,206 @@ +* { + /* universal selector; no inheritance involved */ + /* border-bottom: 10px solid red; */ + margin: 0; + padding: 0s; +} + +body { + font-family: sans-serif; + color: #444444; +} + +nav a:link { + margin-right: 30px; + margin-top: 10px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} + +.container { + width: 800px; + border-top: 10px solid #1098ad; + margin: 0 auto; +} + +nav { + font-size: 18px; +} + +article { + margin-bottom: 60px; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; + height: 80px; +} + +.post-header { + margin-bottom: 40px; +} + +.post-img { + width: 50%; /* percentage of the parent element */ + height: auto; +} + +aside { + background-color: #f7f7f7; + /* shorthand property */ + /* border: 5px solid #1098ad; */ + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + /* padding-top: 50px; + padding-bottom: 50px; */ + padding: 50px 0; + width: 500px; +} + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + font-style: italic; + text-transform: uppercase; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; + position: relative; +} + +h2::after { + content: "TOP"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -15px; + right: -25px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 30px; +} + +h3 + p { +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ol, +ul { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin-bottom: 10px; +} + +li:last-child { + margin-bottom: 0; +} + +/* footer p { + font-size: 16px; + } */ + +#copyright { + font-size: 16px; +} + +/* article header p { + font-style: italic; + } */ + +#author { + font-style: italic; + font-size: 18px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; +} + +/* li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} */ + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} +/* LVHA */ + +.like-button-container { + position: relative; + /* height: 100px; */ + background-color: red; +} +.like-button { + font-size: 22px; + padding: 20px; + cursor: pointer; + + position: absolute; + bottom: 50px; + right: 50px; +} diff --git a/starter/04-CSS-Layouts/challange-flex/index.html b/starter/04-CSS-Layouts/challange-flex/index.html new file mode 100644 index 000000000..e9615f598 --- /dev/null +++ b/starter/04-CSS-Layouts/challange-flex/index.html @@ -0,0 +1,63 @@ + + + + + + + Document + + +
+
+
+

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 → +
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
+
+
+

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
+
+
+ + +
+
+ Reference + + diff --git a/starter/04-CSS-Layouts/challange-flex/style.css b/starter/04-CSS-Layouts/challange-flex/style.css new file mode 100644 index 000000000..529951d42 --- /dev/null +++ b/starter/04-CSS-Layouts/challange-flex/style.css @@ -0,0 +1,159 @@ +* { + margin: 0; + padding: 0; + border: 0; +} + +.flex-box { + display: flex; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +ul { + padding: 0 20px; +} + +li { + margin: 0 0; +} + +p { + margin: 20px 0; +} + +h3 { + margin: 20px 0; +} + +.container { + width: 900px; + margin: 0 auto; + padding-top: 20px; +} + +.product { + border: 4px black solid; + width: 100%; +} + +.product-title-container { + position: relative; +} + +.product-title-container::after { + content: "sale"; + text-transform: uppercase; + background-color: red; + color: white; + padding: 5px 15px; + position: absolute; + top: -15px; + left: -15px; + letter-spacing: 2px; +} + +.product-title { + font-size: 22px; + text-transform: uppercase; + text-align: center; + background-color: #f7f7f7; + padding: 15px; +} + +.product-price-box { + flex: 1; + align-items: center; + justify-content: space-between; +} + +.product-price { + font-size: 24px; +} + +.product-shipping { + text-transform: uppercase; + color: #777777; + font-size: 12px; + font-weight: bold; + margin: 0 0; +} + +.more-info { + color: black; + font-size: 16px; + background-color: #f7f7f7; +} + +.more-info:hover { + text-decoration: none; +} + +.variant-list { + flex: 1; + align-items: center; + justify-content: flex-start; + gap: 20px; + list-style: none; + margin-top: 10px; +} + +.variant-list li { + width: 22px; + height: 22px; +} + +.variant-list li:first-child { + background-color: black; +} + +.variant-list li:nth-child(2) { + background-color: blue; +} + +.variant-list li:nth-child(3) { + background-color: red; +} +.variant-list li:nth-child(4) { + background-color: yellow; +} +.variant-list li:nth-child(5) { + background-color: green; +} +.variant-list li:nth-child(6) { + background-color: brown; +} + +.product-details-header { + text-transform: uppercase; +} + +.product-details-list { + list-style: square; +} + +.add-cart { + background-color: black; + color: white; + font-size: 20px; + cursor: pointer; + width: 100%; + padding: 15px; + text-transform: uppercase; + border-top: 4px solid black; +} + +.add-cart:hover { + background-color: #f7f7f7; + color: black; +} + +.product-info-box { + /* flex: 0 1 250px; */ + align-items: center; + justify-content: center; + gap: 30px; +} diff --git a/starter/04-CSS-Layouts/challange-grid/index.html b/starter/04-CSS-Layouts/challange-grid/index.html new file mode 100644 index 000000000..0345922b1 --- /dev/null +++ b/starter/04-CSS-Layouts/challange-grid/index.html @@ -0,0 +1,64 @@ + + + + + + + Document + + +
+
+
+

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 → +
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
+
+
+

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
+
+ + + +
+
+ Reference + + diff --git a/starter/04-CSS-Layouts/challange-grid/style.css b/starter/04-CSS-Layouts/challange-grid/style.css new file mode 100644 index 000000000..f6412a83d --- /dev/null +++ b/starter/04-CSS-Layouts/challange-grid/style.css @@ -0,0 +1,166 @@ +* { + margin: 0; + padding: 0; + border: 0; +} + +.flex-box { + display: flex; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +ul { + padding: 0 20px; +} + +li { + margin: 0 0; +} + +p { + margin: 20px 0; +} + +h3 { + margin: 20px 0; +} + +.container { + width: 900px; + margin: 0 auto; + padding-top: 20px; +} + +.product { + border: 4px black solid; + width: 100%; +} + +.product-title-container { + position: relative; +} + +.product-title-container::after { + content: "sale"; + text-transform: uppercase; + background-color: red; + color: white; + padding: 5px 15px; + position: absolute; + top: -15px; + left: -15px; + letter-spacing: 2px; +} + +.product-title { + font-size: 22px; + text-transform: uppercase; + text-align: center; + background-color: #f7f7f7; + padding: 15px; +} + +.product-price-box { + flex: 1; + align-items: center; + justify-content: space-between; +} + +.product-price { + font-size: 24px; +} + +.product-shipping { + text-transform: uppercase; + color: #777777; + font-size: 12px; + font-weight: bold; + margin: 0 0; +} + +.more-info { + color: black; + font-size: 16px; + background-color: #f7f7f7; +} + +.more-info:hover { + text-decoration: none; +} + +.variant-list { + flex: 1; + align-items: center; + justify-content: flex-start; + gap: 20px; + list-style: none; + margin-top: 10px; +} + +.variant-list li { + width: 22px; + height: 22px; +} + +.variant-list li:first-child { + background-color: black; +} + +.variant-list li:nth-child(2) { + background-color: blue; +} + +.variant-list li:nth-child(3) { + background-color: red; +} +.variant-list li:nth-child(4) { + background-color: yellow; +} +.variant-list li:nth-child(5) { + background-color: green; +} +.variant-list li:nth-child(6) { + background-color: brown; +} + +.product-details-header { + text-transform: uppercase; +} + +.product-details-list { + list-style: square; +} + +.add-cart { + background-color: black; + color: white; + font-size: 20px; + cursor: pointer; + width: 100%; + padding: 15px; + text-transform: uppercase; + border-top: 4px solid black; +} + +.add-cart:hover { + background-color: #f7f7f7; + color: black; +} +.product { + display: grid; + grid-template-columns: 250px 1fr auto; + justify-items: center; + column-gap: 40px; +} + +.product-title-container { + grid-column: 1 / -1; + justify-self: stretch; +} +.add-cart { + grid-column: 1/ -1; +} diff --git a/starter/04-CSS-Layouts/challange/index.html b/starter/04-CSS-Layouts/challange/index.html new file mode 100644 index 000000000..ecd7c530d --- /dev/null +++ b/starter/04-CSS-Layouts/challange/index.html @@ -0,0 +1,60 @@ + + + + + + + Challenge + + +
+
+
+

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 → +
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
+
+ +
+

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
+
+ + +
+
+ + diff --git a/starter/04-CSS-Layouts/challange/style.css b/starter/04-CSS-Layouts/challange/style.css new file mode 100644 index 000000000..419829e7a --- /dev/null +++ b/starter/04-CSS-Layouts/challange/style.css @@ -0,0 +1,174 @@ +* { + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +ul { + padding: 0 20px; +} + +li { + margin: 10px 0; +} + +p { + margin: 20px 0; +} + +h3 { + margin: 20px 0; +} + +.container { + width: 800px; + margin: 0 auto; + padding-top: 20px; +} + +.product { + border: 4px black solid; + width: 100%; +} + +.product-title-container { + position: relative; +} + +.product-title-container::after { + content: "sale"; + text-transform: uppercase; + background-color: red; + color: white; + padding: 5px 15px; + position: absolute; + top: -15px; + left: -15px; + letter-spacing: 2px; +} + +.product-title { + font-size: 22px; + text-transform: uppercase; + text-align: center; + background-color: #f7f7f7; + padding: 15px; +} + +.product-price { + font-size: 24px; + margin-bottom: 0px; +} + +.product-shipping { + text-transform: uppercase; + color: #777777; + font-size: 12px; + font-weight: bold; + margin-top: 0px; +} + +.more-info { + color: black; + font-size: 16px; + background-color: #f7f7f7; +} + +.more-info:hover { + text-decoration: none; +} + +.variant-list { + list-style: none; +} + +.variant-list li { + display: inline-block; + width: 20px; + height: 20px; + margin: 30px 5px; +} + +.variant-list li:first-child { + background-color: black; + margin-left: 2px; +} + +.variant-list li:nth-child(2) { + background-color: blue; +} + +.variant-list li:nth-child(3) { + background-color: red; +} +.variant-list li:nth-child(4) { + background-color: yellow; +} +.variant-list li:nth-child(5) { + background-color: green; +} +.variant-list li:nth-child(6) { + background-color: brown; +} + +.product-details-header { + text-transform: uppercase; +} + +.product-details-list { + list-style: square; +} + +.add-cart { + background-color: black; + color: white; + font-size: 20px; + cursor: pointer; + width: 100%; + padding: 15px; + text-transform: uppercase; + border-top: 4px solid black; +} + +.add-cart:hover { + background-color: #f7f7f7; + color: black; +} + +.product-image { + width: 30%; + float: left; +} + +.product-price { + float: left; +} +.product-shipping { + float: right; + margin: 0; + padding: 20px 0; +} + +.product-basic-container { + float: left; + width: 35%; + padding: 0 10px; +} + +.product-details-container { + float: left; + width: 35%; + padding: 0 10px; +} + +.clear { + clear: both; + content: ""; + display: block; +} diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..e8de1ad14 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -38,21 +38,60 @@ background-color: #ddd; font-size: 40px; margin: 40px; + width: 800; + height: 600px; /* CSS GRID */ + display: grid; + /* auto takes only the space it needs for the content */ + /* grid-template-rows: 300px 200px; */ + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr 1fr; + column-gap: 0.5em; + row-gap: 0.5em; + display: none; } + /* .el--8 { + grid-row: 1 / 2; + grid-column: 2 / span 2; + } + .el--2 { + grid-column: 3 / -1; + } */ + .container--2 { /* STARTER */ font-family: sans-serif; background-color: black; font-size: 40px; - margin: 100px; + margin: 40px; width: 1000px; height: 600px; /* CSS GRID */ + display: grid; + grid-template-columns: 125px 250px 125px; + grid-template-rows: 250px 100px; + + /* aligning tracks inside container: spaces in the container */ + justify-content: center; + align-content: center; + gap: 50px; + + /* aligning items inside the cell */ + justify-items: center; + align-items: center; + } + /* + align-*: vertical alignment + justify-*: horizontal alignment + */ + + .el--3 { + align-self: end; + justify-self: start; } diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..0ed183404 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -6,6 +6,11 @@ Flexbox diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..e1ea58745 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -17,34 +17,37 @@
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 -

+
+ Headshot of Laura Jones +

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

+
HTML code on a screen

Why should you learn HTML?

Related posts

-

Copyright © 2027 by The Code Magazine.

+
diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..00a49c901 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -2,6 +2,7 @@ /* border-top: 10px solid #1098ad; */ margin: 0; padding: 0; + box-sizing: border-box; } /* PAGE SECTIONS */ @@ -14,7 +15,7 @@ body { } .container { - width: 800px; + width: 1200px; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; @@ -26,7 +27,7 @@ body { padding-left: 40px; padding-right: 40px; */ padding: 20px 40px; - margin-bottom: 60px; + /* margin-bottom: 60px; */ /* height: 80px; */ } @@ -36,7 +37,7 @@ nav { } article { - margin-bottom: 60px; + /* margin-bottom: 60px; */ } .post-header { @@ -50,8 +51,7 @@ aside { border-bottom: 5px solid #1098ad; /* padding-top: 50px; padding-bottom: 50px; */ - padding: 50px 0; - width: 500px; + padding: 50px 40px; } /* SMALLER ELEMENTS */ @@ -82,6 +82,7 @@ h4 { font-size: 20px; text-transform: uppercase; text-align: center; + margin-bottom: 40px; } p { @@ -134,6 +135,7 @@ li:last-child { .related { list-style: none; + margin-left: 0; } body { @@ -197,7 +199,7 @@ nav a:link { display: block; */ margin-right: 30px; - margin-top: 10px; + /* margin-top: 10px; */ display: inline-block; } @@ -265,3 +267,113 @@ footer p { nav p { font-size: 18px; } */ + +/* FLOATS */ +/* .author { + padding: 10px; +} + +.author-img { + float: left; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +.main-header::after { + content: ""; + display: block; + clear: both; +} + +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} + +.related img { + display: block; +} */ + +/* flex */ +.flex-box { + display: flex; +} + +.main-header { + align-items: center; + justify-content: space-between; +} + +.author-box { + align-items: center; + margin-bottom: 15px; +} + +.author { + margin-bottom: 0; + margin-left: 15px; +} + +.related-post { + align-items: center; + gap: 20px; +} + +.related-author { + margin-bottom: 0; +} + +.grid-box { + display: grid; +} + +/* .row { + gap: 75px; + align-items: flex-start; +} + +article { + flex: 1; + margin-bottom: 0; +} + +aside { + flex: 0 0 300px; +} */ + +.container { + grid-template-columns: 1fr 300px; + column-gap: 75px; + row-gap: 60px; + align-items: start; +} + +.main-header { + grid-column: 1 / -1; +} +article { + /* background-color: green; */ +} + +aside { + /* background-color: blue; */ + /* align-self: start; */ +} +footer { + grid-column: 1 / -1; +}