Skip to content

Commit 37a5042

Browse files
张欧文张欧文
张欧文
authored and
张欧文
committed
finish box model part
1 parent 7ca5176 commit 37a5042

File tree

2 files changed

+142
-130
lines changed

2 files changed

+142
-130
lines changed

‎starter/03-CSS-Fundamentals/index.html

Lines changed: 137 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -16,141 +16,148 @@ <h5>The Basic Language of the Web: HTML</h5>
1616
<h6>The Basic Language of the Web: HTML</h6>
1717
-->
1818

19-
<header class="main-header">
20-
<h1>📘 The Code Magazine</h1>
21-
22-
<nav>
23-
<a href="blog.html">Blog</a>
24-
<a href="#">Challenges</a>
25-
<a href="#">Flexbox</a>
26-
<a href="#">CSS Grid</a>
27-
</nav>
28-
</header>
29-
30-
<article>
31-
<header class="post-header">
32-
<h2>The Basic Language of the Web: HTML</h2>
33-
34-
<img
35-
src="img/laura-jones.jpg"
36-
alt="Headshot of Laura Jones"
37-
height="50"
38-
width="50"
39-
/>
40-
41-
<p id="author">
42-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
43-
</p>
44-
45-
<img
46-
src="img/post-img.jpg"
47-
alt="HTML code on a screen"
48-
width="500"
49-
height="200"
50-
class="post-img"
51-
/>
19+
<div class="container">
20+
<header class="main-header">
21+
<h1>📘 The Code Magazine</h1>
22+
23+
<nav>
24+
<a href="blog.html">Blog</a>
25+
<a href="#">Challenges</a>
26+
<a href="#">Flexbox</a>
27+
<a href="#">CSS Grid</a>
28+
</nav>
5229
</header>
5330

54-
<p>
55-
All modern websites and web applications are built using three
56-
<em>fundamental</em>
57-
technologies: HTML, CSS and JavaScript. These are the languages of the
58-
web.
59-
</p>
60-
61-
<p>
62-
In this post, let's focus on HTML. We will learn what HTML is all about,
63-
and why you too should learn it.
64-
</p>
65-
66-
<h3>What is HTML?</h3>
67-
<p>
68-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
69-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
70-
language that web developers use to structure and describe the content
71-
of a webpage (not a programming language).
72-
</p>
73-
<p>
74-
HTML consists of elements that describe different types of content:
75-
paragraphs, links, headings, images, video, etc. Web browsers understand
76-
HTML and render HTML code as websites.
77-
</p>
78-
<p>In HTML, each element is made up of 3 parts:</p>
79-
80-
<ol>
81-
<li class="first-li">The opening tag</li>
82-
<li>The closing tag</li>
83-
<li>The actual element</li>
84-
</ol>
85-
86-
<p>
87-
You can learn more at
88-
<a
89-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
90-
target="_blank"
91-
>MDN Web Docs</a
92-
>.
93-
</p>
94-
95-
<h3>Why should you learn HTML?</h3>
96-
97-
<p>
98-
There are countless reasons for learning the fundamental language of the
99-
web. Here are 5 of them:
100-
</p>
101-
102-
<ul>
103-
<li class="first-li">
104-
To be able to use the fundamental web dev language
105-
</li>
106-
<li>
107-
To hand-craft beautiful websites instead of relying on tools like
108-
Worpress or Wix
109-
</li>
110-
<li>To build web applications</li>
111-
<li>To impress friends</li>
112-
<li>To have fun 😃</li>
113-
</ul>
114-
115-
<p>Hopefully you learned something new here. See you next time!</p>
116-
</article>
117-
118-
<aside>
119-
<h4><strong>Related posts</strong></h4>
120-
121-
<ul class="related">
122-
<li class="first-li">
31+
<article>
32+
<header class="post-header">
33+
<h2>The Basic Language of the Web: HTML</h2>
34+
12335
<img
124-
src="img/related-1.jpg"
125-
alt="Person programming"
126-
width="75"
127-
width="75"
36+
src="img/laura-jones.jpg"
37+
alt="Headshot of Laura Jones"
38+
height="50"
39+
width="50"
12840
/>
129-
<a href="#">How to Learn Web Development</a>
130-
<p class="related-author">By Jonas Schmedtmann</p>
131-
</li>
132-
<li>
133-
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
134-
<a href="#">The Unknown Powers of CSS</a>
135-
<p class="related-author">By Jim Dillon</p>
136-
</li>
137-
<li>
41+
42+
<p id="author">
43+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
44+
</p>
45+
13846
<img
139-
src="img/related-3.jpg"
140-
alt="JavaScript code on a screen"
141-
width="75"
142-
height="75"
47+
src="img/post-img.jpg"
48+
alt="HTML code on a screen"
49+
width="500"
50+
height="200"
51+
class="post-img"
14352
/>
144-
<a href="#">Why JavaScript is Awesome</a>
145-
<p class="related-author">By Matilda</p>
146-
</li>
147-
</ul>
148-
</aside>
149-
150-
<footer>
151-
<p id="copyright" class="copyright text">
152-
Copyright &copy; 2027 by The Code Magazine.
153-
</p>
154-
</footer>
53+
</header>
54+
55+
<p>
56+
All modern websites and web applications are built using three
57+
<em>fundamental</em>
58+
technologies: HTML, CSS and JavaScript. These are the languages of the
59+
web.
60+
</p>
61+
62+
<p>
63+
In this post, let's focus on HTML. We will learn what HTML is all
64+
about, and why you too should learn it.
65+
</p>
66+
67+
<h3>What is HTML?</h3>
68+
<p>
69+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
70+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
71+
language that web developers use to structure and describe the content
72+
of a webpage (not a programming language).
73+
</p>
74+
<p>
75+
HTML consists of elements that describe different types of content:
76+
paragraphs, links, headings, images, video, etc. Web browsers
77+
understand HTML and render HTML code as websites.
78+
</p>
79+
<p>In HTML, each element is made up of 3 parts:</p>
80+
81+
<ol>
82+
<li class="first-li">The opening tag</li>
83+
<li>The closing tag</li>
84+
<li>The actual element</li>
85+
</ol>
86+
87+
<p>
88+
You can learn more at
89+
<a
90+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
91+
target="_blank"
92+
>MDN Web Docs</a
93+
>.
94+
</p>
95+
96+
<h3>Why should you learn HTML?</h3>
97+
98+
<p>
99+
There are countless reasons for learning the fundamental language of
100+
the web. Here are 5 of them:
101+
</p>
102+
103+
<ul>
104+
<li class="first-li">
105+
To be able to use the fundamental web dev language
106+
</li>
107+
<li>
108+
To hand-craft beautiful websites instead of relying on tools like
109+
Worpress or Wix
110+
</li>
111+
<li>To build web applications</li>
112+
<li>To impress friends</li>
113+
<li>To have fun 😃</li>
114+
</ul>
115+
116+
<p>Hopefully you learned something new here. See you next time!</p>
117+
</article>
118+
119+
<aside>
120+
<h4><strong>Related posts</strong></h4>
121+
122+
<ul class="related">
123+
<li class="first-li">
124+
<img
125+
src="img/related-1.jpg"
126+
alt="Person programming"
127+
width="75"
128+
width="75"
129+
/>
130+
<a href="#">How to Learn Web Development</a>
131+
<p class="related-author">By Jonas Schmedtmann</p>
132+
</li>
133+
<li>
134+
<img
135+
src="img/related-2.jpg"
136+
alt="Lightning"
137+
width="75"
138+
heigth="75"
139+
/>
140+
<a href="#">The Unknown Powers of CSS</a>
141+
<p class="related-author">By Jim Dillon</p>
142+
</li>
143+
<li>
144+
<img
145+
src="img/related-3.jpg"
146+
alt="JavaScript code on a screen"
147+
width="75"
148+
height="75"
149+
/>
150+
<a href="#">Why JavaScript is Awesome</a>
151+
<p class="related-author">By Matilda</p>
152+
</li>
153+
</ul>
154+
</aside>
155+
156+
<footer>
157+
<p id="copyright" class="copyright text">
158+
Copyright &copy; 2027 by The Code Magazine.
159+
</p>
160+
</footer>
161+
</div>
155162
</body>
156163
</html>

‎starter/03-CSS-Fundamentals/style.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,11 @@ footer p {
7878
font-size: 18px;
7979
}
8080

81+
.container {
82+
width: 800px;
83+
margin: 0 auto;
84+
}
85+
8186
.related-author {
8287
font-size: 18px;
8388
font-weight: bold;

0 commit comments

Comments
 (0)