From 0b830919f43c355c0eca5ccd962b8228f07064f3 Mon Sep 17 00:00:00 2001 From: rahilsama Date: Wed, 1 Feb 2023 16:09:48 -0700 Subject: [PATCH 01/23] different Text types in HTML --- starter/02-HTML-Fundamentals/index.html | 39 +++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 starter/02-HTML-Fundamentals/index.html diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..63cc6979c --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,39 @@ + + + + The Basic Language of the Web: HTML + + + +

The Code Magazine

+ + +

The Basic Language of the Web: HTML

+ + + + + +

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

+ + From d321883b3be19c80d52894f867c44ff204148f05 Mon Sep 17 00:00:00 2001 From: rahilsama Date: Wed, 1 Feb 2023 16:24:49 -0700 Subject: [PATCH 02/23] text types and lists --- starter/02-HTML-Fundamentals/index.html | 39 ++++++++++++++++++++++--- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 63cc6979c..3e64eb0e8 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -4,8 +4,11 @@ The Basic Language of the Web: HTML + + -

The Code Magazine

+

📘 The Code Magazine

+

Posted by Jones on Monday, June 21st 2027

The Basic Language of the Web: HTML

@@ -25,9 +28,10 @@

The Basic Language of the Web: 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 stands for Hyper Text + Markup Language. It's a markup language + that web developers use to structure and describe the content of a webpage + (not a programming language).

@@ -35,5 +39,32 @@

What is HTML?

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

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!

From 786ea6b93d2304ae20babeb75b02c8a45fed77ea Mon Sep 17 00:00:00 2001 From: rahilsama Date: Thu, 2 Feb 2023 09:15:37 -0700 Subject: [PATCH 03/23] added images to html page --- starter/02-HTML-Fundamentals/index.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 3e64eb0e8..a3da66480 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -1,6 +1,7 @@ - + + The Basic Language of the Web: HTML @@ -8,9 +9,24 @@

📘 The Code Magazine

+ Picture of the author: laura Jones

Posted by Jones on Monday, June 21st 2027

+ + + HTML code on the screen +

The Basic Language of the Web: HTML

From 6f71eff46d20fe9f64ae783db96cc6bb750601f4 Mon Sep 17 00:00:00 2001 From: rahilsama Date: Thu, 2 Feb 2023 13:06:37 -0700 Subject: [PATCH 04/23] hyperlinks and page structuring --- starter/02-HTML-Fundamentals/blog.html | 14 +++ starter/02-HTML-Fundamentals/index.html | 157 ++++++++++++++---------- 2 files changed, 106 insertions(+), 65 deletions(-) create mode 100644 starter/02-HTML-Fundamentals/blog.html diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..165b5dd01 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,14 @@ + + + + + + + Document + + +

Blog

+ + Home + + diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index a3da66480..7fbfa29f2 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -8,79 +8,106 @@ -

📘 The Code Magazine

- Picture of the author: laura Jones -

Posted by Jones on Monday, June 21st 2027

- - +
+

📘 The Code Magazine

- - HTML code on the screen + +
-

The Basic Language of the Web: HTML

- - - - +
+
+

The Basic Language of the Web: HTML

-

- 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 Hyper Text - Markup Language. It's a markup language - that web developers use to structure and describe the content of a webpage - (not a programming language). -

+ Picture of the author: laura Jones +

Posted by Jones on Monday, June 21st 2027

+ + -

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

+ + HTML code on the screen +
+ + + + -

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

+

+ 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 Hyper Text + Markup Language. It's a markup + language that web developers use to structure and describe the content + of a webpage (not a programming language). +

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

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

-

Why should you learn HTML?

-

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

+

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

-
    -
  • 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 😃
    • -
+
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
-

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

+

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

+
+ +
Copyright © 2027 by the Code Magazine
+ + From 70210d04d3bddbc0259a442d1ee365a21c996285 Mon Sep 17 00:00:00 2001 From: rahilsama Date: Thu, 2 Feb 2023 13:36:05 -0700 Subject: [PATCH 05/23] Codding Challenge #1 --- starter/02-HTML-Fundamentals/content.txt | 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 | 42 ++++++++++++++++-- 8 files changed, 39 insertions(+), 5 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/content.txt b/starter/02-HTML-Fundamentals/content.txt index ae01eb723..791d0756d 100644 --- a/starter/02-HTML-Fundamentals/content.txt +++ b/starter/02-HTML-Fundamentals/content.txt @@ -19,7 +19,7 @@ In HTML, each element is made up of 3 parts: The opening tag The closing tag The actual element -You can learn more at the MDN Web Docs. +hy JavaScript Why should you learn HTML? 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 7fbfa29f2..d1aebbc90 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -24,7 +24,7 @@

📘 The Code Magazine

The Basic Language of the Web: HTML

Picture of the author: laura Jones

The Basic Language of the Web: HTML

HTML code on the screen

Why should you learn HTML?

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

+ +
Copyright © 2027 by the Code Magazine
- - From e19a4604fcf88681f7bee67696e23712c583c006 Mon Sep 17 00:00:00 2001 From: rahilsama Date: Thu, 2 Feb 2023 14:22:47 -0700 Subject: [PATCH 06/23] Challenge #2 --- starter/02-HTML-Fundamentals/component.html | 30 +++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 starter/02-HTML-Fundamentals/component.html diff --git a/starter/02-HTML-Fundamentals/component.html b/starter/02-HTML-Fundamentals/component.html new file mode 100644 index 000000000..88978d75b --- /dev/null +++ b/starter/02-HTML-Fundamentals/component.html @@ -0,0 +1,30 @@ + + + + + + + Challenge #2 + +

Converse Chuck Taylor All Star Low Top

+ + Sneaker shoes +

$65.00

+

Free shipping

+

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

+ + More information → + +

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
+ + + + + + From 41ecb70c612ed036701290f1e263a077eeb0b59e Mon Sep 17 00:00:00 2001 From: rahilsama Date: Thu, 2 Feb 2023 15:38:00 -0700 Subject: [PATCH 07/23] started working on CSS fundamentals --- starter/03-CSS-Fundamentals/index.html | 1 + starter/03-CSS-Fundamentals/style.css | 34 ++++++++++++++++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 starter/03-CSS-Fundamentals/style.css diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..0bd3379e0 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 diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..cd0a873f9 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,34 @@ +h1 { + font-size: 27px; + font-family: sans-serif; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + font-family: sans-serif; +} + +h3 { + font-size: 30px; + font-family: sans-serif; +} + +h4 { + font-size: 20px; + font-family: sans-serif; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + font-family: sans-serif; + line-height: 1.5; +} + +li { + font-family: sans-serif; + font-size: 20px; +} From 8f62932d6fab86968dfed811a97affb1538ba667 Mon Sep 17 00:00:00 2001 From: Rahil Sama Date: Mon, 13 Feb 2023 11:35:36 -0700 Subject: [PATCH 08/23] new chnages --- starter/03-CSS-Fundamentals/style.css | 43 +++++++++++++++++++++++---- 1 file changed, 37 insertions(+), 6 deletions(-) diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index cd0a873f9..0d083368f 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -1,34 +1,65 @@ +h1, +h2, +h3, +h4, +p, +li { + font-family: sans-serif; + color: #444; +} + +h1, +h2, +h3 { + color: #1098ad; +} h1 { font-size: 27px; - font-family: sans-serif; text-transform: uppercase; font-style: italic; } h2 { font-size: 40px; - font-family: sans-serif; } h3 { font-size: 30px; - font-family: sans-serif; } h4 { font-size: 20px; - font-family: sans-serif; text-transform: uppercase; text-align: center; } p { font-size: 22px; - font-family: sans-serif; line-height: 1.5; } li { - font-family: sans-serif; font-size: 20px; } + +/* footer p { + font-size: 14px; +} */ + +#author { + font-style: italic; + font-size: 14px; +} + +#copyright { + font-size: 14px; +} + +.related-authors { + font-size: 14px; + font-weight: bold; +} + +.author-list { + list-style: none; +} From 1eac2a0c9c387be8a89a1539f4a84893ce6d5949 Mon Sep 17 00:00:00 2001 From: Rahil Sama Date: Mon, 13 Feb 2023 11:36:07 -0700 Subject: [PATCH 09/23] html edit --- starter/03-CSS-Fundamentals/index.html | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 0bd3379e0..5948e38c9 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -38,7 +38,9 @@

The Basic Language of the Web: HTML

width="50" /> -

Posted by Laura Jones on Monday, June 21st 2027

+

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

Why should you learn HTML?

-
Copyright © 2027 by The Code Magazine.
+
+ +
From 14b1f459252341b2e91b5db8e906a8cb9276c70b Mon Sep 17 00:00:00 2001 From: rahilsama Date: Mon, 13 Feb 2023 11:52:35 -0700 Subject: [PATCH 10/23] done with the CSS fundamentals --- starter/03-CSS-Fundamentals/style.css | 40 +++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 0d083368f..a8f76c41c 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -63,3 +63,43 @@ li { .author-list { list-style: none; } + +/* pseudo-classes using : */ +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(2) { + /* color: red; */ +} + +/* first-child dont work well when we put in many elements in the class */ + +/* Misconception: it wont work */ +article p:first-child { + color: red; +} + +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline wavy orangered; +} + +a:active { + background-color: black; + font-style: italic; +} From 277fe5b148481b3634ada7beb0c000c3e846ac23 Mon Sep 17 00:00:00 2001 From: rahilsama Date: Mon, 13 Feb 2023 15:54:49 -0700 Subject: [PATCH 11/23] margin and padding --- starter/03-CSS-Fundamentals/component.html | 30 +++++++++++++ starter/03-CSS-Fundamentals/index.html | 4 +- starter/03-CSS-Fundamentals/style.css | 52 ++++++++++++++++++++++ 3 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 starter/03-CSS-Fundamentals/component.html diff --git a/starter/03-CSS-Fundamentals/component.html b/starter/03-CSS-Fundamentals/component.html new file mode 100644 index 000000000..88978d75b --- /dev/null +++ b/starter/03-CSS-Fundamentals/component.html @@ -0,0 +1,30 @@ + + + + + + + Challenge #2 + +

Converse Chuck Taylor All Star Low Top

+ + Sneaker shoes +

$65.00

+

Free shipping

+

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

+ + More information → + +

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
+ + + + + + diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 5948e38c9..07706a874 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -16,7 +16,7 @@
The Basic Language of the Web: HTML
The Basic Language of the Web: HTML
--> -
+

📘 The Code Magazine

-
+

The Basic Language of the Web: HTML

Date: Mon, 13 Feb 2023 16:22:00 -0700 Subject: [PATCH 12/23] added style to aside --- starter/03-CSS-Fundamentals/style.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 03de5ce39..15c2bae33 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -76,6 +76,15 @@ li:last-child { font-size: 14px; } */ +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + + padding: 50px 0; + width: 500px; +} + .main-header { background-color: #f7f7f7; padding: 20px; From 58bf3e1e0ba7c0f052e6907ec965f5090528edc1 Mon Sep 17 00:00:00 2001 From: rahilsama Date: Tue, 14 Feb 2023 10:57:31 -0700 Subject: [PATCH 13/23] centering the page --- starter/03-CSS-Fundamentals/index.html | 257 +++++++++++++------------ starter/03-CSS-Fundamentals/style.css | 12 ++ 2 files changed, 143 insertions(+), 126 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 07706a874..cc20dfad9 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -15,137 +15,142 @@

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

+ +
    +
  • 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 15c2bae33..dd7e7fad0 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -85,6 +85,13 @@ aside { width: 500px; } +.container { + width: 700px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} + .main-header { background-color: #f7f7f7; padding: 20px; @@ -164,3 +171,8 @@ a:active { nav { font-size: 18px; } + +.post-pic { + width: 100%; + height: auto; +} From c5de4686ef58b2188c09bcd4ea9879a54f868949 Mon Sep 17 00:00:00 2001 From: rahilsama Date: Tue, 14 Feb 2023 13:54:48 -0700 Subject: [PATCH 14/23] absolute and relative positioning --- starter/03-CSS-Fundamentals/index.html | 1 + starter/03-CSS-Fundamentals/style.css | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index cc20dfad9..c0d122225 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -122,6 +122,7 @@

Related posts

width="75" width="75" /> + How to Learn Web Development

By Jonas Schmedtmann

diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index dd7e7fad0..371ed84ae 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -5,6 +5,7 @@ } body { + /* position: relative; */ color: #444; font-family: sans-serif; @@ -86,6 +87,7 @@ aside { } .container { + position: relative; width: 700px; /* margin-left: auto; margin-right: auto; */ @@ -176,3 +178,21 @@ nav { width: 100%; height: auto; } + +nav a:link { + padding-right: 30px; +} + +.like-btn { + position: absolute; + + font-size: 20px; + padding: 20px; + margin: 10px; + cursor: pointer; + + /* top: 0; + left: 0; */ + bottom: 0; + right: 0; +} From f7ad4df2bbe025d970627cfb53611b391e64d71b Mon Sep 17 00:00:00 2001 From: rahilsama Date: Tue, 14 Feb 2023 15:09:03 -0700 Subject: [PATCH 15/23] centered the navbar options --- starter/03-CSS-Fundamentals/style.css | 30 ++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 371ed84ae..fb2eef168 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -42,8 +42,9 @@ h1 { } h2 { - font-size: 40px; + font-size: 30px; margin-bottom: 30px; + position: relative; } h3 { @@ -172,6 +173,7 @@ a:active { nav { font-size: 18px; + text-align: center; } .post-pic { @@ -196,3 +198,29 @@ nav a:link { bottom: 0; right: 0; } + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +p::first-line { + /* color: red; */ +} + +h3 + p::first-line { + /* color: red; */ +} + +h2::after { + content: "TOP"; + background-color: #ffe70e; + font-size: 16px; + font-weight: bold; + display: inline; + padding: 5px 10px; + + position: absolute; + top: -15px; + right: -25px; +} From 76512e33e8126e5743c423cd302fe5e7b4447bad Mon Sep 17 00:00:00 2001 From: rahilsama Date: Wed, 15 Feb 2023 10:39:54 -0700 Subject: [PATCH 16/23] edited page layout with floats --- starter/03-CSS-Fundamentals/index.html | 2 +- starter/04-CSS-Layouts/index.html | 7 ++-- starter/04-CSS-Layouts/style.css | 49 +++++++++++++++++++++++++- 3 files changed, 54 insertions(+), 4 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index c0d122225..a83120456 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -154,4 +154,4 @@

Related posts

- + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..9ceed3a71 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,7 +18,7 @@
The Basic Language of the Web: HTML
-->
-
+

📘 The Code Magazine

+ +
@@ -39,9 +41,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..c5db2236a 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -14,7 +14,7 @@ body { } .container { - width: 800px; + width: 1200px; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; @@ -265,3 +265,50 @@ footer p { nav p { font-size: 18px; } */ + +/* Using Floats */ +.author-img { + float: left; +} + +.author { + /* padding-left: 80px; */ + margin-top: 10px; + margin-left: 10px; + float: left; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +.clear { + clear: both; +} + +.clearfix::after { + clear: both; + content: ""; + display: block; +} +article { + /* background-color: green; */ + width: 825px; + float: left; +} + +aside { + /* background-color: red; */ + width: 300px; + float: right; +} + +footer { + width: 1200; + clear: both; + /* background-color: blue; */ +} From 2c57ce9c902f124843e9eb76e3872f0988f5b38c Mon Sep 17 00:00:00 2001 From: rahilsama Date: Wed, 15 Feb 2023 15:14:05 -0700 Subject: [PATCH 17/23] testing flexbox --- starter/04-CSS-Layouts/flexbox.html | 21 +++++++++++++++++++++ starter/04-CSS-Layouts/index.html | 4 ++-- starter/04-CSS-Layouts/style.css | 8 ++++---- 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..0385ac8fc 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -40,8 +40,29 @@ margin: 40px; /* FLEXBOX */ + display: flex; + align-items: center; + justify-content: flex-start; + } + + .el { + /* + DEFAULTS; + flex-grow= 0; + flex-shrink= 1; + flex-basis = auto; + */ + flex-basis: 100px; + /*flex-grow: 1;*/ + } + + .el--1 { + align-self: flex-start; + flex-grow: 1; } + +
diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 9ceed3a71..4ba9ef536 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 diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c5db2236a..94700dfb1 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 */ @@ -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: 40px; } p { @@ -134,6 +133,7 @@ li:last-child { .related { list-style: none; + margin: 0 0; } body { From 987103b1b2e53ead42c3a97f1a68f6aafd23439d Mon Sep 17 00:00:00 2001 From: rahilsama Date: Wed, 15 Feb 2023 15:45:46 -0700 Subject: [PATCH 18/23] started using flexbox --- starter/04-CSS-Layouts/style.css | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index 94700dfb1..39ed3abda 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -267,12 +267,11 @@ nav p { } */ /* Using Floats */ -.author-img { +/* .author-img { float: left; } .author { - /* padding-left: 80px; */ margin-top: 10px; margin-left: 10px; float: left; @@ -296,13 +295,11 @@ nav { display: block; } article { - /* background-color: green; */ width: 825px; float: left; } aside { - /* background-color: red; */ width: 300px; float: right; } @@ -310,5 +307,4 @@ aside { footer { width: 1200; clear: both; - /* background-color: blue; */ -} +} */ From 6e6467cb18e1582ce6d725c6b4e7252ee450462f Mon Sep 17 00:00:00 2001 From: rahilsama Date: Thu, 16 Feb 2023 09:30:40 -0700 Subject: [PATCH 19/23] using flex to layout the page --- starter/04-CSS-Layouts/index.html | 241 +++++++++++++++--------------- starter/04-CSS-Layouts/style.css | 15 ++ 2 files changed, 136 insertions(+), 120 deletions(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 4ba9ef536..ebd505c65 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -32,133 +32,134 @@

📘 The Code Magazine

-
-
-

The Basic Language of the Web: HTML

- - Headshot of Laura Jones - -

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

+
+
+
+

The Basic Language of the Web: 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. -

+ Headshot of Laura Jones -

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

+

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

-

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

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

-

Why should you learn 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:

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

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

-

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

+

Why should you learn HTML?

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

-
- - +

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

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

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

+ + + +

Copyright © 2027 by The Code Magazine. diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index 39ed3abda..1e2f7ce47 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -308,3 +308,18 @@ footer { width: 1200; clear: both; } */ + +.row { + display: flex; + gap: 75px; + align-items: flex-start; +} + +article { + /* flex: 0 0 825px; */ + flex: 1; + margin-bottom: 0; +} +aside { + flex: 0 0 300px; +} From baec6cd9d55bd91aa3d998132d9e4320a1603e39 Mon Sep 17 00:00:00 2001 From: rahilsama Date: Thu, 16 Feb 2023 13:32:33 -0700 Subject: [PATCH 20/23] css intro --- starter/04-CSS-Layouts/css-grid.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..cf056e854 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -40,10 +40,15 @@ margin: 40px; /* CSS GRID */ + display: grid; + grid-template-columns: 200px 200px 200px 200px; + grid-template-rows: 200px 200px 200px 200px; + gap: 30px; } .container--2 { /* STARTER */ + display: none; font-family: sans-serif; background-color: black; font-size: 40px; From f7a402266bd8d4f68a640d124f7f36351199321e Mon Sep 17 00:00:00 2001 From: rahilsama Date: Thu, 16 Feb 2023 15:12:38 -0700 Subject: [PATCH 21/23] creating and sizing grid columns --- starter/04-CSS-Layouts/css-grid.html | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index cf056e854..6328dff4b 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -41,9 +41,13 @@ /* CSS GRID */ display: grid; - grid-template-columns: 200px 200px 200px 200px; - grid-template-rows: 200px 200px 200px 200px; - gap: 30px; + grid-template-columns: repeat(4, 1fr); + + grid-template-rows: 1fr 1fr; + + /*gap: 30px;*/ + column-gap: 10px; + row-gap: 40px; } .container--2 { @@ -59,6 +63,11 @@ /* CSS GRID */ } + + .el--8 { + grid-column: 2 / 3; + grid-column: 4 / 5; + } From 1d2c0c0490dd47ff619c9cead6563d19f7a96ed7 Mon Sep 17 00:00:00 2001 From: rahilsama Date: Thu, 16 Feb 2023 16:00:50 -0700 Subject: [PATCH 22/23] Aligning grid items and tracks --- starter/04-CSS-Layouts/css-grid.html | 17 +- starter/04-CSS-Layouts/index.html | 245 ++++++++++++++------------- starter/04-CSS-Layouts/style.css | 35 +++- 3 files changed, 168 insertions(+), 129 deletions(-) diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index 6328dff4b..58658f0fe 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -52,16 +52,27 @@ .container--2 { /* STARTER */ - display: none; font-family: sans-serif; background-color: black; font-size: 40px; - margin: 100px; + margin: 40px; - width: 1000px; + width: 700px; height: 600px; /* CSS GRID */ + display: grid; + grid-template-columns: 125px 200px 125px; + grid-template-rows: 250px, 100px; + gap: 50px; + /*Aligning tracks inside container: + distribute empty space; */ + justify-content: center; + + align-content: center; + + align-items: center; + justify-items: center; } .el--8 { diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index ebd505c65..79d18d127 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -32,134 +32,135 @@

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

+
+

The Basic Language of the Web: HTML

+ + Headshot of Laura Jones + +

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

-

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

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

-

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

+

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

-

Why should you learn 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:

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

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

-

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

+

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!

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

+ + + +