From c906858a40d6831cb8af7afe97134bf77c9f28f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Mon, 4 Dec 2023 11:38:03 +0300 Subject: [PATCH 01/48] text elements --- .../{ => 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 | 30 ++++++++++++++++++ 7 files changed, 30 insertions(+) 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 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..2404cba58 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,30 @@ + + + + + + Document + + +

📘 The Code Magazine

+

Posted by Laura Jones on Monday , June 21st 2027

+

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

+

Why should you learn HTML?

+ + From ebbb7003d53f7c871aec44ebbc2df21d22aa33cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Mon, 4 Dec 2023 11:48:21 +0300 Subject: [PATCH 02/48] - + diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css index 818a708db..a794c55b1 100644 --- a/starter/02-HTML-Fundamentals/style.css +++ b/starter/02-HTML-Fundamentals/style.css @@ -1,35 +1,47 @@ +h1, +h2, +h3, +h4, +p, +li { + font-family: sans-serif; +} + h1 { color: blue; font-size: 26px; - 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-size: 20px; - font-family: sans-serif; +} + +footer p { + font-size: 16px; +} + +article header p { + font-style: italic; + background-color: #eee; } From 3b417a34c655042dcf414edc104f39aa2f4174f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Tue, 5 Dec 2023 22:13:50 +0300 Subject: [PATCH 08/48] class and ID selectors --- starter/02-HTML-Fundamentals/index.html | 14 ++++++++------ starter/02-HTML-Fundamentals/style.css | 15 +++++++++++++++ 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index df5a9e5c5..f5b278356 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -26,7 +26,9 @@

The Basic Language of the Web: HTML

width="50" height="50" /> -

Posted by Laura Jones on Monday , June 21st 2027

+

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

Hmtl code on a screen

Why should you learn HTML?

diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css index a794c55b1..634a19990 100644 --- a/starter/02-HTML-Fundamentals/style.css +++ b/starter/02-HTML-Fundamentals/style.css @@ -37,6 +37,7 @@ li { font-size: 20px; } +/* footer p { font-size: 16px; } @@ -44,4 +45,18 @@ footer p { article header p { font-style: italic; background-color: #eee; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; } From 97f436e3cc5fa68422af8dce457dadc3d5d009bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Tue, 5 Dec 2023 22:53:23 +0300 Subject: [PATCH 09/48] working with colors --- starter/02-HTML-Fundamentals/index.html | 2 +- starter/02-HTML-Fundamentals/style.css | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index f5b278356..d042f816e 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -17,7 +17,7 @@

📘 The Code Magazine

It shouldnt be italic

-
+

The Basic Language of the Web: HTML

<65841330+GulsahDuzgun@users.noreply.github.com> Date: Tue, 5 Dec 2023 23:18:15 +0300 Subject: [PATCH 10/48] Pseudo Class --- starter/02-HTML-Fundamentals/index.html | 2 ++ starter/02-HTML-Fundamentals/style.css | 22 ++++++++++++++++++++++ 2 files changed, 24 insertions(+) diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index d042f816e..24ca1583e 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -18,6 +18,7 @@

📘 The Code Magazine

+

Check

The Basic Language of the Web: HTML

Relatives Posts

Why JavaScript is awesome?

By Jonas Schmedtmann

+

Paragraph is last element here

diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css index ffc02ab9b..aa4f40b75 100644 --- a/starter/02-HTML-Fundamentals/style.css +++ b/starter/02-HTML-Fundamentals/style.css @@ -77,3 +77,25 @@ aside { border-top: 5px solid #1098ad; border-bottom: 5px solid #1098ad; } + +li:first-child { + font-weight: bold; +} + +li:last-child { + background-color: rebeccapurple; +} + +li:nth-child(2) { + font-style: italic; + font-size: 20px; +} + +li:nth-child(odd) { + color: #7ad052; +} + +article header p:first-child { + font-weight: bold; + font-style: italic; +} From f36688526869f466c2a89ca11fa33023fd44f328 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Tue, 5 Dec 2023 23:46:47 +0300 Subject: [PATCH 11/48] styling hyperlinks --- starter/02-HTML-Fundamentals/style.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css index aa4f40b75..75d3f6994 100644 --- a/starter/02-HTML-Fundamentals/style.css +++ b/starter/02-HTML-Fundamentals/style.css @@ -99,3 +99,25 @@ article header p:first-child { font-weight: bold; font-style: italic; } + +/*Hierarchy is L(link)->V(visited)->H(hover)->A(active)*/ +/*if a element includes the href property then link pseudo class works*/ +a:link { + color: #1098ad; + text-decoration: none; +} +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + text-decoration: underline wavy orangered; + font-weight: bold; +} + +/*When the link is being clicked active pseudo class works*/ +a:active { + background-color: black; + font-style: italic; +} From 8a9adf342e67a88009cce8ed4e94f9ef323ac8e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Wed, 6 Dec 2023 09:57:41 +0300 Subject: [PATCH 12/48] conflicts between selectors 1- Declarations mark !important 2- Inline Style(style attribute in HTML) 3- ID(#) selector 4- class(.) or pseudo class(:) 5- Element selector(p, div, etc.) 6- Universal selector(*) If we have same priority level, last selector in codes is applied --- starter/02-HTML-Fundamentals/index.html | 4 +++- starter/02-HTML-Fundamentals/style.css | 17 +++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 24ca1583e..323ca3ccf 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -106,7 +106,9 @@

Relatives Posts

- +

+ Copyright © 2027 by The Code Magazine. +

diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css index 75d3f6994..786f32923 100644 --- a/starter/02-HTML-Fundamentals/style.css +++ b/starter/02-HTML-Fundamentals/style.css @@ -114,6 +114,7 @@ a:hover { color: orangered; text-decoration: underline wavy orangered; font-weight: bold; + font-style: normal; } /*When the link is being clicked active pseudo class works*/ @@ -121,3 +122,19 @@ a:active { background-color: black; font-style: italic; } + +/* #copyright { + color: red; +} */ + +.copyright { + color: green; +} + +.text { + color: blue !important; +} + +footer p { + color: rebeccapurple; +} From 4ba41ebd5855fa3394d11983441402f75f5628f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Wed, 6 Dec 2023 10:26:30 +0300 Subject: [PATCH 13/48] Universal selector vs body selector There is a big difference between the universal selector and body selector. Universal selector simply applies to all the elements and there is no inheritance involved on the other hand body gets inherited. So element (*) > Inheritance style(body) --- starter/02-HTML-Fundamentals/index.html | 1 + starter/02-HTML-Fundamentals/style.css | 25 ++++++++++++++++++------- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 323ca3ccf..70bc44309 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -10,6 +10,7 @@

📘 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/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css index 2f2c4f7a1..3f6e40f02 100644 --- a/starter/02-HTML-Fundamentals/style.css +++ b/starter/02-HTML-Fundamentals/style.css @@ -14,10 +14,10 @@ body { } .container { - width: 800px; - /* margin-left: auto; - margin-right: auto; */ - margin: 0 auto; + width: 1200px; + /* margin: 0 auto;*/ + margin-left: auto; + margin-right: auto; } .main-header { @@ -183,3 +183,20 @@ a:active { font-style: italic; } /* LVHA */ + +.post-img { + width: 100%; + height: auto; +} + +/*.navigation { + height: 50px; +}*/ + +.navigation a:link { + margin: 20px; + background-color: hotpink; + color: black; + padding: 10px; + display: block; +} From 502dfdb85bbc27eac54ffa4022a8d95e3a417450 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Wed, 6 Dec 2023 15:42:17 +0300 Subject: [PATCH 16/48] inline elements Inline Elements don't occupy to break a new line and aren't allow to width and height. Just cover space they need . Also aren't effected by witdth and height --- starter/02-HTML-Fundamentals/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css index 3f6e40f02..ea2c867e4 100644 --- a/starter/02-HTML-Fundamentals/style.css +++ b/starter/02-HTML-Fundamentals/style.css @@ -85,6 +85,7 @@ h4 { } p { + display: inline; font-size: 22px; line-height: 1.5; margin-bottom: 15px; @@ -97,6 +98,7 @@ ol { } li { + display: inline; font-size: 20px; margin-bottom: 10px; /* display: inline; */ @@ -193,10 +195,10 @@ a:active { height: 50px; }*/ -.navigation a:link { +/* .navigation a:link { margin: 20px; background-color: hotpink; color: black; padding: 10px; display: block; -} +} */ From 5729b95e6d47fb1e4bb5c3df56673443a4609a11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Wed, 6 Dec 2023 16:38:07 +0300 Subject: [PATCH 17/48] inline-block with display:inline-block we can set width and heigth. And also we can apply margin and padding vertically --- starter/02-HTML-Fundamentals/style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css index ea2c867e4..611839fed 100644 --- a/starter/02-HTML-Fundamentals/style.css +++ b/starter/02-HTML-Fundamentals/style.css @@ -195,10 +195,10 @@ a:active { height: 50px; }*/ -/* .navigation a:link { +.navigation a:link { margin: 20px; - background-color: hotpink; - color: black; + background-color: #f7f7f7; padding: 10px; - display: block; -} */ + display: inline-block; + margin: 20px; +} From a31c9089ff125d6884601fe1f04d59f85d76527a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Wed, 6 Dec 2023 18:55:04 +0300 Subject: [PATCH 18/48] adjacent sibling --- starter/02-HTML-Fundamentals/index.html | 1 + starter/02-HTML-Fundamentals/style.css | 36 ++++++++++++++++++++----- 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 2c3e6fafb..6e5aa89bb 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -149,6 +149,7 @@

Related posts

+
Copyright © 2027 by The Code Magazine.
diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css index 611839fed..8d6caba14 100644 --- a/starter/02-HTML-Fundamentals/style.css +++ b/starter/02-HTML-Fundamentals/style.css @@ -8,16 +8,15 @@ body { color: #444; font-family: sans-serif; - border-top: 10px solid #1098ad; - position: relative; } .container { - width: 1200px; + width: 900px; /* margin: 0 auto;*/ margin-left: auto; margin-right: auto; + position: relative; } .main-header { @@ -138,10 +137,6 @@ li:last-child { list-style: none; } -body { - /* background-color: orangered; */ -} - /* .first-li { font-weight: bold; } */ @@ -202,3 +197,30 @@ a:active { display: inline-block; margin: 20px; } + +.like { + width: 50px; + height: 50px; + padding: 10px; + position: absolute; + top: 20px; + right: 40px; + border-radius: 10px; +} + +/*Pseudo Elements with :: Pseudo Class with :*/ + +h1::first-letter { + font-style: normal; + margin-right: 10px; +} + +a::first-line { + background-color: orangered; +} + +h3 + p::first-line { + color: white; + background-color: black; + font-size: 10px; +} From 6512a96de27f000d8ac5d1ee45e36fe31a657829 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Wed, 6 Dec 2023 20:27:26 +0300 Subject: [PATCH 19/48] Pseudo Elements --- starter/02-HTML-Fundamentals/style.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css index 8d6caba14..5d32cb103 100644 --- a/starter/02-HTML-Fundamentals/style.css +++ b/starter/02-HTML-Fundamentals/style.css @@ -224,3 +224,15 @@ h3 + p::first-line { background-color: black; font-size: 10px; } + +h2::before { + content: "TOP"; + background-color: #ffe70e; + color: black; + position: absolute; + top: -20px; + right: -10px; + display: inline-block; + padding: 8px; + font-weight: bold; +} From 4dfc03dc3ccdeb5cab1b4f039e1a92779e35eeb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Thu, 7 Dec 2023 00:14:32 +0300 Subject: [PATCH 20/48] Update style.css --- starter/02-HTML-Fundamentals/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css index 5d32cb103..18aecb4b6 100644 --- a/starter/02-HTML-Fundamentals/style.css +++ b/starter/02-HTML-Fundamentals/style.css @@ -186,9 +186,9 @@ a:active { height: auto; } -/*.navigation { - height: 50px; -}*/ +.navigation { + text-align: center; +} .navigation a:link { margin: 20px; From f10819397a4c9dc1036bc8b6bdf45403541c5b66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Thu, 7 Dec 2023 12:38:32 +0300 Subject: [PATCH 21/48] float vs absolute positioning Both of them are removed from the normal flow . position:absolute has no impact surrounding elements , might overlap them On the other hand text and inline elements will wrap around the floated element. The container will not just its height to the element. If child elements are float and no longer on the flow that means the parent element is empty and would be disappered on page --- starter/03-CSS-Fundamentals/index.html | 254 +++++++++++----------- starter/03-CSS-Fundamentals/style.css | 283 +++++++++++++++++++++++++ 2 files changed, 415 insertions(+), 122 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..730b7c7f7 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 @@ -14,133 +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!

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

+ + + +

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..5cfa0141b --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,283 @@ +* { + /* border-top: 10px solid #1098ad; */ + margin: 0; + padding: 0; +} + +/* PAGE SECTIONS */ +body { + color: #444; + font-family: sans-serif; + + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 800px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} + +.main-header h1 { + float: left; +} + +nav { + font-size: 18px; + float: right; + /* text-align: center; */ +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; + /* position: relative; */ +} + +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; +} + +/* SMALLER ELEMENTS */ +h1, +h2, +h3 { + color: #1098ad; +} + +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; + /* display: inline; */ +} + +li:last-child { + margin-bottom: 0; +} + +/* footer p { + font-size: 16px; +} */ + +/* article header p { + font-style: italic; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +/* ul { + list-style: none; +} */ + +.related { + list-style: none; +} + +body { + /* background-color: orangered; */ +} + +/* .first-li { + font-weight: bold; +} */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { + /* color: red; */ +} + +/* Misconception: this won't work! */ +article p:first-child { + color: red; +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + /* color: #777; */ + 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; +} + +nav a:link { + /* background-color: orangered; + margin: 20px; + padding: 20px; + + display: block; */ + + margin-right: 30px; + margin-top: 10px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + + position: absolute; + /* top: 50px; + left: 50px; */ + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { + /* color: red; */ +} + +h2 { + /* background-color: orange; */ + position: relative; +} + +h2::before { + content: "TOP"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green !important; +} */ + +/* nav a:link, +nav p { + font-size: 18px; +} */ + +/*FLOATS*/ + +.author-img { + float: left; +} + +.author { + float: left; + margin: 20px 20px; +} From 241077ca6a212346a7ebfc305c6964b9c3bfb20b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Fri, 8 Dec 2023 11:20:41 +0300 Subject: [PATCH 22/48] clear floats with clearfix --- starter/03-CSS-Fundamentals/index.html | 2 +- starter/03-CSS-Fundamentals/style.css | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 730b7c7f7..c57725f7c 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

diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 9f2250e8b..f27e6e461 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -8,13 +8,12 @@ body { color: #444; font-family: sans-serif; - border-top: 10px solid #1098ad; position: relative; } .container { - width: 800px; + width: 1200px; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; @@ -111,14 +110,6 @@ li:last-child { margin-bottom: 0; } -/* footer p { - font-size: 16px; -} */ - -/* article header p { - font-style: italic; -} */ - #author { font-style: italic; font-size: 18px; @@ -132,23 +123,10 @@ li:last-child { font-size: 18px; font-weight: bold; } - -/* ul { - list-style: none; -} */ - .related { list-style: none; } -body { - /* background-color: orangered; */ -} - -/* .first-li { - font-weight: bold; -} */ - li:first-child { font-weight: bold; } @@ -288,3 +266,17 @@ nav p { content: ""; display: block; } + +article { + float: left; + width: 870px; +} + +aside { + float: right; + width: 300px; +} + +footer { + clear: both; +} From d6b00d9bd14d045ac9dda92d5fb0dbb06301c577 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Fri, 8 Dec 2023 17:39:05 +0300 Subject: [PATCH 24/48] box-sizing:border-box --- starter/03-CSS-Fundamentals/style.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index f27e6e461..96eb2502c 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -2,6 +2,7 @@ /* border-top: 10px solid #1098ad; */ margin: 0; padding: 0; + box-sizing: border-box; } /* PAGE SECTIONS */ @@ -86,6 +87,7 @@ h4 { font-size: 20px; text-transform: uppercase; text-align: center; + margin-bottom: 30px; } p { @@ -96,8 +98,8 @@ p { ul, ol { - margin-left: 50px; margin-bottom: 20px; + list-style: none; } li { @@ -126,10 +128,10 @@ li:last-child { .related { list-style: none; } - +/* li:first-child { font-weight: bold; -} +} */ li:last-child { font-style: italic; @@ -275,6 +277,9 @@ article { aside { float: right; width: 300px; + margin: 0; + padding: 20px 30px; + box-sizing: border-box; } footer { From fb0c3ac3f3eb6c58b04d4ed4938958ce1ce8dd52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Fri, 8 Dec 2023 17:49:34 +0300 Subject: [PATCH 25/48] flex In flex container elements are inline-block and align-item is stretch as default --- starter/04-CSS-Layouts/flexbox.html | 5 ++++- starter/04-CSS-Layouts/index.html | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..962a89f7e 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -30,6 +30,7 @@ } .el--8 { background-color: crimson; + padding: 10px; } .container { @@ -38,7 +39,9 @@ background-color: #ddd; font-size: 40px; margin: 40px; - + display: flex; + align-items: stretch; + justify-content: space-around; /* FLEXBOX */ } diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..0396ba281 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 From c3698c51566f244e1ee377ba874c3abd3b378174 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Fri, 8 Dec 2023 19:54:14 +0300 Subject: [PATCH 26/48] flex align item's default property is stretch and gap, justify-content, align-items, flex-direction, flex-wrap, align-content are applied to flex container. And align-self , flex-grown, flex-shrink, flex-basis ,flex, order are applied to flex-item --- starter/04-CSS-Layouts/flexbox.html | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 962a89f7e..e536b9210 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -8,6 +8,8 @@ From 52aa3659253d17cce9e50ef7d35076ea5d8ab869 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Sun, 10 Dec 2023 00:13:47 +0300 Subject: [PATCH 27/48] The Flex property --- starter/04-CSS-Layouts/flexbox.html | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index e536b9210..185d919b7 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -6,6 +6,13 @@ Flexbox From 46a551ed55139e511f04fbfc878e40d18b245c18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCl=C5=9Fah=20D=C3=BCzg=C3=BCn?= <65841330+GulsahDuzgun@users.noreply.github.com> Date: Mon, 11 Dec 2023 10:35:42 +0300 Subject: [PATCH 28/48] flex-box layout is added --- starter/04-CSS-Layouts/index.html | 257 +++++++++++++++--------------- starter/04-CSS-Layouts/style.css | 65 +++++++- 2 files changed, 194 insertions(+), 128 deletions(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 0396ba281..03c0e4a17 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -9,12 +9,12 @@
@@ -30,132 +30,139 @@

📘 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

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

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

+

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

- - -

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

+ + +

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

+ + +