From 8e9c4ac8364852b8ccd9b9066c13640aea8073da Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Fri, 28 Mar 2025 16:43:29 -0600 Subject: [PATCH 01/29] Add launch configuration for Microsoft Edge and create initial HTML page --- .vscode/launch.json | 46 +++++++++++++++++++++++++++++++++++++++++++++ 01-test/index.html | 17 +++++++++++++++++ 2 files changed, 63 insertions(+) create mode 100644 .vscode/launch.json create mode 100644 01-test/index.html diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..3bc8e2a56 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,46 @@ +{ + "configurations": [ + { + "type": "pwa-msedge", + "name": "Launch Microsoft Edge", + "request": "launch", + "runtimeArgs": ["--remote-debugging-port=9222"], + "url": "c:\\Users\\israe\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.8\\out\\startpage\\index.html", + "presentation": { + "hidden": true + } + }, + { + "type": "pwa-msedge", + "name": "Launch Microsoft Edge in headless mode", + "request": "launch", + "runtimeArgs": ["--headless", "--remote-debugging-port=9222"], + "url": "c:\\Users\\israe\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.8\\out\\startpage\\index.html", + "presentation": { + "hidden": true + } + }, + { + "type": "vscode-edge-devtools.debug", + "name": "Open Edge DevTools", + "request": "attach", + "url": "c:\\Users\\israe\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.8\\out\\startpage\\index.html", + "presentation": { + "hidden": true + } + } + ], + "compounds": [ + { + "name": "Launch Edge Headless and attach DevTools", + "configurations": [ + "Launch Microsoft Edge in headless mode", + "Open Edge DevTools" + ] + }, + { + "name": "Launch Edge and attach DevTools", + "configurations": ["Launch Microsoft Edge", "Open Edge DevTools"] + } + ] +} diff --git a/01-test/index.html b/01-test/index.html new file mode 100644 index 000000000..46003c3b0 --- /dev/null +++ b/01-test/index.html @@ -0,0 +1,17 @@ + + + + + + + My First website + + + +

Hello World!

+

My name is Israel Huerta F.

+

This is my first website .

+ + + +install google-chrome-stable_current_amd64.deb in ubuntu 20.04.6 LTS WSL \ No newline at end of file From 7fdcc5079726348f72975de2006f46d113d895e7 Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Fri, 28 Mar 2025 16:51:08 -0600 Subject: [PATCH 02/29] Add initial HTML structure for HTML fundamentals --- starter/02-HTML-Fundamentals/index.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 starter/02-HTML-Fundamentals/index.html diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..55ac48808 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,19 @@ + + + + + + + The Basic Language of the Web: HTML + + + +

The Basic Language of the Web: HTML

+

The Basic Language of the Web: HTML

+

The Basic Language of the Web: HTML

+

The Basic Language of the Web: HTML

+
The Basic Language of the Web: HTML
+
The Basic Language of the Web: HTML
+ + + \ No newline at end of file From 87136011f2970fd44425331c67caaa7393452d3f Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Fri, 28 Mar 2025 17:09:42 -0600 Subject: [PATCH 03/29] Revise index.html to enhance content and structure for HTML fundamentals --- starter/02-HTML-Fundamentals/index.html | 56 +++++++++++++++++++++++-- 1 file changed, 53 insertions(+), 3 deletions(-) diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 55ac48808..15b49fd08 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -8,12 +8,62 @@ -

The Basic Language of the Web: HTML

+ + +

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

+ +

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

Why should you learn HTML?

+ + + The opening tag + The closing tag + The actual element + You can learn more at the 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!

\ No newline at end of file From e433ef6cb5df784ae9f8942d68d8f251a20bd8d6 Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Sat, 29 Mar 2025 12:03:19 -0600 Subject: [PATCH 04/29] Enhance index.html with additional content and add server.js for local hosting --- starter/02-HTML-Fundamentals/index.html | 8 +++- starter/02-HTML-Fundamentals/server.js | 53 +++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 2 deletions(-) create mode 100644 starter/02-HTML-Fundamentals/server.js diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 15b49fd08..4a0cb3d66 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -17,9 +17,12 @@
The Basic Language of the Web: HTML
-->

📘 The Code Magazine

+

The Basic Language of the Web: HTML

+ Laura Jones

Posted by Laura Jones on Monday, June 21st 2027

-

The Basic Language of the Web: HTML

+ Post image +

All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. @@ -50,7 +53,8 @@

Why should you learn HTML?

The opening tag The closing tag The actual element - You can learn more at the MDN Web Docs. + You can learn more at the MDN Web + Docs. Why should you learn HTML? diff --git a/starter/02-HTML-Fundamentals/server.js b/starter/02-HTML-Fundamentals/server.js new file mode 100644 index 000000000..86f6017f0 --- /dev/null +++ b/starter/02-HTML-Fundamentals/server.js @@ -0,0 +1,53 @@ +const http = require('http'); +const fs = require('fs'); +const path = require('path'); + +const server = http.createServer((req, res) => { + // Determine the file path based on the request URL + const filePath = path.join( + __dirname, + req.url === '/' ? 'index.html' : req.url + ); + + // Determine the content type based on the file extension + const extname = path.extname(filePath); + let contentType = 'text/html'; + switch (extname) { + case '.jpg': + case '.jpeg': + contentType = 'image/jpeg'; + break; + case '.png': + contentType = 'image/png'; + break; + case '.css': + contentType = 'text/css'; + break; + case '.js': + contentType = 'application/javascript'; + break; + } + + // Read and serve the file + fs.readFile(filePath, (err, data) => { + if (err) { + if (err.code === 'ENOENT') { + // File not found + res.writeHead(404, { 'Content-Type': 'text/plain' }); + res.end('404: File Not Found'); + } else { + // Other server error + res.writeHead(500, { 'Content-Type': 'text/plain' }); + res.end('500: Internal Server Error'); + } + } else { + // Serve the file with the correct content type + res.writeHead(200, { 'Content-Type': contentType }); + res.end(data); + } + }); +}); + +server.listen(3001, () => { + console.log('Server running at http://localhost:3001'); +}); From dcd8b66fa2f372a798ac2a0d10de716b2c5d7d7e Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Tue, 1 Apr 2025 07:29:09 -0600 Subject: [PATCH 05/29] Refactor index.html structure and add blog.html for navigation --- starter/02-HTML-Fundamentals/blog.html | 15 +++ starter/02-HTML-Fundamentals/index.html | 126 +++++++++++++----------- 2 files changed, 86 insertions(+), 55 deletions(-) create mode 100644 starter/02-HTML-Fundamentals/blog.html diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..5f135013b --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,15 @@ + + + + + + + BLOG + + + +

BLOG

+ Back to home + + + \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 4a0cb3d66..51559b562 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -14,60 +14,76 @@

The Basic Language of the Web: HTML

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

- Laura Jones -

Posted by Laura Jones on Monday, June 21st 2027

- - Post image - - -

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

Why should you learn HTML?

- - - The opening tag - The closing tag - The actual element - You can learn more at the 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!

+
+

📘 The Code Magazine

+ + +
+ +
+
+

The Basic Language of the Web: HTML

+ Laura Jones +

Posted by Laura Jones on Monday, June 21st 2027

+ + Post image +
+ + +

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

Why should you learn HTML?

+ + + The opening tag + The closing tag + The actual element + You can learn more at the 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 The Code Magazine. All rights reserved. +
\ No newline at end of file From d60ebe33a0bee2ce7d356e359eb0a1082df5a0f1 Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Tue, 1 Apr 2025 08:34:15 -0600 Subject: [PATCH 06/29] Remove unused image files and update image paths in index.html --- .../{ => 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 | 24 ++++++++++++++++-- 7 files changed, 22 insertions(+), 2 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%) 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 index 51559b562..14c177ab7 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -28,10 +28,10 @@

📘 The Code Magazine

The Basic Language of the Web: HTML

- Laura Jones + Laura Jones

Posted by Laura Jones on Monday, June 21st 2027

- Post image + Post image
@@ -82,6 +82,26 @@

Why should you learn HTML?

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

+
Copyright © 2027 The Code Magazine. All rights reserved.
From 2dfa1187e2deb8cbada443e8e88cbbd0a5ab15ce Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Wed, 2 Apr 2025 09:19:11 -0600 Subject: [PATCH 07/29] Add challenge-2.html for HTML fundamentals with product details and layout --- starter/02-HTML-Fundamentals/challenge-2.html | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 starter/02-HTML-Fundamentals/challenge-2.html diff --git a/starter/02-HTML-Fundamentals/challenge-2.html b/starter/02-HTML-Fundamentals/challenge-2.html new file mode 100644 index 000000000..9c963ab4d --- /dev/null +++ b/starter/02-HTML-Fundamentals/challenge-2.html @@ -0,0 +1,33 @@ + + + + + + + Section 2 - Challenge #2 + + + +
+
+

Converse Chuck Taylor All Star Low Top

+
+ Converse Chuck Taylor All Star Low Top +

Price: $50.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
    • +
+ +
+ + + + + \ No newline at end of file From 23eea679445e6a88985d07d45a6750148c141109 Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Thu, 3 Apr 2025 07:12:43 -0600 Subject: [PATCH 08/29] Add CSS styles for improved layout and link stylesheet in index.html --- starter/02-HTML-Fundamentals/css/styles.css | 17 +++++++++++++++++ starter/02-HTML-Fundamentals/index.html | 1 + 2 files changed, 18 insertions(+) create mode 100644 starter/02-HTML-Fundamentals/css/styles.css diff --git a/starter/02-HTML-Fundamentals/css/styles.css b/starter/02-HTML-Fundamentals/css/styles.css new file mode 100644 index 000000000..b613879a6 --- /dev/null +++ b/starter/02-HTML-Fundamentals/css/styles.css @@ -0,0 +1,17 @@ +h1 { + font-size: 26px; + font-family: sans-serif; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + font-family: sans-serif; +} + +p { + font-size: 22px; + font-family: sans-serif; + line-height: 1.5; +} diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 14c177ab7..943d648ee 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -5,6 +5,7 @@ The Basic Language of the Web: HTML + From e9c792ea33b36c21c9025aca0d2dcdbb4ae475bc Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Thu, 3 Apr 2025 07:13:21 -0600 Subject: [PATCH 09/29] Add styles for h3 elements to enhance typography in styles.css --- starter/02-HTML-Fundamentals/css/styles.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/starter/02-HTML-Fundamentals/css/styles.css b/starter/02-HTML-Fundamentals/css/styles.css index b613879a6..fcd849d91 100644 --- a/starter/02-HTML-Fundamentals/css/styles.css +++ b/starter/02-HTML-Fundamentals/css/styles.css @@ -10,6 +10,11 @@ h2 { font-family: sans-serif; } +h3 { + font-size: 30px; + font-family: sans-serif; +} + p { font-size: 22px; font-family: sans-serif; From ce840c06ab56ad00b7f2b0701b5cdcfff4603908 Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Thu, 3 Apr 2025 07:14:40 -0600 Subject: [PATCH 10/29] Add styles for h4 elements to enhance typography in styles.css --- starter/02-HTML-Fundamentals/css/styles.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/starter/02-HTML-Fundamentals/css/styles.css b/starter/02-HTML-Fundamentals/css/styles.css index fcd849d91..bae43104b 100644 --- a/starter/02-HTML-Fundamentals/css/styles.css +++ b/starter/02-HTML-Fundamentals/css/styles.css @@ -15,6 +15,13 @@ h3 { 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; From 3f40f8137ce1cfac83719d07714eb49930c11615 Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Thu, 3 Apr 2025 07:15:48 -0600 Subject: [PATCH 11/29] Add styles for list items to enhance typography in styles.css --- starter/02-HTML-Fundamentals/css/styles.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/starter/02-HTML-Fundamentals/css/styles.css b/starter/02-HTML-Fundamentals/css/styles.css index bae43104b..4bed9d5df 100644 --- a/starter/02-HTML-Fundamentals/css/styles.css +++ b/starter/02-HTML-Fundamentals/css/styles.css @@ -27,3 +27,8 @@ p { font-family: sans-serif; line-height: 1.5; } + +li { + font-size: 20px; + font-family: sans-serif; +} From 9b8048df985132b7bbfc162d000c4102b351ca8c Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Thu, 3 Apr 2025 07:17:52 -0600 Subject: [PATCH 12/29] Refactor typography styles to apply a consistent font-family across headings, paragraphs, and list items in styles.css --- starter/02-HTML-Fundamentals/css/styles.css | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/starter/02-HTML-Fundamentals/css/styles.css b/starter/02-HTML-Fundamentals/css/styles.css index 4bed9d5df..8db199637 100644 --- a/starter/02-HTML-Fundamentals/css/styles.css +++ b/starter/02-HTML-Fundamentals/css/styles.css @@ -1,34 +1,36 @@ +h1, +h2, +h3, +h4, +p, +li { + font-family: sans-serif; +} h1 { 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; } From 7b6c035ce48ea4d1a8f4fb3606bee77f35978560 Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Thu, 3 Apr 2025 07:29:08 -0600 Subject: [PATCH 13/29] Wrap copyright notice in a paragraph tag for improved semantic structure in index.html --- starter/02-HTML-Fundamentals/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 943d648ee..e545ebe68 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -104,7 +104,9 @@

Related posts

- Copyright © 2027 The Code Magazine. All rights reserved. +

+ Copyright © 2027 The Code Magazine. All rights reserved. +

\ No newline at end of file From aa8e250ab608e17d6c5e4ad92f44ee147585674f Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Thu, 3 Apr 2025 07:31:55 -0600 Subject: [PATCH 14/29] Add styles for footer and article header paragraphs to enhance typography in styles.css --- starter/02-HTML-Fundamentals/css/styles.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/starter/02-HTML-Fundamentals/css/styles.css b/starter/02-HTML-Fundamentals/css/styles.css index 8db199637..6b656b80d 100644 --- a/starter/02-HTML-Fundamentals/css/styles.css +++ b/starter/02-HTML-Fundamentals/css/styles.css @@ -34,3 +34,12 @@ p { li { font-size: 20px; } + +footer p { + font-size: 16px; + text-align: center; +} + +article header p { + font-style: italic; +} From 2c6a61a43f9801687524e4b08036cb7394898c79 Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Fri, 4 Apr 2025 06:17:45 -0600 Subject: [PATCH 15/29] Refactor footer and author paragraph elements for improved semantic structure and styling in index.html and styles.css --- starter/02-HTML-Fundamentals/css/styles.css | 15 ++++++++++++--- starter/02-HTML-Fundamentals/index.html | 4 ++-- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/starter/02-HTML-Fundamentals/css/styles.css b/starter/02-HTML-Fundamentals/css/styles.css index 6b656b80d..561ea59e0 100644 --- a/starter/02-HTML-Fundamentals/css/styles.css +++ b/starter/02-HTML-Fundamentals/css/styles.css @@ -35,11 +35,20 @@ li { font-size: 20px; } -footer p { +/* footer p { font-size: 16px; text-align: center; -} +} */ + +/* article header p { + font-style: italic; +} */ -article header p { +#author { font-style: italic; + font-size: 18px; +} +#copyright { + font-size: 16px; + text-align: center; } diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index e545ebe68..680911e1e 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -30,7 +30,7 @@

📘 The Code Magazine

The Basic Language of the Web: HTML

Laura Jones -

Posted by Laura Jones on Monday, June 21st 2027

+

Posted by Laura Jones on Monday, June 21st 2027

Post image
@@ -104,7 +104,7 @@

Related posts

-

+

From 1fb556a2ed48586cb83ed478967d710dfe1b9b4e Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Fri, 4 Apr 2025 06:20:35 -0600 Subject: [PATCH 16/29] Add related-author class for improved styling of related post links in index.html and styles.css --- starter/02-HTML-Fundamentals/css/styles.css | 5 +++++ starter/02-HTML-Fundamentals/index.html | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/starter/02-HTML-Fundamentals/css/styles.css b/starter/02-HTML-Fundamentals/css/styles.css index 561ea59e0..0269f0bc9 100644 --- a/starter/02-HTML-Fundamentals/css/styles.css +++ b/starter/02-HTML-Fundamentals/css/styles.css @@ -52,3 +52,8 @@ li { font-size: 16px; text-align: center; } + +.related-author { + font-size: 18px; + font-weight: bold; +} diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 680911e1e..7a6fac9da 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -88,17 +88,17 @@

Related posts

From 25b03f049b737e8fb3a0d106c5480369eea8c728 Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Fri, 4 Apr 2025 06:22:47 -0600 Subject: [PATCH 17/29] Add related class to improve styling of related posts in index.html and styles.css --- starter/02-HTML-Fundamentals/css/styles.css | 4 ++++ starter/02-HTML-Fundamentals/index.html | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/starter/02-HTML-Fundamentals/css/styles.css b/starter/02-HTML-Fundamentals/css/styles.css index 0269f0bc9..529fee127 100644 --- a/starter/02-HTML-Fundamentals/css/styles.css +++ b/starter/02-HTML-Fundamentals/css/styles.css @@ -57,3 +57,7 @@ li { font-size: 18px; font-weight: bold; } + +.related { + list-style: none; +} diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 7a6fac9da..7a38b62b7 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -85,10 +85,10 @@

Why should you learn HTML?

-

Copyright © 2027 The Code Magazine. All rights reserved.

From af48ab0b8bddd7af93bdbbafbf55a0e4e7d29e64 Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Thu, 10 Apr 2025 15:04:04 -0600 Subject: [PATCH 28/29] Refactor HTML structure and enhance CSS styles for product display --- .../.vscode/settings.json | 3 + starter/02-HTML-Fundamentals/challenge-2.html | 17 +++--- .../02-HTML-Fundamentals/css/challenge-2.css | 60 +++++++++++++++++++ starter/02-HTML-Fundamentals/css/styles.css | 15 ++--- 4 files changed, 80 insertions(+), 15 deletions(-) create mode 100644 starter/02-HTML-Fundamentals/.vscode/settings.json create mode 100644 starter/02-HTML-Fundamentals/css/challenge-2.css diff --git a/starter/02-HTML-Fundamentals/.vscode/settings.json b/starter/02-HTML-Fundamentals/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/starter/02-HTML-Fundamentals/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/starter/02-HTML-Fundamentals/challenge-2.html b/starter/02-HTML-Fundamentals/challenge-2.html index 9c963ab4d..7a34d805c 100644 --- a/starter/02-HTML-Fundamentals/challenge-2.html +++ b/starter/02-HTML-Fundamentals/challenge-2.html @@ -5,26 +5,27 @@ Section 2 - Challenge #2 + -
+
-

Converse Chuck Taylor All Star Low Top

+

Converse Chuck Taylor All Star Low Top

Converse Chuck Taylor All Star Low Top -

Price: $50.00

+

Price: $50.00

-

Free shipping

+

Free shipping

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

-

More information →

-

Product details

-
    +

    More information →

    +

    Product details

    +
    • Lightweight, durable canvas sneaker
    • Lightly padded footbed for added comfort
    • Iconic Chuck Taylor ankle patch
    - +
diff --git a/starter/02-HTML-Fundamentals/css/challenge-2.css b/starter/02-HTML-Fundamentals/css/challenge-2.css new file mode 100644 index 000000000..762742272 --- /dev/null +++ b/starter/02-HTML-Fundamentals/css/challenge-2.css @@ -0,0 +1,60 @@ +body { + font-family: sans-serif; + line-height: 1.4; +} + +.product { + border: 4px solid black; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; +} + +.price { + font-size: 24px; +} + +.ship { + font-size: 12px; + color: #777; + font-weight: bold; + text-transform: uppercase; +} + +.more-info:link, +.more-info:visited { + color: black; + text-decoration: none; +} + +.more-info:hover, +.more-info:active { + text-decoration: underline; +} + +.details-title { + text-transform: uppercase; + font-size: 16px; +} +.details-list { + list-style: square; +} +.add-cart { + background-color: #000; + color: #fff; + border: none; + padding: 10px 20px; + cursor: pointer; + text-transform: uppercase; + font-size: 16px; + cursor: pointer; +} + +.add-cart:hover { + background-color: #fff; + color: #000; +} diff --git a/starter/02-HTML-Fundamentals/css/styles.css b/starter/02-HTML-Fundamentals/css/styles.css index 6f5d2b640..d39933616 100644 --- a/starter/02-HTML-Fundamentals/css/styles.css +++ b/starter/02-HTML-Fundamentals/css/styles.css @@ -1,11 +1,8 @@ -h1, -h2, -h3, -h4, -p, -li { - font-family: sans-serif; +* { +} +body { color: #444; + font-family: sans-serif; } h1, @@ -134,3 +131,7 @@ a:active { footer p { color: green; } + +nav { + font-size: 18px; +} From 8632b5c494ee782f78b9b74c14618653ef7f9e6b Mon Sep 17 00:00:00 2001 From: Israel Huerta Date: Mon, 14 Apr 2025 10:10:04 -0600 Subject: [PATCH 29/29] Refactor HTML structure and improve CSS styles for better layout and readability --- starter/02-HTML-Fundamentals/css/styles.css | 67 +++++++-- starter/02-HTML-Fundamentals/index.html | 153 ++++++++++---------- 2 files changed, 134 insertions(+), 86 deletions(-) diff --git a/starter/02-HTML-Fundamentals/css/styles.css b/starter/02-HTML-Fundamentals/css/styles.css index d39933616..fe5e7465e 100644 --- a/starter/02-HTML-Fundamentals/css/styles.css +++ b/starter/02-HTML-Fundamentals/css/styles.css @@ -1,8 +1,47 @@ * { + margin: 0; + padding: 0; } + body { color: #444; font-family: sans-serif; + + border-top: 10px solid #1098ad; +} + +.container { + width: 800px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + margin-bottom: 60px; + height: 80px; +} + +nav { + font-size: 18px; +} + +article { + margin-bottom: 60px; +} +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + background-color: #f7f7f7; + border: 5px solid #1098ad; + padding: 50px 0; + width: 500px; } h1, @@ -18,10 +57,13 @@ h1 { h2 { font-size: 40px; + margin-bottom: 30px; } h3 { font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; } h4 { @@ -33,10 +75,21 @@ h4 { 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 { @@ -66,15 +119,6 @@ li { list-style: none; } -.main-header { - background-color: #f7f7f7; -} - -aside { - background-color: #f7f7f7; - border: 5px solid #1098ad; -} - body { background-color: #f7f7f7; } @@ -132,6 +176,7 @@ footer p { color: green; } -nav { - font-size: 18px; +.post-image { + width: 100%; + height: auto; } diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index c0cc919a1..8d63a1898 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -15,91 +15,94 @@

The Basic Language of the Web: HTML

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 Code Magazine

-
-
-

The Basic Language of the Web: HTML

- Laura Jones -

Posted by Laura Jones on Monday, June 21st 2027

- - Post image +
+
+
+

The Basic Language of the Web: HTML

+ Laura Jones +

Posted by Laura Jones on Monday, June 21st 2027

+ + Post image +
+ -

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.

+

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?

+

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.

+

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:

+

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

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

+ You can learn more at the 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 😃
    • -
+
    +
  • 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 The Code Magazine. All rights reserved. -

-
+

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

+
+ + + \ No newline at end of file