Date: Thu, 9 Jun 2022 23:57:11 -0400 Subject: [PATCH 01/10] first commit --- starter/01-Test/index.html | 13 +++ starter/02-HTML-Fundamentals/blog.html | 13 +++ starter/02-HTML-Fundamentals/index.html | 106 ++++++++++++++++++++++++ 3 files changed, 132 insertions(+) create mode 100644 starter/01-Test/index.html create mode 100644 starter/02-HTML-Fundamentals/blog.html create mode 100644 starter/02-HTML-Fundamentals/index.html diff --git a/starter/01-Test/index.html b/starter/01-Test/index.html new file mode 100644 index 000000000..7272bf363 --- /dev/null +++ b/starter/01-Test/index.html @@ -0,0 +1,13 @@ + + + + + + + My first Webpage + + +

Hello, World!

+ My name is Jeniffer, and this is my first Webpage + + diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..4da11ead7 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,13 @@ + + + + + + + BLOG + + +

BLOG

+ Back to home + + diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..1d221a804 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,106 @@ + + + + The Basic Language of the web + + + + +

📘 The Code Magazine

+ + +

+ +

The Basic Language of the Web: HTML

+ +

Posted by Laura Jones on Monday, June 21st 2027

+ +

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

+ +

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:

+ +

The opening tag
The closing tag
The closing tag The actual element

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

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!

+ + + From 358a2383336e14586da6d77bae13fcda97cd1bed Mon Sep 17 00:00:00 2001 From: JenifferGenoves Date: Fri, 10 Jun 2022 00:44:17 -0400 Subject: [PATCH 02/10] End part 2 --- .../{ => img}/challenges.jpg | Bin .../{ => img}/laura-jones.jpg | Bin .../{ => img}/post-img.jpg | Bin .../{ => img}/related-1.jpg | Bin .../{ => img}/related-2.jpg | Bin .../{ => img}/related-3.jpg | Bin starter/02-HTML-Fundamentals/index.html | 44 +++++++++++++++++- 7 files changed, 42 insertions(+), 2 deletions(-) rename starter/02-HTML-Fundamentals/{ => img}/challenges.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/laura-jones.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/post-img.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/related-1.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/related-2.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/related-3.jpg (100%) 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 index 1d221a804..e04843051 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -29,7 +29,7 @@

📘 The Code Magazine

The Basic Language of the Web: HTML

Posted by Laura Jones on Monday, June 21st 2027

Why should you learn HTML?

To build web applications

To impress friends To have fun 😃

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

+ + + From d84a60ac1333f1d038119943d046284d1334fe40 Mon Sep 17 00:00:00 2001 From: JenifferGenoves Date: Fri, 10 Jun 2022 13:11:04 -0400 Subject: [PATCH 03/10] Challenge #2 --- .../02-HTML-Fundamentals/Challenge #2/index.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 starter/02-HTML-Fundamentals/Challenge #2/index.html diff --git a/starter/02-HTML-Fundamentals/Challenge #2/index.html b/starter/02-HTML-Fundamentals/Challenge #2/index.html new file mode 100644 index 000000000..b923c11d6 --- /dev/null +++ b/starter/02-HTML-Fundamentals/Challenge #2/index.html @@ -0,0 +1,14 @@ + + + + + + + Shoes Store + + +

Converse Chuck Taylor All Star Low Top

+ + From 3ad8afc46034e9399e2fb855542f97ac289a0ba6 Mon Sep 17 00:00:00 2001 From: JenifferGenoves Date: Fri, 10 Jun 2022 14:15:06 -0400 Subject: [PATCH 04/10] End section 2 --- .../Challenge #2/index.html | 14 -------- starter/02-HTML-Fundamentals/challenge.html | 34 +++++++++++++++++++ 2 files changed, 34 insertions(+), 14 deletions(-) delete mode 100644 starter/02-HTML-Fundamentals/Challenge #2/index.html create mode 100644 starter/02-HTML-Fundamentals/challenge.html diff --git a/starter/02-HTML-Fundamentals/Challenge #2/index.html b/starter/02-HTML-Fundamentals/Challenge #2/index.html deleted file mode 100644 index b923c11d6..000000000 --- a/starter/02-HTML-Fundamentals/Challenge #2/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - Shoes Store - - -

Converse Chuck Taylor All Star Low Top

- - diff --git a/starter/02-HTML-Fundamentals/challenge.html b/starter/02-HTML-Fundamentals/challenge.html new file mode 100644 index 000000000..ab95e5de5 --- /dev/null +++ b/starter/02-HTML-Fundamentals/challenge.html @@ -0,0 +1,34 @@ + + + + + + + Shoes Store + + +

Converse Chuck Taylor All Star Low Top

$65.00

Free Shipping

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

+ More information → +

Product details

Lightweight, durable canvas sneaker
Lightly padded footbed for added comfort
Iconic Chuck Taylor snkle patch

+ +

+ + From ac4e3dbe3927e876de2927f4854aa6ff75eb3888 Mon Sep 17 00:00:00 2001 From: JenifferGenoves Date: Fri, 10 Jun 2022 23:20:15 -0400 Subject: [PATCH 05/10] Section 3 --- starter/03-CSS-Fundamentals/index.html | 22 ++++-- starter/03-CSS-Fundamentals/style.css | 92 ++++++++++++++++++++++++++ 2 files changed, 108 insertions(+), 6 deletions(-) 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..4422aa02c 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -2,6 +2,7 @@ + The Basic Language of the Web: HTML @@ -24,6 +25,9 @@

📘 The Code Magazine

Flexbox CSS Grid + +

@@ -37,7 +41,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?

- + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..859599b53 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,92 @@ +h1, +h2, +h3, +h4, +p, +li { + font-family: sans-serif; +} + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; +} + +h3 { + font-size: 30px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + line-height: 1.5; +} + +li { + font-size: 20px; +} + +/* footer p { + font-size: 16px; +} */ + +/*article header p { + font-style: italic; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +/* ul { + list-style: none; +} */ + +.related { + list-style: none; +} + +/* +Resolving conflicts +#copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green; +} + */ From 8c5c3adbff66a2cf0e249c96d519e9cdff32f170 Mon Sep 17 00:00:00 2001 From: JenifferGenoves Date: Mon, 13 Jun 2022 23:12:59 -0400 Subject: [PATCH 06/10] Challenge #3 --- starter/03-CSS-Fundamentals/index.html | 8 ++- starter/03-CSS-Fundamentals/style.css | 90 ++++++++++++++++++++++++-- 2 files changed, 89 insertions(+), 9 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 4422aa02c..95efd8893 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 Code Magazine

@@ -80,7 +80,7 @@

What is HTML?

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

The opening tag
The opening tag
The closing tag
The actual element

@@ -102,7 +102,9 @@

Why should you learn HTML?

To be able to use the fundamental web dev language
+ To be able to use the fundamental web dev language +
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 859599b53..4d88e2a53 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -1,12 +1,36 @@ -h1, +/* * { + border-top: 5px solid #1098ad; +} + */ +body { + color: #444; + font-family: sans-serif; +} + +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; +} + +/* h1, h2, h3, h4, p, li { font-family: sans-serif; + color: #444; } - + */ h1, h2, h3 { @@ -72,9 +96,63 @@ li { list-style: none; } -/* -Resolving conflicts -#copyright { +/* header { + background-color: #f7f7f7; +} + */ + +/* body { + background-color: aquamarine; +} + +.first-li { + font-weight: bold; +} */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(2) { + /*odd- even + color: red; */ +} + +/* Misconception: This won't work */ + +article p:first-child { + color: red; +} + +/* Styling links order LVHA*/ + +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + /*color: #777; */ + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline /*dotted- wavy*/ orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +/* Resolving conflicts */ +/* #copyright { color: red; } @@ -87,6 +165,6 @@ Resolving conflicts } footer p { - color: green; + color: green !important; } */ From e8d8936fa363c4c08b18a5b4bb4458f4a2874d36 Mon Sep 17 00:00:00 2001 From: JenifferGenoves
Date: Thu, 30 Jun 2022 23:25:37 -0400 Subject: [PATCH 07/10] Model box --- starter/03-CSS-Fundamentals/index.html | 268 +++++++++++++------------ starter/03-CSS-Fundamentals/style.css | 56 +++++- 2 files changed, 188 insertions(+), 136 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 95efd8893..1bb300d27 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -16,143 +16,151 @@
The Basic Language of the Web: HTML

The Basic Language of the Web: HTML
--> -
-
📘 The Code Magazine
+
+
+
📘 The Code Magazine
+ +
+ Blog + Challenges + Flexbox + CSS Grid +
+ + +
-
- Blog - Challenges - Flexbox - CSS Grid -
+
+
+
The Basic Language of the Web: HTML
- -
+ -
-
-
The Basic Language of the Web: HTML
+
+ Posted by Laura Jones on Monday, June 21st 2027 +
- + +
-
- Posted by Laura Jones on Monday, June 21st 2027 +
+ 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. +
-
- 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. The closing tag
3. The actual element
- -
- 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!
-

- - - - +

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:

+ +

The opening tag
The closing tag
The actual element

+ +

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

+ + + + + + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 4d88e2a53..21f7aace9 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -1,24 +1,49 @@ -/* * { - border-top: 5px solid #1098ad; +* { + /*border-top: 5px solid #1098ad; */ + margin: 0; + padding: 0; } - */ + +/* PAGE SECTIONS */ body { color: #444; font-family: sans-serif; + border-top: 10px solid #1098ad; + position: relative; } +.container { + width: 800px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} .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; +} + +.post-header { + margin-bottom: 40px; } 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; } /* h1, @@ -45,10 +70,13 @@ h1 { h2 { font-size: 40px; + margin-bottom: 30px; } h3 { font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; } h4 { @@ -60,10 +88,18 @@ h4 { p { font-size: 22px; line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; } li { font-size: 20px; + margin-bottom: 10px; } /* footer p { @@ -115,12 +151,14 @@ li:first-child { li:last-child { font-style: italic; + margin-bottom: 0px; } +/* li:nth-child(2) { - /*odd- even - color: red; */ -} + odd- even + color: red; +}*/ /* Misconception: This won't work */ @@ -168,3 +206,9 @@ footer p { color: green !important; } */ + +.post-img { + /* width: 800px; */ + width: 100%; + height: auto; +} From 3bb55e3478e4e1abc693b6d14bc802dabbf5ea00 Mon Sep 17 00:00:00 2001 From: JenifferGenoves Date: Wed, 6 Jul 2022 17:18:26 -0400 Subject: [PATCH 08/10] End section #3 --- starter/03-CSS-Fundamentals/index.html | 4 ++ starter/03-CSS-Fundamentals/style.css | 59 +++++++++++++++++++++++++- 2 files changed, 62 insertions(+), 1 deletion(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 1bb300d27..9641a806c 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -2,6 +2,7 @@ + The Basic Language of the Web: HTML @@ -162,5 +163,8 @@

+ + + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 21f7aace9..6ffb41df3 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -25,11 +25,12 @@ body { padding-right: 40px; */ padding: 20px 40px; margin-bottom: 60px; - height: 80px; + /* height: 80px; */ } nav { font-size: 18px; + text-align: center; } .post-header { @@ -100,6 +101,8 @@ ol { li { font-size: 20px; margin-bottom: 10px; + /* block elements to inline elements + display: inline; */ } /* footer p { @@ -212,3 +215,57 @@ footer p { width: 100%; height: auto; } + +/* Video 39 - line elements to block elements*/ + +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 { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + /* top: 50px; + left: 50px; */ + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { + /* color: red; */ +} + +h2 { + /* background-color: orange; */ + position: relative; +} + +h2::after { + content: "TOP"; + background-color: #ffe70e; + color: black; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} From 4edbc216cce57cb7641f6f5159ef99ee018d4253 Mon Sep 17 00:00:00 2001 From: JenifferGenoves Date: Wed, 6 Jul 2022 23:01:05 -0400 Subject: [PATCH 09/10] Section #4 - Float --- starter/04-CSS-Layouts/index.html | 10 ++++- starter/04-CSS-Layouts/style.css | 64 +++++++++++++++++++++++++++---- 2 files changed, 64 insertions(+), 10 deletions(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..91d1ac6a1 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,7 +18,8 @@

The Basic Language of the Web: HTML

-->

+ +

📘 The Code Magazine

+ + + +

@@ -39,9 +44,10 @@

The Basic Language of the Web: HTML

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

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..be866474e 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; @@ -48,10 +49,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 */ @@ -82,6 +80,7 @@ h4 { font-size: 20px; text-transform: uppercase; text-align: center; + margin-bottom: 30px; } p { @@ -134,11 +133,12 @@ li:last-child { .related { list-style: none; + margin-left: 0; } -body { - /* background-color: orangered; */ -} +/* body { + background-color: orangered; +} */ /* .first-li { font-weight: bold; @@ -265,3 +265,51 @@ footer p { nav p { font-size: 18px; } */ + +/* FLOATS */ + +.author-img { + float: left; + margin-bottom: 20px; +} + +.author { + /* padding-left: 80px; */ + float: left; + margin-top: 10px; + margin-left: 20px; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +.clear { + clear: both; +} + +/* Clearfix method - psedo elements after and before are inline elements*/ + +.clearfix::after { + content: ""; + display: block; + clear: both; +} + +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} From 67ccdc94defd6102a5ceaaaa1b1f2ede6c3d2e3d Mon Sep 17 00:00:00 2001 From: JenifferGenoves Date: Sun, 7 Jan 2024 01:58:13 -0300 Subject: [PATCH 10/10] end --- starter/04-CSS-Layouts/index.js | 149 +++++++++++++++++++++++++++++++ starter/04-CSS-Layouts/style.css | 12 +-- 2 files changed, 155 insertions(+), 6 deletions(-) create mode 100644 starter/04-CSS-Layouts/index.js diff --git a/starter/04-CSS-Layouts/index.js b/starter/04-CSS-Layouts/index.js new file mode 100644 index 000000000..cad071c55 --- /dev/null +++ b/starter/04-CSS-Layouts/index.js @@ -0,0 +1,149 @@ +// Sección de declaraciones, NO EDITAR + +// Responsables de los cuarteles +const paddockManagers = [ + { id: 1, taxNumber: '132254524', name: 'JUAN TAPIA BURGOS'}, + { id: 2, taxNumber: '143618668', name: 'EFRAIN SOTO VERA'}, + { id: 3, taxNumber: '78903228', name: 'CARLOS PEREZ GONZALEZ'}, + { id: 4, taxNumber: '176812737', name: 'ANDRES VIÑALES CIENFUEGOS'}, + { id: 5, taxNumber: '216352696', name: 'OSCAR PEREZ ZUÑIGA'}, + { id: 6, taxNumber: '78684747', name: 'JOAQUIN ANDRADE SANDOVAL' } +]; + +// Tipo de cuartel, en el cual se utiliza el tipo de producto plantado +const paddockType = [ + { id: 1, name: 'PALTOS' }, + { id: 2, name: 'AVELLANOS' }, + { id: 3, name: 'CEREZAS' }, + { id: 4, name: 'NOGALES' }, +] + +// Un paddock representa un cuartel de un campo (Entiéndase también como potrero o parcela), el área está representada en m2, harvestYear es el año en el que se sembró el cuartel +const paddocks = [ + { paddockManagerId: 6, farmId: 1, paddockTypeId: 1, harvestYear: 2019, area: 1200 }, + { paddockManagerId: 1, farmId: 3, paddockTypeId: 4, harvestYear: 2019, area: 500 }, + { paddockManagerId: 5, farmId: 3, paddockTypeId: 2, harvestYear: 2020, area: 20000 }, + { paddockManagerId: 2, farmId: 2, paddockTypeId: 3, harvestYear: 2021, area: 8401}, + { paddockManagerId: 3, farmId: 1, paddockTypeId: 1, harvestYear: 2020, area: 2877 }, + { paddockManagerId: 5, farmId: 2, paddockTypeId: 2, harvestYear: 2017, area: 15902 }, + { paddockManagerId: 3, farmId: 3, paddockTypeId: 2, harvestYear: 2018, area: 1736 }, + { paddockManagerId: 2, farmId: 3, paddockTypeId: 3, harvestYear: 2020, area: 2965 }, + { paddockManagerId: 4, farmId: 3, paddockTypeId: 4, harvestYear: 2018, area: 1651 }, + { paddockManagerId: 5, farmId: 1, paddockTypeId: 1, harvestYear: 2018, area: 700 }, + { paddockManagerId: 1, farmId: 2, paddockTypeId: 1, harvestYear: 2019, area: 7956 }, + { paddockManagerId: 5, farmId: 3, paddockTypeId: 2, harvestYear: 2020, area: 3745 }, + { paddockManagerId: 6, farmId: 1, paddockTypeId: 3, harvestYear: 2021, area: 11362 }, + { paddockManagerId: 2, farmId: 3, paddockTypeId: 3, harvestYear: 2021, area: 300 }, + { paddockManagerId: 3, farmId: 2, paddockTypeId: 2, harvestYear: 2020, area: 19188 }, + { paddockManagerId: 3, farmId: 1, paddockTypeId: 1, harvestYear: 2019, area: 17137 }, + { paddockManagerId: 4, farmId: 3, paddockTypeId: 2, harvestYear: 2020, area: 100 }, + { paddockManagerId: 2, farmId: 1, paddockTypeId: 3, harvestYear: 2019, area: 11845 }, + { paddockManagerId: 5, farmId: 2, paddockTypeId: 1, harvestYear: 2018, area: 15969 }, + { paddockManagerId: 1, farmId: 3, paddockTypeId: 1, harvestYear: 2029, area: 10420 }, + { paddockManagerId: 5, farmId: 2, paddockTypeId: 3, harvestYear: 2010, area: 3200 }, + { paddockManagerId: 6, farmId: 1, paddockTypeId: 2, harvestYear: 2012, area: 10587 }, + { paddockManagerId: 2, farmId: 2, paddockTypeId: 2, harvestYear: 2018, area: 16750 } +]; + +const farms = [ + { id: 1, name: 'AGRICOLA SANTA ANA' }, + { id: 2, name: 'VINA SANTA PAULA' }, + { id: 3, name: 'FORESTAL Y AGRICOLA LO ENCINA' } +]; + +/* + SECCIÓN PROBLEMAS +*/ +// Tip: Una hectárea equivale a 10.000m2 + +// 0 Arreglo con los ids de los responsables de cada cuartel +function listPaddockManagerIds() { + return paddockManagers.map((paddockManager) => paddockManager.id); +}; + +// 1 Arreglo con los ruts de los responsables de los cuarteles, ordenados por nombre +/* function listPaddockManagersByName() { + paddockManagers.sort((a,b) =>parseInt(a.taxNumber) - parseInt(b.taxNumber)); + return paddockManagers.map((element) => element.taxNumber); +}; + */ + +// Supuesto: Orden alfabético ascendente +function listPaddockManagersByName() { +return paddockManagers.sort((a,b) => a.name.localeCompare(b.name)).map(e => e.taxNumber) +}; + + +// 2 Arreglo con los nombres de cada tipo de cultivo, ordenados decrecientemente por la suma TOTAL de la cantidad de hectáreas plantadas de cada uno de ellos. +function sortPaddockTypeByTotalArea() { +return paddockType.map(paddockTypes => { + let totalArea = 0; + paddocks.forEach(paddocksItem =>(paddocksItem.paddockTypeId == paddockTypes.id) ? totalArea = totalArea + paddocksItem.area : '') + return { name: paddockTypes.name, area:totalArea }; + }).sort((a,b) => b.area - a.area).map((paddockTypes) => paddockTypes.name) } + + +// 3 Arreglo con los nombres de los administradores, ordenados decrecientemente por la suma TOTAL de hectáreas que administran. +function sortFarmManagerByAdminArea() { + return paddockManagers.map(paddockManager => { + let totalArea = 0; + paddocks.forEach(paddocksItem =>(paddocksItem.paddockManagerId == paddockManager.id) ? totalArea = totalArea + paddocksItem.area : '') + return { name: paddockManager.name, area:totalArea }; + }).sort((a,b) => b.area - a.area).map((paddockManager) => paddockManager.name) } + + +// 4 Objeto en que las claves sean los nombres de los campos y los valores un arreglo con los ruts de sus administradores ordenados alfabéticamente por nombre. +function farmManagerNames() { + // CODE HERE +} + +// 5 Arreglo ordenado decrecientemente con los m2 totales de cada campo que tengan más de 2 hectáreas en Paltos +function biggestAvocadoFarms() { + // CODE HERE +} + +// 6 Arreglo con nombres de los administradores de la FORESTAL Y AGRÍCOLA LO ENCINA, ordenados por nombre, que trabajen más de 1000 m2 de Cerezas +function biggestCherriesManagers() { + // CODE HERE +} + +// 7 Objeto en el cual las claves sean el nombre del administrador y el valor un arreglo con los nombres de los campos que administra, ordenados alfabéticamente +function farmManagerPaddocks() { + // CODE HERE +} + +// 8 Objeto en que las claves sean el tipo de cultivo concatenado con su año de plantación (la concatenación tiene un separador de guión ‘-’, por ejemplo AVELLANOS-2020) y el valor otro objeto en el cual la clave sea el id del administrador y el valor el nombre del administrador +function paddocksManagers() { + // CODE HERE +} + +// 9 Agregar nuevo administrador con datos ficticios a "paddockManagers" y agregar un nuevo cuartel de tipo NOGALES con 900mts2, año 2017 de AGRICOLA SANTA ANA, administrado por este nuevo administrador +// Luego devolver el lugar que ocupa este nuevo administrador en el ranking de la pregunta 3. +// No modificar arreglos originales para no alterar las respuestas anteriores al correr la solución +function newManagerRanking() { + // CODE HERE +} + + +// No modificar, eliminar o alterar cualquier línea de código o comentario de acá para abajo +// Cualquier cambio hará que su prueba quede invalidada automáticamente +console.log('Pregunta 0'); +console.log(listPaddockManagerIds()); +console.log('Pregunta 1'); +console.log(listPaddockManagersByName()); +console.log('Pregunta 2'); +console.log(sortPaddockTypeByTotalArea()); +console.log('Pregunta 3'); +console.log(sortFarmManagerByAdminArea()); +console.log('Pregunta 4'); +console.log(farmManagerNames()); +console.log('Pregunta 5'); +console.log(biggestAvocadoFarms()); +console.log('Pregunta 6'); +console.log(biggestCherriesManagers()); +console.log('Pregunta 7'); +console.log(farmManagerPaddocks()); +console.log('Pregunta 8'); +console.log(paddocksManagers()); +console.log('Pregunta 9'); +console.log(newManagerRanking()); diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index be866474e..370dcffc3 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -152,9 +152,9 @@ li:last-child { font-style: italic; } -li:nth-child(even) { - /* color: red; */ -} +/* li:nth-child(even) { + color: red; +} */ /* Misconception: this won't work! */ article p:first-child { @@ -222,9 +222,9 @@ h1::first-letter { margin-right: 5px; } -h3 + p::first-line { - /* color: red; */ -} +/* h3 + p::first-line { + color: red; +} */ h2 { /* background-color: orange; */