Skip to content

Commit 6e6467c

Browse files
rahilsamarahilsama
committed
using flex to layout the page
1 parent 987103b commit 6e6467c

File tree

2 files changed

+136
-120
lines changed

2 files changed

+136
-120
lines changed

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

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

35-
<article>
36-
<header class="post-header">
37-
<h2>The Basic Language of the Web: HTML</h2>
38-
39-
<img
40-
src="img/laura-jones.jpg"
41-
alt="Headshot of Laura Jones"
42-
height="50"
43-
width="50"
44-
class="author-img"
45-
/>
46-
47-
<p id="author" class="author">
48-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
49-
</p>
35+
<div class="row">
36+
<article>
37+
<header class="post-header">
38+
<h2>The Basic Language of the Web: HTML</h2>
5039

51-
<img
52-
src="img/post-img.jpg"
53-
alt="HTML code on a screen"
54-
width="500"
55-
height="200"
56-
class="post-img"
57-
/>
58-
<button>❤️ Like</button>
59-
</header>
60-
61-
<p>
62-
All modern websites and web applications are built using three
63-
<em>fundamental</em>
64-
technologies: HTML, CSS and JavaScript. These are the languages of the
65-
web.
66-
</p>
40+
<img
41+
src="img/laura-jones.jpg"
42+
alt="Headshot of Laura Jones"
43+
height="50"
44+
width="50"
45+
class="author-img"
46+
/>
6747

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>
48+
<p id="author" class="author">
49+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
50+
</p>
7251

73-
<h3>What is HTML?</h3>
74-
<p>
75-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
76-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
77-
language that web developers use to structure and describe the content
78-
of a webpage (not a 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-
87-
<ol>
88-
<li class="first-li">The opening tag</li>
89-
<li>The closing tag</li>
90-
<li>The actual element</li>
91-
</ol>
92-
93-
<p>
94-
You can learn more at
95-
<a
96-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
97-
target="_blank"
98-
>MDN Web Docs</a
99-
>.
100-
</p>
52+
<img
53+
src="img/post-img.jpg"
54+
alt="HTML code on a screen"
55+
width="500"
56+
height="200"
57+
class="post-img"
58+
/>
59+
<button>❤️ Like</button>
60+
</header>
61+
62+
<p>
63+
All modern websites and web applications are built using three
64+
<em>fundamental</em>
65+
technologies: HTML, CSS and JavaScript. These are the languages of
66+
the web.
67+
</p>
68+
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>
10173

102-
<h3>Why should you learn HTML?</h3>
74+
<h3>What is HTML?</h3>
75+
<p>
76+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
77+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
78+
language that web developers use to structure and describe the
79+
content of a webpage (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+
88+
<ol>
89+
<li class="first-li">The opening tag</li>
90+
<li>The closing tag</li>
91+
<li>The actual element</li>
92+
</ol>
93+
94+
<p>
95+
You can learn more at
96+
<a
97+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
98+
target="_blank"
99+
>MDN Web Docs</a
100+
>.
101+
</p>
103102

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

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</li>
119-
<li>To have fun 😃</li>
120-
</ul>
121-
122-
<p>Hopefully you learned something new here. See you next time!</p>
123-
</article>
124-
125-
<aside>
126-
<h4>Related posts</h4>
127-
128-
<ul class="related">
129-
<li>
130-
<img
131-
src="img/related-1.jpg"
132-
alt="Person programming"
133-
width="75"
134-
height="75"
135-
/>
136-
<a href="#">How to Learn Web Development</a>
137-
<p class="related-author">By Jonas Schmedtmann</p>
138-
</li>
139-
<li>
140-
<img
141-
src="img/related-2.jpg"
142-
alt="Lightning"
143-
width="75"
144-
height="75"
145-
/>
146-
<a href="#">The Unknown Powers of CSS</a>
147-
<p class="related-author">By Jim Dillon</p>
148-
</li>
149-
<li>
150-
<img
151-
src="img/related-3.jpg"
152-
alt="JavaScript code on a screen"
153-
width="75"
154-
height="75"
155-
/>
156-
<a href="#">Why JavaScript is Awesome</a>
157-
<p class="related-author">By Matilda</p>
158-
</li>
159-
</ul>
160-
</aside>
105+
<p>
106+
There are countless reasons for learning the fundamental language of
107+
the web. Here are 5 of them:
108+
</p>
161109

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</li>
120+
<li>To have fun 😃</li>
121+
</ul>
122+
123+
<p>Hopefully you learned something new here. See you next time!</p>
124+
</article>
125+
126+
<aside>
127+
<h4>Related posts</h4>
128+
129+
<ul class="related">
130+
<li>
131+
<img
132+
src="img/related-1.jpg"
133+
alt="Person programming"
134+
width="75"
135+
height="75"
136+
/>
137+
<a href="#">How to Learn Web Development</a>
138+
<p class="related-author">By Jonas Schmedtmann</p>
139+
</li>
140+
<li>
141+
<img
142+
src="img/related-2.jpg"
143+
alt="Lightning"
144+
width="75"
145+
height="75"
146+
/>
147+
<a href="#">The Unknown Powers of CSS</a>
148+
<p class="related-author">By Jim Dillon</p>
149+
</li>
150+
<li>
151+
<img
152+
src="img/related-3.jpg"
153+
alt="JavaScript code on a screen"
154+
width="75"
155+
height="75"
156+
/>
157+
<a href="#">Why JavaScript is Awesome</a>
158+
<p class="related-author">By Matilda</p>
159+
</li>
160+
</ul>
161+
</aside>
162+
</div>
162163
<footer>
163164
<p id="copyright" class="copyright text">
164165
Copyright &copy; 2027 by The Code Magazine.

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,3 +308,18 @@ footer {
308308
width: 1200;
309309
clear: both;
310310
} */
311+
312+
.row {
313+
display: flex;
314+
gap: 75px;
315+
align-items: flex-start;
316+
}
317+
318+
article {
319+
/* flex: 0 0 825px; */
320+
flex: 1;
321+
margin-bottom: 0;
322+
}
323+
aside {
324+
flex: 0 0 300px;
325+
}

0 commit comments

Comments
 (0)