Skip to content

Commit f876fae

Browse files
JaviEstacioJaviEstacio
committed
Added: up to 4.64 Building a Simple CSS Grid
1 parent 343e99f commit f876fae

File tree

2 files changed

+166
-139
lines changed

2 files changed

+166
-139
lines changed

‎ongoing/04-CSS-Layouts/index.html

Lines changed: 134 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -32,144 +32,143 @@ <h1>📘 The Code Magazine</h1>
3232
<!-- <div class="clear"></div> -->
3333
</header>
3434

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

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

174173
<footer>
175174
<p id="copyright" class="copyright text">

‎ongoing/04-CSS-Layouts/style.css

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ body {
2727
padding-left: 40px;
2828
padding-right: 40px; */
2929
padding: 20px 40px;
30-
margin-bottom: 60px;
30+
/* margin-bottom: 60px; */
3131
/* height: 80px; */
3232
}
3333

@@ -37,7 +37,7 @@ nav {
3737
}
3838

3939
article {
40-
margin-bottom: 60px;
40+
/* margin-bottom: 60px; */
4141
}
4242

4343
.post-header {
@@ -307,6 +307,7 @@ footer {
307307
}
308308
*/
309309

310+
/* FLEXBOX */
310311
.main-header {
311312
display: flex;
312313
align-items: center;
@@ -345,6 +346,8 @@ footer {
345346
font-style: italic;
346347
}
347348

349+
/* FLEXBOX LAYOUT */
350+
/*
348351
.row {
349352
display: flex;
350353
align-items: flex-start;
@@ -358,11 +361,36 @@ article {
358361
}
359362
360363
aside {
361-
/*
364+
362365
DEFAULTS:
363366
flex-grow: 0;
364367
flex-shrink: 1;
365368
flex-basis: auto;
366-
*/
369+
367370
flex: 0 0 300px;
368371
}
372+
*/
373+
374+
/* CSS GRID LAYOUT */
375+
.container {
376+
display: grid;
377+
grid-template-columns: 1fr 300px;
378+
column-gap: 75px;
379+
row-gap: 60px;
380+
align-items: start;
381+
}
382+
383+
.main-header {
384+
grid-column: 1 / span 2;
385+
/* grid-column: 1 / -1; */
386+
}
387+
388+
article {
389+
}
390+
391+
aside {
392+
}
393+
394+
footer {
395+
grid-column: 1 / -1;
396+
}

0 commit comments

Comments
 (0)