Skip to content

Commit bc76943

Browse files
jamesacox53jamesacox53
committed
Completed Building a Simple Flexbox Layout
1 parent 3721e24 commit bc76943

File tree

2 files changed

+162
-143
lines changed

2 files changed

+162
-143
lines changed

‎myWork/04-CSS-Layouts/Flexbox/index.html

Lines changed: 146 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -20,151 +20,156 @@ <h1 class="title-text">📘The Code Magazine</h1>
2020
</header>
2121

2222
<div class="article-content">
23-
<article class="product-article">
24-
<header>
25-
<h2 class="article-header">The Basic Language of the Web: HTML</h2>
26-
27-
<div class="author-box">
28-
<img
29-
class="author-image"
30-
src="images/laura-jones.jpg"
31-
alt="Photo of Laura Jones"
32-
width="50"
33-
/>
34-
35-
<p class="author">
36-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
37-
</p>
38-
</div>
39-
40-
<img
41-
class="article-image"
42-
src="images/post-img.jpg"
43-
alt="HTML code on a screen"
44-
/>
45-
</header>
46-
47-
<p>
48-
All modern websites and web applications are built using three
49-
<em>fundamental</em>
50-
technologies: HTML, CSS and JavaScript. These are the languages of
51-
the web.
52-
</p>
53-
54-
<p>
55-
In this post, let's focus on HTML. We will learn what HTML is all
56-
about, and why you too should learn it.
57-
</p>
58-
59-
<h3 class="article-content-heading">What is HTML?</h3>
60-
61-
<p>
62-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
63-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
64-
language that web developers use to structure and describe the
65-
content of a webpage (not a programming language).
66-
</p>
67-
68-
<p>
69-
HTML consists of elements that describe different types of content:
70-
paragraphs, links, headings, images, video, etc. Web browsers
71-
understand HTML and render HTML code as websites.
72-
</p>
73-
74-
<p>In HTML, each element is made up of 3 parts:</p>
75-
76-
<ol class="article-list">
77-
<li>The opening tag</li>
78-
<li>The closing tag</li>
79-
<li>The actual element</li>
80-
</ol>
81-
82-
<p>
83-
You can learn more at the
84-
<a
85-
class="learn-more-at"
86-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
87-
target="_blank"
88-
>MDN Web Docs</a
89-
>.
90-
</p>
91-
92-
<h3 class="article-content-heading">Why should you learn HTML?</h3>
93-
94-
<p>
95-
There are countless reasons for learning the fundamental language of
96-
the web. Here are 5 of them:
97-
</p>
98-
99-
<ul class="article-list">
100-
<li>To be able to use the fundamental web dev language</li>
101-
<li>
102-
To hand-craft beautiful websites instead of relying on tools like
103-
Worpress or Wix
104-
</li>
105-
<li>To build web applications</li>
106-
<li>To impress friends</li>
107-
<li>To have fun 😃</li>
108-
</ul>
109-
110-
<p>Hopefully you learned something new here. See you next time!</p>
111-
112-
<button class="like-button">❤Like</button>
113-
</article>
114-
115-
<aside class="related-aside">
116-
<h4 class="related-posts-title">Related posts</h4>
117-
<ul class="related">
118-
<li class="related-item">
119-
<img
120-
class="related-article-image"
121-
src="images/related-1.jpg"
122-
alt="Learn Web Development"
123-
width="75"
124-
height="75"
125-
/>
126-
127-
<div>
128-
<a href="#" class="related-article-title"
129-
>How to Learn Web Development</a
130-
>
131-
<p class="related-author">By Jonas Schmedtmann</p>
23+
<div class="row">
24+
<article class="product-article">
25+
<header>
26+
<h2 class="article-header">
27+
The Basic Language of the Web: HTML
28+
</h2>
29+
30+
<div class="author-box">
31+
<img
32+
class="author-image"
33+
src="images/laura-jones.jpg"
34+
alt="Photo of Laura Jones"
35+
width="50"
36+
/>
37+
38+
<p class="author">
39+
Posted by <strong>Laura Jones</strong> on Monday, June 21st
40+
2027
41+
</p>
13242
</div>
133-
</li>
134-
<li class="related-item">
135-
<img
136-
class="related-article-image"
137-
src="images/related-2.jpg"
138-
alt="Lightning Strike"
139-
width="75"
140-
height="75"
141-
/>
14243

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

169174
<footer class="article-footer">
170175
<p class="copyright">Copyright &copy; 2027 by The Code Magazine.</p>

‎myWork/04-CSS-Layouts/Flexbox/style.css

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ body {
2626
border-top: 5px solid #1098ad;
2727
border-bottom: 5px solid #1098ad;
2828
padding: 10px 0 0 0;
29-
width: 100%;
3029
margin: 0 auto;
3130
}
3231

@@ -95,7 +94,7 @@ li:last-child {
9594

9695
.related {
9796
list-style: none;
98-
margin: 0 25px 5px 25px;
97+
margin: 20px 15px 25px 15px;
9998
}
10099

101100
a:link {
@@ -199,6 +198,7 @@ strong {
199198
display: flex;
200199
align-items: center;
201200
gap: 6px;
201+
margin-bottom: 20px;
202202
}
203203

204204
.related-author {
@@ -213,3 +213,17 @@ strong {
213213
font-weight: bold;
214214
font-style: normal;
215215
}
216+
217+
.row {
218+
display: flex;
219+
gap: 55px;
220+
align-items: flex-start;
221+
}
222+
223+
.related-aside {
224+
flex: 0 0 300px;
225+
}
226+
227+
.product-article {
228+
flex: 1;
229+
}

0 commit comments

Comments
 (0)