From aea0fac3cf5f4778727bd46901ebe1e783ad853a Mon Sep 17 00:00:00 2001 From: dathasai Date: Sat, 2 Jul 2022 20:38:38 +0530 Subject: [PATCH 01/53] Topics related on CSS and CSS colors --- starter/02-HTML-Fundamentals/blog.html | 13 ++ .../{ => 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 | 146 ++++++++++++++++++ starter/03-CSS-Fundamentals/index.html | 20 ++- starter/03-CSS-Fundamentals/style.css | 102 ++++++++++++ 10 files changed, 274 insertions(+), 7 deletions(-) create mode 100644 starter/02-HTML-Fundamentals/blog.html 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%) create mode 100644 starter/02-HTML-Fundamentals/index.html create mode 100644 starter/03-CSS-Fundamentals/style.css 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/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..df8a623a8 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,146 @@ + + + + + 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 +
+ +

+ 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/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..c466d092c 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -3,6 +3,8 @@ The Basic Language of the Web: HTML + + @@ -15,7 +17,7 @@
The Basic Language of the Web: HTML
The Basic Language of the Web: HTML
--> -
+

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

+ + + +

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 ecc7a5091..aec0c9d60 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -1,13 +1,53 @@ -h1, -h2, -h3, -h4, -p, -li { +* { + /* border-top: 10px solid red; */ + margin: 0; + padding: 0; +} + +/* */ + +body { font-family: sans-serif; color: #444; + border-top: 15px solid rgb(99, 126, 184); +} + +.container { + width: 800px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} + +article { + margin-bottom: 60px; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid rgb(99, 126, 184); + border-bottom: 5px solid rgb(99, 126, 184); + padding: 50px 0; + width: 500px; +} + +nav { + font-size: 22px; } +/* smaller sections */ + h1, h2, h3 { @@ -23,10 +63,13 @@ h1 { h2 { font-size: 40px; + margin-bottom: 30px; } h3 { font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; } h4 { @@ -36,15 +79,28 @@ h4 { p { font-size: 22px; + margin-bottom: 15px; } li { font-size: 20px; + margin: 10px; + /* display: inline; */ } -/* footer p { - font-size: 16px; -} */ +li:last-child { + margin: 0; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li:last-child { + margin-left: 10px; +} #author { font-style: italic; @@ -63,26 +119,17 @@ li { list-style: none; } -.main-header { - background-color: #dfdfdf; -} - -aside { - background-color: #dfdfdf; - border-top: 5px solid rgb(99, 126, 184); - border-bottom: 5px solid rgb(99, 126, 184); -} - li:first-child { font-weight: bold; } -li:nth-child(odd) { - /* color: red; */ -} +/* li:nth-child(odd) { + color: red; +} */ a:link { color: rgb(87, 87, 189); + text-decoration: none; } a:visited { @@ -100,3 +147,22 @@ a:active { background-color: black; font-style: italic; } + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + /* margin: 20px; + background-color: aqua; + padding: 20px; + display: block; */ + + display: inline-block; + margin-right: 30px; +} + +nav a:link:last-child { + margin-right: 0; +} From 0ea33908393fc683cae2501955d959ead676bd6a Mon Sep 17 00:00:00 2001 From: dathasai Date: Sun, 3 Jul 2022 16:44:50 +0530 Subject: [PATCH 03/53] Positioning (absolute and relative) --- starter/03-CSS-Fundamentals/index.html | 1 + starter/03-CSS-Fundamentals/style.css | 12 ++++++++++++ 2 files changed, 13 insertions(+) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index ac8450107..5994b0c98 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -156,5 +156,6 @@

Related posts

+ diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index aec0c9d60..0ffca7885 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -10,6 +10,7 @@ body { font-family: sans-serif; color: #444; border-top: 15px solid rgb(99, 126, 184); + position: relative; } .container { @@ -166,3 +167,14 @@ nav a:link { nav a:link:last-child { margin-right: 0; } + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + + position: absolute; + + bottom: 50px; + right: 50px; +} From 14557fde1f903fff5b845593d3e9d985ea878de1 Mon Sep 17 00:00:00 2001 From: dathasai Date: Mon, 4 Jul 2022 08:35:12 +0530 Subject: [PATCH 04/53] Pseudo elements --- starter/03-CSS-Fundamentals/style.css | 31 +++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 0ffca7885..94a78a2d4 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -178,3 +178,34 @@ button { bottom: 50px; right: 50px; } + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +/* p::first-line { + color: red; +} */ + +h3 + p::first-line { + color: red; +} + +h2 { + font-size: 35px; + position: relative; +} + +h2::after { + content: "TOP"; + background-color: #ffe70e; + color: #000; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} From 91299a51ca13a58cab4f458dc348701b4f80373b Mon Sep 17 00:00:00 2001 From: dathasai Date: Mon, 4 Jul 2022 10:15:27 +0530 Subject: [PATCH 05/53] Section 3 initial commit --- starter/03-CSS-Fundamentals/style.css | 5 +- starter/04-CSS-Layouts/style.css | 159 +++++++++----------------- 2 files changed, 55 insertions(+), 109 deletions(-) diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 94a78a2d4..a4d707640 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -14,7 +14,7 @@ body { } .container { - width: 800px; + width: 80%; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; @@ -45,6 +45,7 @@ aside { nav { font-size: 22px; + text-align: center; } /* smaller sections */ @@ -189,7 +190,7 @@ h1::first-letter { } */ h3 + p::first-line { - color: red; + /* color: red; */ } h2 { diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..a4d707640 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -1,70 +1,66 @@ * { - /* border-top: 10px solid #1098ad; */ + /* border-top: 10px solid red; */ margin: 0; padding: 0; } -/* PAGE SECTIONS */ +/* */ + body { - color: #444; font-family: sans-serif; - - border-top: 10px solid #1098ad; + color: #444; + border-top: 15px solid rgb(99, 126, 184); position: relative; } .container { - width: 800px; + width: 80%; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; } +article { + margin-bottom: 60px; +} + .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; - /* position: relative; */ } aside { background-color: #f7f7f7; - border-top: 5px solid #1098ad; - border-bottom: 5px solid #1098ad; - /* padding-top: 50px; - padding-bottom: 50px; */ + border-top: 5px solid rgb(99, 126, 184); + border-bottom: 5px solid rgb(99, 126, 184); padding: 50px 0; width: 500px; } -/* SMALLER ELEMENTS */ +nav { + font-size: 22px; + text-align: center; +} + +/* smaller sections */ + h1, h2, h3 { - color: #1098ad; + color: rgb(42, 99, 148); } h1 { font-size: 26px; - text-transform: uppercase; + text-transform: capitalize; font-style: italic; + color: rgba(95, 192, 50, 0.705); } h2 { @@ -79,48 +75,41 @@ h3 { } h4 { - font-size: 20px; - text-transform: uppercase; text-align: center; + font-size: 20px; } 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; + margin: 10px; /* display: inline; */ } li:last-child { - margin-bottom: 0; + margin: 0; } -/* footer p { - font-size: 16px; -} */ +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} -/* article header p { - font-style: italic; -} */ +li:last-child { + margin-left: 10px; +} #author { font-style: italic; - font-size: 18px; } #copyright { - font-size: 16px; + font-size: 15px; } .related-author { @@ -128,61 +117,38 @@ li:last-child { font-weight: bold; } -/* ul { - list-style: none; -} */ - .related { list-style: none; } -body { - /* background-color: orangered; */ -} - -/* .first-li { - font-weight: bold; -} */ - li:first-child { font-weight: bold; } -li:last-child { - font-style: italic; -} - -li:nth-child(even) { - /* color: red; */ -} - -/* Misconception: this won't work! */ -article p:first-child { +/* li:nth-child(odd) { color: red; -} +} */ -/* Styling links */ a:link { - color: #1098ad; + color: rgb(87, 87, 189); text-decoration: none; } a:visited { - /* color: #777; */ - color: #1098ad; + /* color: #444; */ + color: rgb(87, 87, 189); } a:hover { - color: orangered; font-weight: bold; - text-decoration: underline orangered; + color: orangered; + text-decoration: solid underline black; } a:active { background-color: black; font-style: italic; } -/* LVHA */ .post-img { width: 100%; @@ -190,15 +156,13 @@ a:active { } nav a:link { - /* background-color: orangered; - margin: 20px; + /* margin: 20px; + background-color: aqua; padding: 20px; - display: block; */ - margin-right: 30px; - margin-top: 10px; display: inline-block; + margin-right: 30px; } nav a:link:last-child { @@ -211,8 +175,7 @@ button { cursor: pointer; position: absolute; - /* top: 50px; - left: 50px; */ + bottom: 50px; right: 50px; } @@ -222,19 +185,23 @@ h1::first-letter { margin-right: 5px; } +/* p::first-line { + color: red; +} */ + h3 + p::first-line { /* color: red; */ } h2 { - /* background-color: orange; */ + font-size: 35px; position: relative; } -h2::before { +h2::after { content: "TOP"; background-color: #ffe70e; - color: #444; + color: #000; font-size: 16px; font-weight: bold; display: inline-block; @@ -243,25 +210,3 @@ h2::before { top: -10px; right: -25px; } - -/* Resolving conflicts */ -/* #copyright { - color: red; -} - -.copyright { - color: blue; -} - -.text { - color: yellow; -} - -footer p { - color: green !important; -} */ - -/* nav a:link, -nav p { - font-size: 18px; -} */ From 168ff35a0d4f56bb22d1ab34a01f2f46e249d124 Mon Sep 17 00:00:00 2001 From: dathasai Date: Mon, 4 Jul 2022 10:44:53 +0530 Subject: [PATCH 06/53] Floats Layout --- starter/04-CSS-Layouts/index.html | 3 ++- starter/04-CSS-Layouts/style.css | 20 ++++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..64d75e106 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -39,9 +39,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 a4d707640..9dbf5d305 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -26,6 +26,7 @@ article { .main-header { background-color: #f7f7f7; + background-color: red; padding: 20px 40px; margin-bottom: 60px; /* height: 80px; */ @@ -210,3 +211,22 @@ h2::after { top: -10px; right: -25px; } + +.author-img { + float: left; + margin-bottom: 10px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +h1 { + float: left; +} + +nav { + float: right; +} From 216668d403131e971e21de0173af1e20c0fe0262 Mon Sep 17 00:00:00 2001 From: dathasai Date: Mon, 4 Jul 2022 10:46:59 +0530 Subject: [PATCH 07/53] Clearing Floats --- starter/04-CSS-Layouts/index.html | 3 ++- starter/04-CSS-Layouts/style.css | 12 ++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 64d75e106..c98c9dfe5 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,7 +18,7 @@
The Basic Language of the Web: HTML
-->
-
+

📘 The Code Magazine

+
diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index 9dbf5d305..52b5c185b 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -230,3 +230,15 @@ h1 { nav { float: right; } + +/* method 1*/ +.clear { + clear: both; +} + +/* method 2*/ +.clear-fix::after { + content: ""; + display: inline-block; + clear: both; +} From 532e1494988030354bc9fda970a1b702d7cdfdcb Mon Sep 17 00:00:00 2001 From: dathasai Date: Mon, 4 Jul 2022 11:20:37 +0530 Subject: [PATCH 08/53] box-sizing - border-box --- starter/04-CSS-Layouts/style.css | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index 52b5c185b..9d285e563 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -2,6 +2,7 @@ /* border-top: 10px solid red; */ margin: 0; padding: 0; + box-sizing: border-box; } /* */ @@ -14,7 +15,7 @@ body { } .container { - width: 80%; + width: 1200px; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; @@ -26,7 +27,6 @@ article { .main-header { background-color: #f7f7f7; - background-color: red; padding: 20px 40px; margin-bottom: 60px; /* height: 80px; */ @@ -41,7 +41,6 @@ aside { border-top: 5px solid rgb(99, 126, 184); border-bottom: 5px solid rgb(99, 126, 184); padding: 50px 0; - width: 500px; } nav { @@ -76,8 +75,10 @@ h3 { } h4 { - text-align: center; font-size: 20px; + text-transform: uppercase; + text-align: center; + margin-bottom: 30px; } p { @@ -120,6 +121,7 @@ li:last-child { .related { list-style: none; + margin-left: 0; } li:first-child { @@ -242,3 +244,18 @@ nav { display: inline-block; clear: both; } + +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; + padding: 40px; +} + +footer { + clear: both; +} From 8a43f15dbe710f803d6170055a7463b876feb4b6 Mon Sep 17 00:00:00 2001 From: dathasai Date: Mon, 4 Jul 2022 13:19:13 +0530 Subject: [PATCH 09/53] FlexBox introduction --- starter/04-CSS-Layouts/flexbox.html | 48 +++++++++++++++++++++++++++-- starter/04-CSS-Layouts/index.html | 4 +-- 2 files changed, 47 insertions(+), 5 deletions(-) diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..ece704030 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -37,9 +37,51 @@ font-family: sans-serif; background-color: #ddd; font-size: 40px; - margin: 40px; + margin: 34px; /* FLEXBOX */ + + display: flex; + align-items: center; + justify-content: flex-start; + gap: 10px; + } + + .el { + /* DEFAULTS + + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; */ + + /* flex-basis: 200px; */ + + /* flex: 0 0 200px; */ + + flex: 1; + } + + .el--1 { + /* flex-grow: 2; */ + align-self: flex-start; + } + + .el--2 { + /* flex-grow: 2; */ + /* order: 1; */ + } + + .el--3 { + /* flex-grow: 2; */ + } + + .el--4 { + /* flex-grow: 2; */ + } + + .el--5 { + /* flex-grow: 2; */ + align-self: stretch; } @@ -50,9 +92,9 @@
CSS
are
amazing
-
languages
+
to
-
learn
+
diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index c98c9dfe5..de84b545c 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -25,8 +25,8 @@

📘 The Code Magazine

Blog Challenges - Flexbox - CSS Grid + Flexbox + CSS Grid
From 8120332c99778fd334ab73d67792eeff85d36693 Mon Sep 17 00:00:00 2001 From: dathasai Date: Mon, 4 Jul 2022 14:17:57 +0530 Subject: [PATCH 10/53] FLEXBOX part1 --- starter/04-CSS-Layouts/style.css | 52 ++++++++++++++++++++++++++++++-- 1 file changed, 50 insertions(+), 2 deletions(-) diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index 9d285e563..6674b9382 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -214,6 +214,7 @@ h2::after { right: -25px; } +/* .author-img { float: left; margin-bottom: 10px; @@ -233,12 +234,15 @@ nav { float: right; } -/* method 1*/ + +method 1 + .clear { clear: both; } -/* method 2*/ +method 2 + .clear-fix::after { content: ""; display: inline-block; @@ -250,12 +254,56 @@ article { float: left; } + aside { width: 300px; float: right; padding: 40px; } + footer { clear: both; } +*/ + +/* FLEXBOX */ + +.main-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.author-box { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.author { + margin-bottom: 0; + margin-left: 15px; +} + +.related-post { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 30px; +} + +.related-link:link { + font-size: 17px; + font-weight: bold; + font-style: normal; + margin-bottom: 5px; + display: block; +} + +.related-author { + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + font-style: italic; +} From dc4f006de24724459b3f4c8c95d72619b768804a Mon Sep 17 00:00:00 2001 From: dathasai Date: Mon, 4 Jul 2022 14:18:24 +0530 Subject: [PATCH 11/53] init --- starter/04-CSS-Layouts/index.html | 46 ++++++++++++++++++------------- 1 file changed, 27 insertions(+), 19 deletions(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index de84b545c..fc47912ae 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -35,17 +35,19 @@

📘 The Code Magazine

The Basic Language of the Web: HTML

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

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

+

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

+
Why should you learn HTML?

Related posts

From 0a578771b7e71f05d73d993cc8cc22af10314ace Mon Sep 17 00:00:00 2001 From: dathasai Date: Mon, 4 Jul 2022 15:39:03 +0530 Subject: [PATCH 12/53] FLEXBOX part2 --- starter/04-CSS-Layouts/index.html | 267 +++++++++++++++--------------- starter/04-CSS-Layouts/style.css | 16 ++ 2 files changed, 151 insertions(+), 132 deletions(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index fc47912ae..b9e8d883f 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -30,141 +30,144 @@

📘 The Code Magazine

- -
-
-

The Basic Language of the Web: HTML

- -
- Headshot of Laura Jones - -

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

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

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

- -

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

- -

What is HTML?

-

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

-

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

-

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

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

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

- -

Why should you learn HTML?

- -

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

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

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

-
- - + + + +

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

+ +

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

+ +

What is HTML?

+

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

+

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

+

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

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

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

+ +

Why should you learn HTML?

+ +

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

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

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

+ + + +