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 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/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/challenge-2.html b/starter/02-HTML-Fundamentals/challenge-2.html new file mode 100644 index 000000000..7a34d805c --- /dev/null +++ b/starter/02-HTML-Fundamentals/challenge-2.html @@ -0,0 +1,34 @@ + + + + + + + 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

+ + +
+ + + + + \ No newline at end of file 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 new file mode 100644 index 000000000..fe5e7465e --- /dev/null +++ b/starter/02-HTML-Fundamentals/css/styles.css @@ -0,0 +1,182 @@ +* { + 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, +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; +} +li:last-child { + margin-bottom: 0; +} + +/* footer p { + font-size: 16px; + text-align: center; +} */ + +/* article header p { + font-style: italic; +} */ + +#author { + font-style: italic; + font-size: 18px; +} +#copyright { + font-size: 16px; + text-align: center; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; +} + +body { + background-color: #f7f7f7; +} + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +/*Misconception, this won't work*/ +article p:first-child { + color: red; +} + +/*Styling links*/ +a { + color: red; +} +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +/* Resolving conflicts*/ +#copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} +footer p { + color: green; +} + +.post-image { + width: 100%; + height: auto; +} 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..8d63a1898 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,108 @@ + + + + + + + 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. +
+

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

+ + + +

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

+
+ + +
+ + \ No newline at end of file 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'); +});