Skip to content

Commit 844a7c2

Browse files
andrewbarlowandrewbarlow
committed
working on CSS
1 parent 525725e commit 844a7c2

File tree

2 files changed

+258
-127
lines changed

2 files changed

+258
-127
lines changed

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

Lines changed: 130 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -8,135 +8,143 @@
88

99
<body>
1010
<!-- Commenting Syntax!! -->
11-
<header>
12-
<h1>📘 The Code Magazine</h1>
13-
<div>
14-
<a href="blog.html">Blog</a>
15-
<a href="#">Challenges</a>
16-
<a href="#">Flexbox</a>
17-
<a href="#">CSS Grid</a>
18-
</div>
19-
<p>test Paragraph</p>
20-
</header>
21-
22-
<article>
23-
<header>
24-
<h2>The Basic Language of the Web: HTML</h2>
25-
<img
26-
src="img/laura-jones.jpg"
27-
alt="Headshot of Laura Jones"
28-
width="50"
29-
height="50"
30-
/>
31-
32-
<p id="author">
33-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
34-
</p>
35-
36-
<img src="img/post-img.jpg" alt="HTML text" width="500" height="200" />
11+
<div class="container">
12+
<header class="main-header">
13+
<h1>📘 The Code Magazine</h1>
14+
<div>
15+
<a href="blog.html">Blog</a>
16+
<a href="#">Challenges</a>
17+
<a href="#">Flexbox</a>
18+
<a href="#">CSS Grid</a>
19+
</div>
20+
<p>test Paragraph</p>
3721
</header>
3822

39-
<p>
40-
All modern websites and web applications are built using three
41-
<em>fundamental</em> technologies: HTML, CSS and JavaScript. These are
42-
the languages of the web.
43-
</p>
44-
45-
<p>
46-
In this post, let's focus on HTML. We will learn what HTML is all about,
47-
and why you too should learn it.
48-
</p>
49-
50-
<h3>What is HTML?</h3>
51-
52-
<p>
53-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
54-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
55-
language that web developers use to structure and describe the content
56-
of a webpage (not a programming language).
57-
</p>
58-
59-
<p>
60-
HTML consists of elements that describe different types of content:
61-
paragraphs, links, headings, images, video, etc. Web browsers understand
62-
HTML and render HTML code as websites. s
63-
</p>
64-
65-
<p>In HTML, each element is made up of 3 parts:</p>
66-
67-
<ol>
68-
<li>The opening tag</li>
69-
<li>The closing tag</li>
70-
<li>The actual element</li>
71-
</ol>
72-
<p>
73-
You can learn more at
74-
<a
75-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
76-
target="_blank"
77-
>MDN Web Docs</a
78-
>
79-
</p>
80-
81-
<h3>Why should you learn HTML?</h3>
82-
83-
<p>
84-
There are countless reasons for learning the fundamental language of the
85-
web. Here are 5 of them:
86-
</p>
87-
88-
<ul>
89-
<li>
90-
To be able to use the fundamental web dev language To hand-craft
91-
beautiful websites instead of relying on tools like Worpress or Wix
92-
</li>
93-
<li>To build web applications</li>
94-
<li>To impress friends</li>
95-
<li>To have fun 😃</li>
96-
</ul>
97-
98-
<p>Hopefully you learned something new here. See you next time!</p>
99-
</article>
100-
101-
<aside>
102-
<h4>Related Posts</h4>
103-
<ul class="no-bullet-list">
104-
<li>
23+
<article>
24+
<header class="post-header">
25+
<h2>The Basic Language of the Web: HTML</h2>
10526
<img
106-
src="img/related-1.jpg"
107-
alt="Related image 1"
108-
width="75"
109-
height="75"
27+
src="img/laura-jones.jpg"
28+
alt="Headshot of Laura Jones"
29+
width="50"
30+
height="50"
11031
/>
111-
<a href="#" target="_blank">How to Learn Web Development</a>
112-
<p class="related-author">By Jonas Schmedtmann</p>
113-
</li>
11432

115-
<li>
116-
<img
117-
src="img/related-2.jpg"
118-
alt="Related image 2"
119-
width="75"
120-
height="75"
121-
/>
122-
<a href="#" target="_blank">The Unknown Powers of CSS</a>
123-
<p class="related-author">By Jim Dillon</p>
124-
</li>
33+
<p id="author">
34+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
35+
</p>
12536

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

0 commit comments

Comments
 (0)