jonasschmedtmann · Ashes814 · Oct 31, 2022 · Oct 31, 2022 · Nov 1, 2022 · Nov 1, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/final/.DS_Store b/final/.DS_Store
diff --git a/starter/.DS_Store b/starter/.DS_Store
diff --git a/starter/01-Test/index.html b/starter/01-Test/index.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>我是你妈</title>
+  </head>
+  <body>
+    <h1>我是你妈</h1>
+    <p>你妈是我妈，我妈是你爹，你是我的爹</p>
+  </body>
+</html>
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</a>
+  </body>
+</html>
diff --git a/starter/02-HTML-Fundamentals/challenge.html b/starter/02-HTML-Fundamentals/challenge.html
@@ -0,0 +1,55 @@
+<!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>Challenges</title>
+    <link href="stylec.css" rel="stylesheet" />
+  </head>
+  <div class="container clearfix">
+    <body>
+      <article>
+        <h2 class="title">Converse Chuck Taylor All Star Low Top</h2>
+
+        <img
+          class="part0"
+          src="img/challenges.jpg"
+          width="240px"
+          height="240px"
+          alt="图片炸了"
+        />
+        <div class="part1">
+          <div class="little-row">
+            <p class="money"><b>$65.00</b></p>
+            <p class="fshi">Free shipping</p>
+          </div>
+          <div class="clear"></div>
+          <p>
+            Ready to dress up or down, these classic canvas Chucks are an
+            everyday wardrobe staple
+          </p>
+          <a class="more" href="#">More information &rarr;</a>
+
+          <div class="color-bars">
+            <div class="color-bar color-1">&nbsp</div>
+            <div class="color-bar color-2">&nbsp</div>
+            <div class="color-bar color-3">&nbsp</div>
+            <div class="color-bar color-4">&nbsp</div>
+            <div class="color-bar color-5">&nbsp</div>
+            <div class="color-bar color-6">&nbsp</div>
+          </div>
+        </div>
+        <div class="part2">
+          <h3 class="product-details">Product details</h3>
+          <ul class="details">
+            <li>Lightweight, durable canvas sneaker</li>
+            <li>Lightly padded footbed for added comfort</li>
+            <li>Iconic Chuck Taylor ankle patch</li>
+          </ul>
+        </div>
+        <button class="add-to-cart">Add to cart</button>
+      </article>
+    </body>
+  </div>
+</html>
diff --git a/starter/02-HTML-Fundamentals/content.txt b/starter/02-HTML-Fundamentals/content.txt
@@ -4,31 +4,17 @@ 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 Worpress 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/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,101 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>HTML第一课：基础级别（嘿嘿）</title>
+  </head>
+
+  <body>
+    <header>
+      <h1>📘 The Code Magazines</h1>
+
+      <nav>
+        <a href="blog.html" target="_blank">Blog</a>
+        <a href="#" target="_blank">Challenage</a>
+        <a href="#" target="_blank">Flexbox</a>
+        <a href="#" target="_blank">CSS Grid</a>
+      </nav>
+    </header>
+
+    <article>
+      <h2>The Basic Language of the Web: HTML</h2>
+      <img src="img/laura-jones.jpg" alt="图片炸了" width="50" height="50" />
+      <p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
+      <img src="img/post-img.jpg" alt="图片炸了" width="500" height="200" />
+      <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 <b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>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 the
+        <a href="https://www.baidu.com" 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="图片炸了" width="50" hight="50" />
+          <a href="#">How to Learn Web Development</a>
+          <p>By Jonas Schmedtmann</p>
+        </li>
+
+        <li>
+          <img src="img/related-2.jpg" alt="图片炸了" width="50" hight="50" />
+          <a href="#">The Unknown Powers of CSS</a>
+          <p>By Jim Dillon</p>
+        </li>
+
+        <li>
+          <img src="img/related-3.jpg" alt="图片炸了" width="50" hight="50" />
+          <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>