diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..d844db93f Binary files /dev/null and b/.DS_Store differ diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..288e2e21c 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -3,6 +3,7 @@ The Basic Language of the Web: HTML + @@ -14,133 +15,148 @@

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

- -

- -

Posted by Laura Jones on Monday, June 21st 2027

- -

+

+

+

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

- -

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!

-

- - - - + + + +

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

+ +

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/styles.css b/starter/03-CSS-Fundamentals/styles.css new file mode 100644 index 000000000..01cd75310 --- /dev/null +++ b/starter/03-CSS-Fundamentals/styles.css @@ -0,0 +1,217 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* PAGE SECTIONS */ +body { + color: #444; + font-family: sans-serif; + + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding-left: 16px; + padding-right: 16px; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} +nav { + font-size: 18px; + text-align: center; +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 0; + width: 500px; +} + +h1, +h2, +h3 { + color: #1098ad; +} + +/* h1 doesn't have to be the largest. h1 serves the purpose of improving SEO and accessibility(e.g. screen reader) */ + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 20px; +} + +h3 { + font-size: 30px; + margin-bottom: 30px; +} + +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; +} + +article header p { + font-style: italic; +} + +#author { + font-size: 18px; + font-style: italic; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; +} + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { + /* color: red; */ +} + +/* Misconception: this won't work! because p element is not the first child in article*/ +article p:first-child { + color: red; +} + +/* styling links - only a tags that have the href attribute */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} +/* LVHA */ + +.post-img { + width: 100%; + height: auto; /*based on html width */ +} + +nav a:link { + margin-top: 10px; + margin-right: 30px; + display: inline-block; +} + +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; +} + +h3 + p::first-line { + /*color: red*/ +} + +h2 { + position: relative; +} + +/*after pseudo element is inline*/ +h2::after { + content: "TOP"; + background-color: #ffe70e; + color: #000; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + right: -25px; + top: -10px; +} + +/*FLOATS*/ diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..483fcfea3 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -36,23 +36,68 @@ /* STARTER */ font-family: sans-serif; background-color: #ddd; - font-size: 40px; + font-size: 30px; margin: 40px; /* CSS GRID */ + display: grid; + /* auto will take enough size for the grid items */ + /* grid-template-columns: 1fr 1fr 1fr auto; */ + /* grid-template-rows: 300px 200px; */ + + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr 1fr; + /* height: 500px; /*if height of row track is not defined, fraction will follow the height of the highest grid item. */ + + /* gap: 30px; */ + column-gap: 20px; + row-gap: 40px; + + /* temperory */ + display: none; } + .el--8 { + grid-column: 2/3; + grid-row: 1 /2; + } + + .el--2 { + /* grid-column: 1 / 4; */ + /* grid-column: 1 / span 3; */ + grid-column: 1 / -1; + grid-row: 2 / 3; + } .container--2 { /* 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*/ + align-items: center; + justify-items: center; + } + + .el--3 { + align-self: end; + justify-self: end; } diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..c3c65b047 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -14,7 +14,7 @@ } .el--3 { background-color: green; - height: 150px; + height: 150px; /*all flex-items are as tall as the tallest element*/ } .el--4 { background-color: goldenrod; @@ -36,10 +36,42 @@ /* STARTER */ font-family: sans-serif; background-color: #ddd; - font-size: 40px; + font-size: 34px; margin: 40px; /* FLEXBOX */ + display: flex; + align-items: center; + justify-content: flex-start; + /* gap: 30px; */ + } + + .el { + /* + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + */ + + /* flex-basis: 100px; */ + /* flex-shrink: 0; */ + /* flex-grow: 1; */ + + flex: 1 0 100px; + } + + .el--1 { + align-self: flex-start; + /* order: 2; */ + } + + .el--5 { + align-self: stretch; + order: 1; + } + + .el--6 { + order: -1; } diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..38c1937be 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -25,26 +25,28 @@

📘 The Code Magazine

Blog Challenges - Flexbox - CSS Grid + Flexbox + CSS Grid + +

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 +

+

Why should you learn HTML?

Related posts

+

@@ -449,7 +457,7 @@

-
+

Starter

$399
@@ -477,7 +485,7 @@

-
+

Complete

$649