Skip to content

Commit 3b67dd4

Browse files
devmododevmodo
committed
Small updates
1 parent a51d540 commit 3b67dd4

File tree

2 files changed

+191
-142
lines changed

2 files changed

+191
-142
lines changed

‎wip/03-CSS-Fundamentals/index.html

Lines changed: 133 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -16,135 +16,138 @@ <h5>The Basic Language of the Web: HTML</h5>
1616
<h6>The Basic Language of the Web: HTML</h6>
1717
-->
1818

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

‎wip/03-CSS-Fundamentals/style.css

Lines changed: 58 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,47 @@
11
* {
22
font-family: sans-serif;
3+
/*These two lines are called a Global Reset*/
4+
margin: 0;
5+
padding: 0;
36
}
47

58
body {
69
color: #444;
10+
border-top: 10px solid #1098ad;
11+
}
12+
13+
.container {
14+
width: 1200px;
15+
/*This will split the page and center the content in the container.*/
16+
margin: 0 auto;
17+
}
18+
19+
.main-header {
20+
background-color: #f7f7f7;
21+
padding: 20px 40px;
22+
margin-bottom: 60px;
23+
height: 80px;
24+
}
25+
26+
nav {
27+
font-size: 18px;
28+
}
29+
30+
article {
31+
margin-bottom: 60px;
32+
}
33+
34+
.post-header {
35+
margin-bottom: 40px;
36+
}
37+
38+
aside {
39+
background-color: #f7f7f7;
40+
border-top: 5px solid #1098ad;
41+
border-bottom: 5px solid #1098ad;
42+
/*In shorthand, the first number is top and bottom. The second number is left and right.*/
43+
padding: 50px 0;
44+
width: 500px;
745
}
846

947
h1, h2, h3 {
@@ -18,10 +56,13 @@ h1 {
1856

1957
h2 {
2058
font-size: 40px;
59+
margin-bottom: 30px;
2160
}
2261

2362
h3 {
2463
font-size: 30px;
64+
margin-bottom: 20px;
65+
margin-top: 40px;
2566
}
2667

2768
h4 {
@@ -33,12 +74,21 @@ h4 {
3374
p {
3475
font-size: 22px; /*Default size is 16px*/
3576
line-height: 1.5;
77+
margin-bottom: 15px;
78+
}
79+
80+
ul, ol {
81+
margin-left: 50px;
82+
margin-bottom: 20px;
3683
}
3784

3885
li {
3986
font-size: 20px;
87+
margin-bottom: 10px;
4088
}
4189

90+
91+
4292
/*
4393
A psuedo-class of li that selects the first-child of all li elements.
4494
*/
@@ -48,6 +98,13 @@ li:first-child {
4898

4999
li:last-child {
50100
font-style: italic;
101+
margin-bottom: 0;
102+
}
103+
104+
.post-image {
105+
/*This little trick maintains the aspect ratio.*/
106+
width: 100%;
107+
height: auto;
51108
}
52109

53110
/*In the nth child, specify the number in ().
@@ -83,9 +140,7 @@ footer p {
83140
font-size: 16px;
84141
}
85142

86-
.main-header {
87-
background-color: #f7f7f7;
88-
}
143+
89144

90145
/*Class selector*/
91146
.related-author {
@@ -97,12 +152,6 @@ footer p {
97152
list-style: none;
98153
}
99154

100-
aside {
101-
background-color: #f7f7f7;
102-
border-top: 5px solid #1098ad;
103-
border-bottom: 5px solid #1098ad;
104-
}
105-
106155
/* Styling links */
107156
/* LVHA */
108157
a:link {
@@ -125,6 +174,3 @@ a:active {
125174
font-style: italic;
126175
}
127176

128-
nav {
129-
font-size: 18px;
130-
}

0 commit comments

Comments
 (0)