Skip to content

Commit 01e82e2

Browse files
rameskumrameskum
committed
using grid for website
1 parent fd1a231 commit 01e82e2

File tree

2 files changed

+158
-132
lines changed

2 files changed

+158
-132
lines changed

‎practice/04 - CSS Layouts/index.html

Lines changed: 130 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -30,143 +30,143 @@ <h1>📘 The Code Magazine</h1>
3030
</nav>
3131
<!-- <div class="clear"></div>-->
3232
</header>
33+
<!-- Only Necessary for flexbox-->
34+
<!-- <div class="row">-->
35+
<article>
36+
<header class="post-header">
37+
<h2>The Basic Language of the Web: HTML</h2>
3338

34-
<div class="row">
35-
<article>
36-
<header class="post-header">
37-
<h2>The Basic Language of the Web: HTML</h2>
39+
<div class="author-box">
3840

39-
<div class="author-box">
41+
<img
42+
alt="Headshot of Laura Jones"
43+
class="author-img"
44+
height="50"
45+
src="img/laura-jones.jpg"
46+
width="50"
47+
/>
4048

41-
<img
42-
alt="Headshot of Laura Jones"
43-
class="author-img"
44-
height="50"
45-
src="img/laura-jones.jpg"
46-
width="50"
47-
/>
49+
<p class="author" id="author">
50+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
51+
</p>
52+
</div>
53+
54+
<img
55+
alt="HTML code on a screen"
56+
class="post-img"
57+
height="200"
58+
src="img/post-img.jpg"
59+
width="500"
60+
/>
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 the
68+
web.
69+
</p>
4870

49-
<p class="author" id="author">
50-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
51-
</p>
52-
</div>
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 content
81+
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>
53106

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+
<aside>
128+
<h4>Related posts</h4>
129+
130+
<ul class="related">
131+
<li class="related-post">
132+
<img
133+
alt="Person programming"
134+
height="75"
135+
src="img/related-1.jpg"
136+
width="75"
137+
/>
138+
<div>
139+
<a class="related-link" href="#">How to Learn Web Development</a>
140+
<p class="related-author">By Jonas Schmedtmann</p>
141+
</div>
142+
</li>
143+
<li class="related-post">
54144
<img
55-
alt="HTML code on a screen"
56-
class="post-img"
57-
height="200"
58-
src="img/post-img.jpg"
59-
width="500"
145+
alt="Lightning"
146+
height="75"
147+
src="img/related-2.jpg"
148+
width="75"
60149
/>
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 the
68-
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 content
81-
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-
<aside>
128-
<h4>Related posts</h4>
129-
130-
<ul class="related">
131-
<li class="related-post">
132-
<img
133-
alt="Person programming"
134-
height="75"
135-
src="img/related-1.jpg"
136-
width="75"
137-
/>
138-
<div>
139-
<a class="related-link" href="#">How to Learn Web Development</a>
140-
<p class="related-author">By Jonas Schmedtmann</p>
141-
</div>
142-
</li>
143-
<li class="related-post">
144-
<img
145-
alt="Lightning"
146-
height="75"
147-
src="img/related-2.jpg"
148-
width="75"
149-
/>
150-
<div>
151-
<a class="related-link" href="#">The Unknown Powers of CSS</a>
152-
<p class="related-author">By Jim Dillon</p>
153-
</div>
154-
</li>
155-
<li class="related-post">
156-
<img
157-
alt="JavaScript code on a screen"
158-
height="75"
159-
src="img/related-3.jpg"
160-
width="75"
161-
/>
162-
<div>
163-
<a class="related-link" href="#">Why JavaScript is Awesome</a>
164-
<p class="related-author">By Matilda</p>
165-
</div>
166-
</li>
167-
</ul>
168-
</aside>
169-
</div>
150+
<div>
151+
<a class="related-link" href="#">The Unknown Powers of CSS</a>
152+
<p class="related-author">By Jim Dillon</p>
153+
</div>
154+
</li>
155+
<li class="related-post">
156+
<img
157+
alt="JavaScript code on a screen"
158+
height="75"
159+
src="img/related-3.jpg"
160+
width="75"
161+
/>
162+
<div>
163+
<a class="related-link" href="#">Why JavaScript is Awesome</a>
164+
<p class="related-author">By Matilda</p>
165+
</div>
166+
</li>
167+
</ul>
168+
</aside>
169+
<!-- </div>-->
170170

171171
<footer>
172172
<p class="copyright text" id="copyright">

‎practice/04 - CSS Layouts/style.css

Lines changed: 28 additions & 2 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 {
@@ -352,6 +352,8 @@ footer {
352352
display: block;
353353
}
354354

355+
/* FLEXBOX LAYOUT */
356+
/*
355357
.row {
356358
display: flex;
357359
align-items: flex-start;
@@ -366,4 +368,28 @@ aside {
366368
article {
367369
flex: 1;
368370
margin-bottom: 0;
371+
}*/
372+
373+
/*CSS Grid Layout */
374+
.container {
375+
display: grid;
376+
grid-template-columns: 1fr 300px;
377+
column-gap: 75px;
378+
row-gap: 60px;
379+
align-items: start;
380+
}
381+
382+
.main-header {
383+
grid-column: 1 / -1;
384+
}
385+
386+
article {
387+
388+
}
389+
390+
aside {
391+
}
392+
393+
footer {
394+
grid-column: 1 / -1;
369395
}

0 commit comments

Comments
 (0)