Skip to content

Commit bc66051

Browse files
AbernachyAbernachy
authored
Merge pull request #14 from Aber-Learningforks/css/grid
Css/grid
2 parents 8360406 + 817458f commit bc66051

File tree

3 files changed

+179
-134
lines changed

3 files changed

+179
-134
lines changed

‎projectfolder/css/style.css‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@ nav a:link {
2424
}
2525

2626
article {
27-
margin-bottom: 60px;
27+
/* margin-bottom: 60px; */
2828
}
2929
.main-header {
3030
background-color: #f7f7f7;
3131
/* padding: 20px;
3232
padding-left: 40px;
3333
padding-right: 40px; */
3434
padding: 20px 40px;
35-
margin-bottom: 60px;
35+
/* margin-bottom: 60px; */
3636
/* height: 80px; */
3737
}
3838

@@ -330,20 +330,44 @@ footer {
330330
font-weight: normal;
331331
font-style: italic;
332332
}
333-
334-
.row {
333+
/* FlexBox layout */
334+
/* .row {
335335
display: flex;
336336
align-items: flex-start;
337337
gap: 75px;
338338
margin-bottom: 60px;
339339
}
340340
341341
article {
342-
/* flex: 0 0 825px; */
342+
343343
flex: 1;
344344
margin-bottom: 0px;
345345
}
346346
347347
aside {
348348
flex: 0 0 300px;
349+
} */
350+
351+
/* CSS Grid layout */
352+
.container {
353+
display: grid;
354+
/* If you only use columns, then the row sizes are to the lengh of the container */
355+
grid-template-columns: 1fr 300px;
356+
357+
column-gap: 75px;
358+
row-gap: 60px;
359+
align-items: start;
360+
}
361+
362+
.main-header {
363+
grid-column: 1 / -1;
364+
}
365+
366+
article {
367+
}
368+
369+
aside {
370+
}
371+
footer {
372+
grid-column: 1 /-1;
349373
}

‎projectfolder/index.html‎

Lines changed: 125 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -32,140 +32,139 @@ <h1>📘 The Code Magazine</h1>
3232

3333
<button>❤Like</button>
3434
</header>
35+
<!-- Only necessary for Flexbox -->
36+
<!-- <div class="row"> -->
37+
<article>
38+
<header class="post-header">
39+
<h2>The Basic Langauge of The Web: HTML</h2>
3540

36-
<div class="row">
37-
<article>
38-
<header class="post-header">
39-
<h2>The Basic Langauge of The Web: HTML</h2>
40-
41-
<div class="author-box">
42-
<img
43-
src="./imgs/laura-jones.jpg"
44-
alt="the person who wrote this"
45-
width="50"
46-
height="50"
47-
class="author-img"
48-
/>
49-
<p id="author" class="author">
50-
Posted by <strong>Laura Jones </strong> on Monday, June 21st
51-
2027
52-
</p>
53-
<br />
54-
</div>
55-
41+
<div class="author-box">
5642
<img
57-
class="post-img"
58-
src="./imgs/post-img.jpg"
59-
alt="This is the voice of Satan"
60-
width="500"
61-
height="200"
43+
src="./imgs/laura-jones.jpg"
44+
alt="the person who wrote this"
45+
width="50"
46+
height="50"
47+
class="author-img"
6248
/>
63-
</header>
64-
<p>
65-
All modern websites and web applications are built using three
66-
<em>fundamental</em> technologies: HTML, CSS and JavaScript. These
67-
are the languages of the web.
68-
</p>
69-
<p>
70-
In this post, let's focus on HTML. We will learn what HTML is all
71-
about, and why you too should learn it.
72-
</p>
73-
<h3>What is HTML?</h3>
74-
<p>
75-
<strong>HTML </strong> stands for
76-
<strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup
77-
<strong>L</strong>anguage. It's a markup language that web
78-
developers use to structure and describe the content of a webpage
79-
(not a programming language).
80-
</p>
81-
<p>
82-
HTML consists of elements that describe different types of content:
83-
paragraphs, links, headings, images, video, etc. Web browsers
84-
understand HTML and render HTML code as websites.
85-
</p>
86-
<p>In HTML, each element is made up of 3 parts:</p>
87-
<ol>
88-
<li class="first-li">The opening tag</li>
89-
<li>The closing tag</li>
90-
<li>The actual element</li>
91-
<li>You can learn more at the MDN Web Docs.</li>
92-
</ol>
49+
<p id="author" class="author">
50+
Posted by <strong>Laura Jones </strong> on Monday, June 21st 2027
51+
</p>
52+
<br />
53+
</div>
9354

94-
<p>
95-
You can learn more at the
96-
<a
97-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
98-
target="_blank"
99-
>MDN Web Docs</a
100-
>
101-
</p>
55+
<img
56+
class="post-img"
57+
src="./imgs/post-img.jpg"
58+
alt="This is the voice of Satan"
59+
width="500"
60+
height="200"
61+
/>
62+
</header>
63+
<p>
64+
All modern websites and web applications are built using three
65+
<em>fundamental</em> technologies: HTML, CSS and JavaScript. These are
66+
the languages of the web.
67+
</p>
68+
<p>
69+
In this post, let's focus on HTML. We will learn what HTML is all
70+
about, and why you too should learn it.
71+
</p>
72+
<h3>What is HTML?</h3>
73+
<p>
74+
<strong>HTML </strong> stands for
75+
<strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup
76+
<strong>L</strong>anguage. It's a markup language that web developers
77+
use to structure and describe the content of a webpage (not a
78+
programming language).
79+
</p>
80+
<p>
81+
HTML consists of elements that describe different types of content:
82+
paragraphs, links, headings, images, video, etc. Web browsers
83+
understand HTML and render HTML code as websites.
84+
</p>
85+
<p>In HTML, each element is made up of 3 parts:</p>
86+
<ol>
87+
<li class="first-li">The opening tag</li>
88+
<li>The closing tag</li>
89+
<li>The actual element</li>
90+
<li>You can learn more at the MDN Web Docs.</li>
91+
</ol>
10292

103-
<h3>Why should you learn HTML</h3>
93+
<p>
94+
You can learn more at the
95+
<a
96+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
97+
target="_blank"
98+
>MDN Web Docs</a
99+
>
100+
</p>
104101

105-
<p>
106-
There are countless reasons for learning the fundamental language of
107-
the web. Here are 5 of them:
108-
</p>
102+
<h3>Why should you learn HTML</h3>
109103

110-
<ul>
111-
<li class="first-li">
112-
To be able to use the fundamental web dev language
113-
</li>
114-
<li>
115-
To hand-craft beautiful websites instead of relying on tools like
116-
Worpress or Wix
117-
</li>
118-
<li>To build web applications</li>
119-
<li>To impress friends To have fun 😃</li>
120-
</ul>
121-
<p>Hopefully you learned something new here. See you next time!</p>
122-
</article>
123-
<!--- Aside element is used for secondary information designed to compliment information-->
124-
<aside class="related-aside">
125-
<h4><strong>Related Posts</strong></h4>
126-
<ul class="related-list">
127-
<li class="related-post">
128-
<img
129-
src="imgs/related-1.jpg"
130-
alt="How to Learn Web Development"
131-
height="50"
132-
width="50"
133-
/>
134-
<div>
135-
<a href="#" class="related-links">
136-
How to Learn Web Development</a
137-
>
138-
<p class="related-author">By Jonas Schmeltmann</p>
139-
</div>
140-
</li>
104+
<p>
105+
There are countless reasons for learning the fundamental language of
106+
the web. Here are 5 of them:
107+
</p>
141108

142-
<li class="related-post">
143-
<img
144-
src="imgs/related-2.jpg"
145-
alt="Unknown Power of CSS"
146-
height="50"
147-
width="50"
148-
/>
149-
<div>
150-
<a href="#" class="related-links"> The Uknown Power of CSS</a>
151-
<p class="related-author">By Jonas Schmeltmann</p>
152-
</div>
153-
</li>
154-
<li class="related-post">
155-
<img
156-
src="imgs/related-3.jpg"
157-
alt="Why Javascript is Awsome"
158-
height="50"
159-
width="50"
160-
/>
161-
<div>
162-
<a href="#" class="related-links"> Why Javascript is Awsome</a>
163-
<p class="related-author">By Jonas Schmeltmann</p>
164-
</div>
165-
</li>
166-
</ul>
167-
</aside>
168-
</div>
109+
<ul>
110+
<li class="first-li">
111+
To be able to use the fundamental web dev language
112+
</li>
113+
<li>
114+
To hand-craft beautiful websites instead of relying on tools like
115+
Worpress or Wix
116+
</li>
117+
<li>To build web applications</li>
118+
<li>To impress friends To have fun 😃</li>
119+
</ul>
120+
<p>Hopefully you learned something new here. See you next time!</p>
121+
</article>
122+
<!--- Aside element is used for secondary information designed to compliment information-->
123+
<aside class="related-aside">
124+
<h4><strong>Related Posts</strong></h4>
125+
<ul class="related-list">
126+
<li class="related-post">
127+
<img
128+
src="imgs/related-1.jpg"
129+
alt="How to Learn Web Development"
130+
height="50"
131+
width="50"
132+
/>
133+
<div>
134+
<a href="#" class="related-links">
135+
How to Learn Web Development</a
136+
>
137+
<p class="related-author">By Jonas Schmeltmann</p>
138+
</div>
139+
</li>
140+
141+
<li class="related-post">
142+
<img
143+
src="imgs/related-2.jpg"
144+
alt="Unknown Power of CSS"
145+
height="50"
146+
width="50"
147+
/>
148+
<div>
149+
<a href="#" class="related-links"> The Uknown Power of CSS</a>
150+
<p class="related-author">By Jonas Schmeltmann</p>
151+
</div>
152+
</li>
153+
<li class="related-post">
154+
<img
155+
src="imgs/related-3.jpg"
156+
alt="Why Javascript is Awsome"
157+
height="50"
158+
width="50"
159+
/>
160+
<div>
161+
<a href="#" class="related-links"> Why Javascript is Awsome</a>
162+
<p class="related-author">By Jonas Schmeltmann</p>
163+
</div>
164+
</li>
165+
</ul>
166+
</aside>
167+
<!-- </div> -->
169168
<footer>
170169
<p id="copyright" class="copyright text">
171170
Copyright &copy; 2017 by The Code Magazine

‎projectfolder/pages/css-grid.html‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434

3535
.container--1 {
3636
/* STARTER */
37+
3738
font-family: sans-serif;
3839
background-color: #ddd;
3940
font-size: 32px;
@@ -49,6 +50,9 @@
4950
/* gap: 30px; */
5051
column-gap: 10px;
5152
row-gap: 40px;
53+
54+
/*Temp */
55+
display: none;
5256
}
5357

5458
.el--8 {
@@ -67,17 +71,35 @@
6771
grid-row: 2;
6872
}
6973
.container--2 {
70-
display: none;
7174
/* STARTER */
7275
font-family: sans-serif;
7376
background-color: black;
7477
font-size: 40px;
75-
margin: 100px;
78+
margin: 40px;
7679

77-
width: 1000px;
80+
width: 700px;
7881
height: 600px;
7982

8083
/* CSS GRID */
84+
display: grid;
85+
grid-template-columns: 125px 200px 125px;
86+
grid-template-rows: 250px 100px;
87+
gap: 50px;
88+
89+
/* Aligning tracks inside container:
90+
distribute empty space */
91+
justify-content: center;
92+
justify-content: space-between;
93+
align-content: center;
94+
95+
/* Aligning items inside cells */
96+
align-items: center;
97+
justify-items: center;
98+
}
99+
100+
.el--3 {
101+
align-self: end;
102+
justify-self: center;
81103
}
82104
</style>
83105
</head>

0 commit comments

Comments
 (0)