Skip to content

Commit 81b8739

Browse files
author
thomas.wei
committed
.
1 parent a4be2ad commit 81b8739

File tree

3 files changed

+180
-139
lines changed

3 files changed

+180
-139
lines changed

‎starter/03-CSS-Fundamentals/css-grid.html

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,16 +63,32 @@
6363

6464
.container--2 {
6565
/* STARTER */
66-
display: none;
66+
/* display: none; */
6767
font-family: sans-serif;
6868
background-color: black;
6969
font-size: 40px;
7070
margin: 100px;
7171

72-
width: 1000px;
72+
width: 700px;
7373
height: 600px;
7474

7575
/* CSS GRID */
76+
display: grid;
77+
grid-template-columns: 125px 200px 125px;
78+
grid-template-rows: 250px 100px;
79+
gap: 50px;
80+
81+
/* align tracks inside container */
82+
justify-content: center;
83+
align-content: center;
84+
85+
/* align items indise cells */
86+
align-items: center;
87+
justify-items: center;
88+
}
89+
.el--3 {
90+
align-self: end;
91+
justify-self: end;
7692
}
7793
</style>
7894
</head>

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

Lines changed: 131 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -26,144 +26,140 @@ <h1>📘 The Code Magazine</h1>
2626
<a href="css-grid.html">CSS Grid</a>
2727
</nav>
2828
</header>
29-
<div class="row">
30-
<article class="article">
31-
<header class="post-header">
32-
<h2>The Basic Language of the Web: HTML</h2>
33-
34-
<div class="author-box">
35-
<img
36-
src="img/laura-jones.jpg"
37-
alt="Headshot of Laura Jones"
38-
height="50"
39-
width="50"
40-
class="author-img"
41-
/>
42-
43-
<p id="author" class="author">
44-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
45-
</p>
46-
</div>
29+
<article class="article">
30+
<header class="post-header">
31+
<h2>The Basic Language of the Web: HTML</h2>
32+
33+
<div class="author-box">
34+
<img
35+
src="img/laura-jones.jpg"
36+
alt="Headshot of Laura Jones"
37+
height="50"
38+
width="50"
39+
class="author-img"
40+
/>
41+
42+
<p id="author" class="author">
43+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
44+
</p>
45+
</div>
46+
47+
<img
48+
src="img/post-img.jpg"
49+
alt="HTML code on a screen"
50+
width="500"
51+
height="200"
52+
class="post-img"
53+
/>
54+
<button>❤️ Like</button>
55+
</header>
56+
57+
<p>
58+
All modern websites and web applications are built using three
59+
<em>fundamental</em>
60+
technologies: HTML, CSS and JavaScript. These are the languages of the
61+
web.
62+
</p>
63+
64+
<p>
65+
In this post, let's focus on HTML. We will learn what HTML is all
66+
about, and why you too should learn it.
67+
</p>
68+
69+
<h3>What is HTML?</h3>
70+
<p>
71+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
72+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
73+
language that web developers use to structure and describe the content
74+
of a webpage (not a programming language).
75+
</p>
76+
<p>
77+
HTML consists of elements that describe different types of content:
78+
paragraphs, links, headings, images, video, etc. Web browsers
79+
understand HTML and render HTML code as websites.
80+
</p>
81+
<p>In HTML, each element is made up of 3 parts:</p>
82+
83+
<ol>
84+
<li class="first-li">The opening tag</li>
85+
<li>The closing tag</li>
86+
<li>The actual element</li>
87+
</ol>
88+
89+
<p>
90+
You can learn more at
91+
<a
92+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
93+
target="_blank"
94+
>MDN Web Docs</a
95+
>.
96+
</p>
97+
98+
<h3>Why should you learn HTML?</h3>
99+
100+
<p>
101+
There are countless reasons for learning the fundamental language of
102+
the web. Here are 5 of them:
103+
</p>
47104

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

168164
<footer>
169165
<p id="copyright" class="copyright text">

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ nav {
2121
font-size: 18px;
2222
}
2323
article {
24-
margin-bottom: 60px;
24+
/* margin-bottom: 60px; */
2525
}
2626
.main-header {
2727
background-color: #f7f7f7;
@@ -30,7 +30,7 @@ article {
3030
padding-left: 40px;
3131
padding-right: 40px; */
3232
padding: 20px 40px;
33-
margin-bottom: 60px;
33+
/* margin-bottom: 60px; */
3434
/* height: 80px; */
3535
}
3636
.post-header {
@@ -273,6 +273,7 @@ footer {
273273
} */
274274

275275
/* FlexBox */
276+
/*
276277
.main-header {
277278
display: flex;
278279
align-items: center;
@@ -316,3 +317,31 @@ footer {
316317
flex: 0 0 825px;
317318
margin-bottom: 0;
318319
}
320+
*/
321+
322+
/* css-grid layout */
323+
.container {
324+
display: grid;
325+
grid-template-columns: 1fr 300px;
326+
column-gap: 75px;
327+
row-gap: 60px;
328+
align-items: start;
329+
}
330+
.main-header {
331+
display: flex;
332+
align-items: center;
333+
justify-content: space-between;
334+
grid-column: 1 / -1;
335+
}
336+
.related-post {
337+
display: flex;
338+
align-items: center;
339+
gap: 15px;
340+
}
341+
.article {
342+
}
343+
.aside {
344+
}
345+
.footer {
346+
grid-column: 1 / -1;
347+
}

0 commit comments

Comments
 (0)