jonasschmedtmann · Dathasai1234 · Jul 2, 2022 · Jul 3, 2022 · Jul 3, 2022 · Jul 4, 2022
diff --git a/datha.html b/datha.html
@@ -0,0 +1,46 @@
+<article class="product">
+ <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
+ <!-- <div class="container"> -->
+ <img
+ src="https://i.imgur.com/ZrTU3VK.jpeg"
+ alt="Chuck Taylor All Star Shoe"
+ height="250"
+ width="250"
+ class="product-img"
+ />
+ <div class="product-info">
+ <div class="product-price">
+ <p class="price"><strong>$65.00</strong></p>
+ <p class="shipping">Free shipping</p>
+ </div>
+ <p class="sale">Sale</p>
+
+ <p class="product-description">
+ Ready to dress up or down, these classic canvas Chucks are an everyday
+ wardrobe staple.
+ </p>
+ <a href="https://converse.com" target="_blank" class="more-info"
+ >More information &rarr;</a
+ >
+
+ <div class="product-colors">
+ <div class="color"></div>
+ <div class="color color-blue"></div>
+ <div class="color color-red"></div>
+ <div class="color color-yellow"></div>
+ <div class="color color-green"></div>
+ <div class="color color-brown"></div>
+ </div>
+ </div>
+
+ <div class="product-details">
+ <h3 class="details-title">Product details</h3>
+ <ul class="details-list">
+ <li>Lightweight, durable canvas sneaker</li>
+ <li>Lightly padded footbed for added comfort</li>
+ <li>Iconic Chuck Taylor ankle patch.</li>
+ </ul>
+ </div>
+ <!-- </div> -->
+ <button class="add-cart">Add to cart</button>
+</article>
diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>BLOG</title>
+ </head>
+ <body>
+ <h2>BLOG</h2>
+ <a href="index.html">Back to home</a>
+ </body>
+</html>
diff --git a/starter/02-HTML-Fundamentals/challenges.jpg → ...r/02-HTML-Fundamentals/img/challenges.jpg b/starter/02-HTML-Fundamentals/challenges.jpg → ...r/02-HTML-Fundamentals/img/challenges.jpg
diff --git a/starter/02-HTML-Fundamentals/laura-jones.jpg → .../02-HTML-Fundamentals/img/laura-jones.jpg b/starter/02-HTML-Fundamentals/laura-jones.jpg → .../02-HTML-Fundamentals/img/laura-jones.jpg
diff --git a/starter/02-HTML-Fundamentals/post-img.jpg → ...ter/02-HTML-Fundamentals/img/post-img.jpg b/starter/02-HTML-Fundamentals/post-img.jpg → ...ter/02-HTML-Fundamentals/img/post-img.jpg
diff --git a/starter/02-HTML-Fundamentals/related-1.jpg → ...er/02-HTML-Fundamentals/img/related-1.jpg b/starter/02-HTML-Fundamentals/related-1.jpg → ...er/02-HTML-Fundamentals/img/related-1.jpg
diff --git a/starter/02-HTML-Fundamentals/related-2.jpg → ...er/02-HTML-Fundamentals/img/related-2.jpg b/starter/02-HTML-Fundamentals/related-2.jpg → ...er/02-HTML-Fundamentals/img/related-2.jpg
diff --git a/starter/02-HTML-Fundamentals/related-3.jpg → ...er/02-HTML-Fundamentals/img/related-3.jpg b/starter/02-HTML-Fundamentals/related-3.jpg → ...er/02-HTML-Fundamentals/img/related-3.jpg
diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <title>The Basic Language of the Web: HTML</title>
+ </head>
+
+ <body>
+ <!--
+ <h1>The Basic Language of the Web: HTML</h1>
+ <h2>The Basic Language of the Web: HTML</h2>
+ <h3>The Basic Language of the Web: HTML</h3>
+ <h4>The Basic Language of the Web: HTML</h4>
+ <h5>The Basic Language of the Web: HTML</h5>
+ <h6>The Basic Language of the Web: HTML</h6>
+ -->
+
+ <header>
+ <h1>📘 The Code Magazine</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/laura-jones.jpg"
+ alt="Headshot of Laura Jones"
+ height="50"
+ width="50"
+ />
+
+ <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"
+ height="200"
+ />
+ </header>
+
+ <p>
+ All modern websites and web applications are built using three
+ <em>fundamental</em>
+ technologies: HTML, CSS and JavaScript. 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 is 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 actual element</li>
+ </ol>
+
+ <p>
+ You can learn more at
+ <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
+ Worpress or Wix
+ </li>
+ <li>To build web applications</li>
+ <li>To impress friends</li>
+ <li>To have fun 😃</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="Person programming"
+ width="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="Lightning" width="75" heigth="75" />
+ <a href="#">The Unknown Powers of CSS</a>
+ <p>By Jim Dillon</p>
+ </li>
+ <li>
+ <img
+ src="img/related-3.jpg"
+ alt="JavaScript code on a screen"
+ width="75"
+ height="75"
+ />
+ <a href="#">Why JavaScript is Awesome</a>
+ <p>By Matilda</p>
+ </li>
+ </ul>
+ </aside>
+
+ <footer>Copyright &copy; 2027 by The Code Magazine.</footer>
+ </body>
+</html>