From 537605d7a8ac886477caec0944bf258002709f02 Mon Sep 17 00:00:00 2001 From: Jev Date: Thu, 11 Jan 2024 22:11:36 +0000 Subject: [PATCH 01/37] add devcontainer --- .devcontainer/devcontainer.json | 34 +++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 .devcontainer/devcontainer.json diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 000000000..e548c461e --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,34 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the +// README at: https://github.com/devcontainers/templates/tree/main/src/ubuntu +{ + "name": "Ubuntu", + // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile + "image": "mcr.microsoft.com/devcontainers/base:jammy", + "customizations": { + "vscode": { + "extensions": [ + "formulahendry.auto-close-tag", + "formulahendry.auto-rename-tag", + "naumovs.color-highlight", + "kisstkondoros.vscode-gutter-preview", + "esbenp.prettier-vscode", + "ritwickdey.LiveServer" + ] + } + } + + // Features to add to the dev container. More info: https://containers.dev/features. + // "features": {}, + + // Use 'forwardPorts' to make a list of ports inside the container available locally. + // "forwardPorts": [], + + // Use 'postCreateCommand' to run commands after the container is created. + // "postCreateCommand": "uname -a", + + // Configure tool-specific properties. + // "customizations": {}, + + // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. + // "remoteUser": "root" +} From 02661386e039fd278a3d48c0dd2600ffc863b54b Mon Sep 17 00:00:00 2001 From: Jev Date: Thu, 11 Jan 2024 22:15:21 +0000 Subject: [PATCH 02/37] workspace settings --- .vscode/settings.json | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..9e8a2a249 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "files.autoSave": "onFocusChange", + "editor.formatOnSave": true, + "editor.wordWrap": "on", + "editor.tabSize": 2 +} From df3cccf9e25267c5270f4c4921e7cb2e02df4c03 Mon Sep 17 00:00:00 2001 From: Jev Date: Thu, 11 Jan 2024 22:39:26 +0000 Subject: [PATCH 03/37] add scratch --- starter/01-Scratch/index.html | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 starter/01-Scratch/index.html diff --git a/starter/01-Scratch/index.html b/starter/01-Scratch/index.html new file mode 100644 index 000000000..bab1190f9 --- /dev/null +++ b/starter/01-Scratch/index.html @@ -0,0 +1,15 @@ + + + + + + + Hello + + + +

Hello World

+

Yes.

+ + + From 9b362db1c0033159a62e685cfe64d14aae393273 Mon Sep 17 00:00:00 2001 From: Jev Date: Thu, 18 Jan 2024 21:37:43 +0000 Subject: [PATCH 04/37] css selectors --- starter/03-CSS-Fundamentals/index.html | 241 +++++++++++-------------- starter/03-CSS-Fundamentals/style.css | 16 ++ 2 files changed, 126 insertions(+), 131 deletions(-) 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..23cc05403 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -1,12 +1,14 @@ - - - The Basic Language of the Web: HTML - - - +
+

📘 The Code Magazine

+ + +
+ +
-

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

-
- - - -
Copyright © 2027 by 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!

+
+ + + +
Copyright © 2027 by The Code Magazine.
+ + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..75e0d953d --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,16 @@ +body { + font-family: sans-serif; +} + +h1 { + color: darkgreen; + font-size: 3em; + text-transform: uppercase; + text-align: center; + font-style: italic; +} + +.related-posts ul { + list-style: none; +} + From 8db8624d4ae451342b16eeda26fc65202542e07d Mon Sep 17 00:00:00 2001 From: Jev Date: Mon, 25 Mar 2024 21:32:41 +0000 Subject: [PATCH 05/37] done challenge --- .../challenge_1/index.html | 33 ++++++++++++++ .../03-CSS-Fundamentals/challenge_1/style.css | 43 +++++++++++++++++++ starter/03-CSS-Fundamentals/index.html | 2 +- starter/03-CSS-Fundamentals/style.css | 30 ++++++++++++- 4 files changed, 106 insertions(+), 2 deletions(-) create mode 100644 starter/03-CSS-Fundamentals/challenge_1/index.html create mode 100644 starter/03-CSS-Fundamentals/challenge_1/style.css diff --git a/starter/03-CSS-Fundamentals/challenge_1/index.html b/starter/03-CSS-Fundamentals/challenge_1/index.html new file mode 100644 index 000000000..1def80600 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge_1/index.html @@ -0,0 +1,33 @@ + + + + + + The Basic Language of the Web: HTML + + + + +
+

Converse Chuck Taylor All Star Low Top

+ Chuck Taylor All Star Shoe + +

$65.00

+

Free shipping

+

Ready to dress up or down, these classic canvas Chucks 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/challenge_1/style.css b/starter/03-CSS-Fundamentals/challenge_1/style.css new file mode 100644 index 000000000..4db25ce33 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge_1/style.css @@ -0,0 +1,43 @@ +body { + font-family: Arial, sans-serif; + font-size: small; +} + +.product { + border: 3px solid black; + +} + +.product .product-title { + background-color: #f1f1f1; + text-transform: uppercase; + text-align: center; +} + +.price { + font-size: large; +} + +.shipping { + text-transform: uppercase; +} + +.product a { + text-decoration: underline; + color: black; +} + +.product li { + list-style-type: square; +} + +/* format button as black */ +.product button { + background-color: black; + color: white; + border: none; + text-align: center; + font-size: large; + text-transform: uppercase; + cursor: pointer; +} diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 23cc05403..ef75bb810 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -17,7 +17,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

@@ -118,31 +118,35 @@

Why should you learn HTML?

From 5e1dcc407d25e2928770aa421650039722f6b5dd Mon Sep 17 00:00:00 2001 From: Jev Date: Wed, 3 Apr 2024 22:27:29 +0000 Subject: [PATCH 16/37] refactor --- starter/04-CSS-Layouts/custom.css | 8 +++-- starter/04-CSS-Layouts/index.html | 52 +++++++++++++++---------------- 2 files changed, 31 insertions(+), 29 deletions(-) diff --git a/starter/04-CSS-Layouts/custom.css b/starter/04-CSS-Layouts/custom.css index d4a6bc7e2..cffb33e95 100644 --- a/starter/04-CSS-Layouts/custom.css +++ b/starter/04-CSS-Layouts/custom.css @@ -9,6 +9,12 @@ position: relative; } +.top-promo { + position: absolute; + top: -10px; + right: -10px; +} + .author-box { margin-bottom: 15px; @@ -25,8 +31,6 @@ } footer { - background-color: #333; - color: white; padding: 20px; text-align: center; diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index bcacbbcba..db4fd5b96 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -1,5 +1,5 @@ - + @@ -14,34 +14,32 @@
-
- - - -
+ +
+ TOP

The Basic Language of the Web: HTML

From 1d3cc68086ff1fa4af4363a9ebb8fb5a87eafc0b Mon Sep 17 00:00:00 2001 From: Jev Date: Wed, 3 Apr 2024 22:32:41 +0000 Subject: [PATCH 17/37] Add border-radius to top-promo and change HTML data-theme to dark --- starter/04-CSS-Layouts/custom.css | 1 + starter/04-CSS-Layouts/index.html | 22 +++++++++++----------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/starter/04-CSS-Layouts/custom.css b/starter/04-CSS-Layouts/custom.css index cffb33e95..eea0bcd67 100644 --- a/starter/04-CSS-Layouts/custom.css +++ b/starter/04-CSS-Layouts/custom.css @@ -10,6 +10,7 @@ } .top-promo { + border-radius: var(--pico-border-radius); position: absolute; top: -10px; right: -10px; diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index db4fd5b96..601378ae7 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -1,5 +1,5 @@ - + @@ -40,20 +40,20 @@

📘 The Code Magazine

TOP -
+

The Basic Language of the Web: HTML

-
- - Headshot of Laura Jones +
+
-
- Posted by Laura Jones on Monday, June 21st 2027 -
+ Headshot of Laura Jones +
+ Posted by Laura Jones on Monday, June 21st 2027
- HTML code on a screen - -
+ +
+ HTML code on a screen +

All modern websites and web applications are built using three From b2e9f52944bbb75fbf184ded00da01a7a740faf8 Mon Sep 17 00:00:00 2001 From: Jev Date: Wed, 3 Apr 2024 23:11:14 +0000 Subject: [PATCH 18/37] change color, refactor --- starter/04-CSS-Layouts/custom.css | 20 ++- starter/04-CSS-Layouts/index.html | 201 +++++++++++++++--------------- 2 files changed, 119 insertions(+), 102 deletions(-) diff --git a/starter/04-CSS-Layouts/custom.css b/starter/04-CSS-Layouts/custom.css index eea0bcd67..0c1839390 100644 --- a/starter/04-CSS-Layouts/custom.css +++ b/starter/04-CSS-Layouts/custom.css @@ -6,9 +6,22 @@ } .main-content { + display:flex; + justify-content: flex-start; + gap: 20px; +} + +.main-article { position: relative; + flex: 1 ; +} + +.main-content aside { + /* background-color: lightgreen; */ + flex: 0 0 300px; } + .top-promo { border-radius: var(--pico-border-radius); position: absolute; @@ -27,11 +40,14 @@ cursor: pointer; position: absolute; - bottom: 10px; - right: 10px; + bottom: 60px; + right: -10px; } + + footer { + position:relative; padding: 20px; text-align: center; diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 601378ae7..2bb42dbad 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -4,7 +4,7 @@ - + The Basic Language of the Web: HTML @@ -37,120 +37,121 @@

📘 The Code Magazine

+
+
+ TOP +
+

The Basic Language of the Web: HTML

+
+
-
- TOP -
-

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

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

-
- - +
+ +

Copyright © 2027 by The Code Magazine.

+
From 08bd50533ee7423b38ce0a9f41437aad8965c5f2 Mon Sep 17 00:00:00 2001 From: Jev Date: Thu, 4 Apr 2024 00:12:23 +0000 Subject: [PATCH 19/37] limit height --- starter/04-CSS-Layouts/custom.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/starter/04-CSS-Layouts/custom.css b/starter/04-CSS-Layouts/custom.css index 0c1839390..eb5735273 100644 --- a/starter/04-CSS-Layouts/custom.css +++ b/starter/04-CSS-Layouts/custom.css @@ -7,7 +7,8 @@ .main-content { display:flex; - justify-content: flex-start; + /* justify-content: flex-start; */ + align-items: flex-start; gap: 20px; } From d6526955ab6a84d03f3dfeb110556940b7c9e20a Mon Sep 17 00:00:00 2001 From: Jev Date: Thu, 4 Apr 2024 21:04:23 +0000 Subject: [PATCH 20/37] play with grid --- starter/04-CSS-Layouts/css-grid.html | 68 +----------------------- starter/04-CSS-Layouts/grid-style.css | 74 +++++++++++++++++++++++++++ 2 files changed, 75 insertions(+), 67 deletions(-) create mode 100644 starter/04-CSS-Layouts/grid-style.css diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index bbec453a5..75b450df1 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -6,73 +6,7 @@ CSS Grid - + diff --git a/starter/04-CSS-Layouts/grid-style.css b/starter/04-CSS-Layouts/grid-style.css new file mode 100644 index 000000000..7150c91be --- /dev/null +++ b/starter/04-CSS-Layouts/grid-style.css @@ -0,0 +1,74 @@ +.el { + padding: 20px; + /* height: 100px; */ +} + +.el--1 { + background-color: blueviolet; +} + +.el--2 { + background-color: orangered; + grid-column: 1; + grid-row: 2; +} + +.el--3 { + background-color: green; + /* height: 150px; */ +} + +.el--4 { + background-color: goldenrod; +} + +.el--5 { + background-color: palevioletred; +} + +.el--6 { + background-color: steelblue; +} + +.el--7 { + background-color: yellow; +} + +.el--8 { + background-color: crimson; + grid-column: 2/3; + grid-row: 1/2; +} + +.container--1 { + /* STARTER */ + font-family: sans-serif; + background-color: #ddd; + font-size: 20px; + margin: 40px; + + + + /* CSS GRID */ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + row-gap: 10px; + column-gap: 10px; + justify-content: center; +} + +.container--2 { + + display: none; + /* STARTER */ + font-family: sans-serif; + background-color: black; + font-size: 40px; + margin: 100px; + + width: 1000px; + height: 600px; + + /* CSS GRID */ +} From 2c8d1f0cbda913ab55f1fb562d60b25a4402b5b9 Mon Sep 17 00:00:00 2001 From: Jev Date: Thu, 4 Apr 2024 21:16:58 +0000 Subject: [PATCH 21/37] START GRID --- starter/04-CSS-Layouts/custom-grid.css | 46 +++++++ starter/04-CSS-Layouts/index-grid.html | 159 +++++++++++++++++++++++++ 2 files changed, 205 insertions(+) create mode 100644 starter/04-CSS-Layouts/custom-grid.css create mode 100644 starter/04-CSS-Layouts/index-grid.html diff --git a/starter/04-CSS-Layouts/custom-grid.css b/starter/04-CSS-Layouts/custom-grid.css new file mode 100644 index 000000000..e9e13b98c --- /dev/null +++ b/starter/04-CSS-Layouts/custom-grid.css @@ -0,0 +1,46 @@ +.flex { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 20px; +} + + +.main-article { + position: relative; +} + + + +.top-promo { + border-radius: var(--pico-border-radius); + position: absolute; + top: -10px; + right: -10px; +} + +.author-box { + margin-bottom: 15px; + +} + +#like-button { + font-size: 22px; + padding: 10px; + cursor: pointer; + + position: absolute; + bottom: 60px; + right: -10px; +} + + + +footer { + position:relative; + padding: 20px; + text-align: center; + + bottom: 0; + width: 100%; +} diff --git a/starter/04-CSS-Layouts/index-grid.html b/starter/04-CSS-Layouts/index-grid.html new file mode 100644 index 000000000..80c90241c --- /dev/null +++ b/starter/04-CSS-Layouts/index-grid.html @@ -0,0 +1,159 @@ + + + + + + + + + + The Basic Language of the Web: HTML + + + + + +
+ + +
+
+ TOP +
+

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!

+
+ +
+ +
+

+ Copyright © 2027 by The Code Magazine. +

+ +
+
+ + + From 2693831525f5ee7eccf9081b47a9daea4d303ae2 Mon Sep 17 00:00:00 2001 From: Jev Date: Thu, 4 Apr 2024 21:44:14 +0000 Subject: [PATCH 22/37] layout using grid --- starter/04-CSS-Layouts/custom-grid.css | 28 +++- starter/04-CSS-Layouts/index-grid.html | 200 ++++++++++++------------- 2 files changed, 121 insertions(+), 107 deletions(-) diff --git a/starter/04-CSS-Layouts/custom-grid.css b/starter/04-CSS-Layouts/custom-grid.css index e9e13b98c..10d53a9c4 100644 --- a/starter/04-CSS-Layouts/custom-grid.css +++ b/starter/04-CSS-Layouts/custom-grid.css @@ -5,13 +5,11 @@ margin-bottom: 20px; } - -.main-article { +.main-content { position: relative; } - .top-promo { border-radius: var(--pico-border-radius); position: absolute; @@ -19,10 +17,6 @@ right: -10px; } -.author-box { - margin-bottom: 15px; - -} #like-button { font-size: 22px; @@ -43,4 +37,24 @@ footer { bottom: 0; width: 100%; + grid-column: 1/-1; + grid-row: 3; +} + +.container { + display: grid; + column-gap: 20px; + grid-template-columns: 1fr 300px; } + +nav { + grid-column: 1/-1; + grid-row: 1; +} + +aside { + + grid-column: 2; + grid-row: 2; +} + diff --git a/starter/04-CSS-Layouts/index-grid.html b/starter/04-CSS-Layouts/index-grid.html index 80c90241c..414ab0713 100644 --- a/starter/04-CSS-Layouts/index-grid.html +++ b/starter/04-CSS-Layouts/index-grid.html @@ -37,116 +37,116 @@

📘 The Code Magazine

-
-
- TOP -
-

The Basic Language of the Web: HTML

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

The Basic Language of the Web: HTML

+
+
-
- Posted by Laura Jones on Monday, June 21st 2027 -
+ 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!

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

-
- Person programming -
- How to Learn Web Development -
By Jonas Schmedtmann
-
+

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!

+ + +
+ -
- + +
+