diff --git a/datha.html b/datha.html new file mode 100644 index 000000000..41b10a9bc --- /dev/null +++ b/datha.html @@ -0,0 +1,46 @@ +
+

Converse Chuck Taylor All Star Low Top

+ + Chuck Taylor All Star Shoe +
+
+

$65.00

+

Free shipping

+
+

Sale

+ +

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

+ More information → + +
+
+
+
+
+
+
+
+
+ +
+

Product details

+ +
+ + +
diff --git a/starter/02-HTML-Fundamentals/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..5994b0c98 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -3,10 +3,13 @@ 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: -

- - - -

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..a4d707640 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,212 @@ +* { + /* border-top: 10px solid red; */ + margin: 0; + padding: 0; +} + +/* */ + +body { + font-family: sans-serif; + color: #444; + border-top: 15px solid rgb(99, 126, 184); + position: relative; +} + +.container { + width: 80%; + /* 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; + text-align: center; +} + +/* smaller sections */ + +h1, +h2, +h3 { + color: rgb(42, 99, 148); +} + +h1 { + font-size: 26px; + text-transform: capitalize; + font-style: italic; + color: rgba(95, 192, 50, 0.705); +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + text-align: center; + font-size: 20px; +} + +p { + font-size: 22px; + margin-bottom: 15px; +} + +li { + font-size: 20px; + margin: 10px; + /* display: inline; */ +} + +li:last-child { + margin: 0; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li:last-child { + margin-left: 10px; +} + +#author { + font-style: italic; +} + +#copyright { + font-size: 15px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; +} + +li:first-child { + font-weight: bold; +} + +/* li:nth-child(odd) { + color: red; +} */ + +a:link { + color: rgb(87, 87, 189); + text-decoration: none; +} + +a:visited { + /* color: #444; */ + color: rgb(87, 87, 189); +} + +a:hover { + font-weight: bold; + color: orangered; + text-decoration: solid underline black; +} + +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; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + + position: absolute; + + 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; +} diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..3778419a3 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -36,30 +36,80 @@ /* STARTER */ font-family: sans-serif; background-color: #ddd; - font-size: 40px; + font-size: 30px; margin: 40px; /* CSS GRID */ + display: grid; + /* grid-template-columns: 1fr 1fr 1fr auto; */ + grid-template-columns: repeat(4, 1fr); + /* grid-template-rows: repeat(2, 1fr); */ + grid-template-rows: 1fr, 1fr; + /* height: 500px; */ + + /* Gap */ + column-gap: 20px; + row-gap: 40px; + + /* Temp */ + display: none; + } + + /* .el--1 { + grid-row: 2; + grid-column: 4; } + .el--2 { + grid-row: 2; + grid-column: 3; + } + + .el--8 { + grid-column: 2 / span 2; + grid-row: 2; + } */ + .container--2 { + /* display: none; */ + /* STARTER */ 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; + + /* Aligning items inside cells:moving items around inside cells */ + + justify-items: center; + align-items: center; + } + + .el--3 { + align-self: end; + justify-self: end; }
(1) HTML
-
(2) and
+
(3) CSS
(4) are
(5) amazing
diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..60af2607b 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -37,10 +37,53 @@ 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 +93,9 @@
CSS
are
amazing
-
languages
+
to
-
learn
+
diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..de57d0a41 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,32 +18,38 @@
The Basic Language of the Web: HTML
-->
-
+

📘 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

+