From 3a30c258db45caf091c8c0cea5286b053c57e185 Mon Sep 17 00:00:00 2001 From: Eva Li Date: Fri, 16 Dec 2022 13:47:25 -0800 Subject: [PATCH] Section 3 --- .../{ => 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 | 45 +++ starter/03-CSS-Fundamentals/index.html | 257 +++++++++--------- starter/03-CSS-Fundamentals/style.css | 178 ++++++++++++ 9 files changed, 359 insertions(+), 121 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%) 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/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..fdd112b77 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,45 @@ + + + + + The Basic Language of the Web: HTML + + + + + + diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..209a33df3 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 @@ -15,132 +16,146 @@
The Basic Language of the Web: HTML
The Basic Language of the Web: HTML
--> -
-

📘 The Code Magazine

- - -
- -
-
-

The Basic Language of the Web: HTML

- - Headshot of Laura Jones - -

Posted by Laura Jones on Monday, June 21st 2027

- - HTML code on a screen +
+
+

📘 The Code Magazine

+ +
-

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

- -

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

- -

What is HTML?

-

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

-

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

-

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

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

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

- -

Why should you learn HTML?

- -

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

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

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

-
- - - - + + +

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

+ +

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

+ +

What is HTML?

+

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

+

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

+

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

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

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

+ +

Why should you learn HTML?

+ +

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

+ + + +

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

+ + + + + + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..080056e9f --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,178 @@ +h1, +h2, +h3, +h4, +p, +li { + font-family: sans-serif; + color: #444; +} + +h1, +h2, +h3 { + color: #1098ad; +} + +/* global styles */ +* { + margin: 0; + padding: 0; +} + +body { + color: #444; + font-family: sans-serif; + border-top: 10px solid #1098ad; +} + +.container { + width: 800px; + /* + auto tells margin left and right to be the same value + make the page look centered + */ + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; + height: 80px; +} + +.post-header { + margin-bottom: 40px; +} + +article { + margin-bottom: 60px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 0; + width: 500px; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +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; +} + +li:last-child { + margin-bottom: 0; +} + +/* footer p { + font-size: 16px; +} */ + +/* +header p { + font-style: italic; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; +} + +li:first-child { + font-weight: bold; +} + +/* Misconception: this won't work! */ +article p:first-child { + color: red; +} + +/* Styling links using anchor pseudo classes in the recommended order */ +a:link { + /* Selects only elements with href attribute */ + color: #1098ad; + text-decoration: none; +} + +a:visited { + /* applied when link has been clicked on */ + color: #1090ad; +} + +a:hover { + /* applied on hover */ + color: orangered; + font-weight: bold; + text-decoration: underline dotted orangered; +} + +a:active { + /* applied when link is clicked */ + background-color: black; + font-style: italic; +} + +.post-img { + width: 100%; + height: auto; +} + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} */