#2 finish section 2

alilosoft · Jul 26, 2022 · 5d626a8 · 5d626a8
1 parent 3634e65
commit 5d626a8
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 0 deletions.
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/blog.html b/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/blog.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Blog</title>
+  </head>
+  <body>
+    <h2>Blog Page</h2>
+    <a href="index.html">Home</a>
+  </body>
+</html>
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/content.txt b/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/content.txt
@@ -0,0 +1,34 @@
+📘 The Code Magazine
+
+The Basic Language of the Web: HTML
+
+Posted by Laura Jones on Monday, June 21st 2027
+
+All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web.
+
+In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.
+
+What is HTML?
+
+HTML stands for HyperText Markup Language. It's a markup language that web developers use to structure and describe the content of a webpage (not a programming language).
+
+HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand HTML and render HTML code as websites.
+
+In HTML, each element is made up of 3 parts:
+
+The opening tag
+The closing tag
+The actual element
+You can learn more at 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 Wordpress or Wix
+To build web applications
+To impress friends
+To have fun 😃
+
+Hopefully you learned something new here. See you next time!
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/author.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/author.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/challenges.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/challenges.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/laura-jones.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/laura-jones.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/post-img.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/post-img.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/related-1.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/related-1.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/related-2.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/related-2.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/related-3.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/img/related-3.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/index.html b/02-Udemy/-01-HTML-CSS-Jonas/Code/02-HTML-Fundamentals/index.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>The basic language of the Web: HTML</title>
+  </head>
+  <body>
+    <header>
+      <h1 style="font-family: 'Courier New'">👩‍💻 alilosoft.dev</h1>
+
+      <nav>
+        <a href="blog.html">Blog</a>
+        <a href="#">Challenges</a>
+        <a href="#">Flexbox</a>
+        <a href="#">CSS Grid</a>
+      </nav>
+    </header>
+
+    <article>
+      <header>
+        <h2>The Basic Language of the Web: HTML</h2>
+        <img src="img/author.jpg" alt="Laura Jones avatar" width="75" />
+        <p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
+        <img src="img/post-img.jpg" alt="HTML code on a screen" width="500" />
+      </header>
+
+      <p>
+        All modern websites and web applications are built using three
+        fundamental technologies: <em>HTML, CSS</em> and <em>JavaScript</em>.
+        These are the languages of the web.
+      </p>
+
+      <p>
+        In this post, let's focus on HTML. We will learn what HTML is all about,
+        and why you too should learn it.
+      </p>
+
+      <h3>What's HTML?</h3>
+
+      <p>
+        HTML stands for <strong>H</strong>yper<strong>T</strong>ext
+        <strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
+        language that web developers use to structure and describe the content
+        of a webpage (not a programming language).
+      </p>
+
+      <p>
+        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.
+      </p>
+
+      <p>In HTML, each element is made up of 3 parts:</p>
+
+      <ol>
+        <li>The opening tag</li>
+        <li>The closing tag</li>
+        <li>The content of element</li>
+      </ol>
+
+      <p>
+        You can learn more at the
+        <a
+          href="https://developer.mozilla.org/en-US/docs/Web/HTML"
+          target="_blank"
+          >MDN Web Docs</a
+        >.
+      </p>
+
+      <h3>Why should you learn HTML?</h3>
+
+      <p>
+        There are countless reasons for learning the fundamental language of the
+        web. Here are 5 of them:
+      </p>
+
+      <ul>
+        <li>To be able to use the fundamental web dev language</li>
+        <li>
+          To hand-craft beautiful websites instead of relying on tools like
+          <em>Wordpress</em> or <em>Wix</em>
+        </li>
+        <li>To build web applications</li>
+        <li>To impress friends</li>
+        <li>To have fun 😃</li>
+        <li>To make a lot of money 💰</li>
+      </ul>
+
+      <p>Hopefully you learned something new here. See you next time!</p>
+    </article>
+
+    <aside>
+      <h4>Related posts</h4>
+      <ul>
+        <li>
+          <img
+            src="img/related-1.jpg"
+            alt="related post 1"
+            height="75"
+            width="75"
+          />
+          <a href="#">How to learn Web Development</a>
+          <p>By Jonas Schmedtmann</p>
+        </li>
+        <li>
+          <img
+            src="img/related-2.jpg"
+            alt="related post 2"
+            height="75"
+            width="75"
+          />
+          <a href="#">The Unknown powers of CSS</a>
+          <p>By Jim Dillon</p>
+        </li>
+        <li>
+          <img
+            src="img/related-3.jpg"
+            alt="related post 3"
+            height="75"
+            width="75"
+          />
+          <a href="#">Why JavaScript is Awesome</a>
+          <p>By Matilda</p>
+        </li>
+      </ul>
+    </aside>
+
+    <footer>Copyright &copy; 2030 by the <em>Code Magazine</em>.</footer>
+  </body>
+</html>