Skip to content

Commit f34eee6

Browse files
dmgarriottdmgarriott
committed
Changed image folder hierarchy. Added index.html, blog.html, and style.css
1 parent 10de6bc commit f34eee6

File tree

9 files changed

+271
-0
lines changed

9 files changed

+271
-0
lines changed

‎starter/02-HTML-Fundamentals/blog.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<h1>HTML Blog</h1>
2+
3+
<a href="index.html">Home</a>

starter/02-HTML-Fundamentals/challenges.jpg renamed to starter/02-HTML-Fundamentals/img/challenges.jpg

File renamed without changes.

starter/02-HTML-Fundamentals/laura-jones.jpg renamed to starter/02-HTML-Fundamentals/img/laura-jones.jpg

File renamed without changes.

starter/02-HTML-Fundamentals/post-img.jpg renamed to starter/02-HTML-Fundamentals/img/post-img.jpg

File renamed without changes.

starter/02-HTML-Fundamentals/related-1.jpg renamed to starter/02-HTML-Fundamentals/img/related-1.jpg

File renamed without changes.

starter/02-HTML-Fundamentals/related-2.jpg renamed to starter/02-HTML-Fundamentals/img/related-2.jpg

File renamed without changes.

starter/02-HTML-Fundamentals/related-3.jpg renamed to starter/02-HTML-Fundamentals/img/related-3.jpg

File renamed without changes.

‎starter/02-HTML-Fundamentals/index.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link href="style.css" rel="stylesheet" />
7+
8+
<title>HTML Fundamentals</title>
9+
</head>
10+
<body>
11+
<header class="main-header">
12+
<h1>📘 The Code Magazine</h1>
13+
14+
<nav>
15+
<a href="blog.html">Blog</a>
16+
<a href="#">Challenges</a>
17+
<a href="#">Flexbox</a>
18+
<a href="#">CSS Grid</a>
19+
</nav>
20+
</header>
21+
<article>
22+
<header>
23+
<h2>The Basic Language of the Web: HTML</h2>
24+
25+
<img
26+
src="img/laura-jones.jpg"
27+
alt="Headshot of Laura Jones"
28+
height="50"
29+
width="50"
30+
/>
31+
32+
<p id="author">
33+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
34+
</p>
35+
36+
<img
37+
src="img/post-img.jpg"
38+
alt="HTML code on screen"
39+
height="200"
40+
width="500"
41+
/>
42+
</header>
43+
44+
<p>
45+
All modern websites and web applications are built using three
46+
<em>fundamental</em> technologies: HTML, CSS and JavaScript. These are
47+
the languages of the web.
48+
</p>
49+
50+
<p>
51+
In this post, let's focus on HTML. We will learn what HTML is all about,
52+
and why you too should learn it.
53+
</p>
54+
55+
<h3>What is HTML?</h3>
56+
57+
<p>
58+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
59+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
60+
language that web developers use to structure and describe the content
61+
of a webpage (not a programming language).
62+
</p>
63+
<p>
64+
HTML consists of elements that describe different types of content:
65+
paragraphs, links, headings, images, video, etc. Web browsers understand
66+
HTML and render HTML code as websites.
67+
</p>
68+
<p>In HTML, each element is made up of 3 parts:</p>
69+
70+
<ol>
71+
<li class="first-li">The opening tag</li>
72+
<li>The closing tag</li>
73+
<li>The actual element</li>
74+
</ol>
75+
76+
<p>
77+
You can learn more at
78+
<a
79+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
80+
target="_blank"
81+
>MDN Web Docs</a
82+
>.
83+
</p>
84+
85+
<h3>Why should you learn HTML?</h3>
86+
87+
<p>
88+
There are countless reasons for learning the fundamental language of the
89+
web. Here are 5 of them:
90+
</p>
91+
92+
<ul>
93+
<li class="first-li">
94+
To be able to use the fundamental web dev language
95+
</li>
96+
<li>
97+
To hand-craft beautiful websites instead of relying on tools like
98+
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+
<aside>
108+
<h4>Related Posts</h4>
109+
110+
<ul class="related-list">
111+
<li>
112+
<img
113+
src="img/related-1.jpg"
114+
alt="Man typing on computer"
115+
height="75"
116+
width="75"
117+
/>
118+
<a href="#">How to Learn Web Development</a>
119+
<p class="related-author">By Jonas Schmedtmann</p>
120+
</li>
121+
<li>
122+
<img
123+
src="img/related-2.jpg"
124+
alt="Lighting strike"
125+
height="75"
126+
width="75"
127+
/>
128+
<a href="#">The Unknown Powers of CSS</a>
129+
<p class="related-author">By Jim Dillon</p>
130+
</li>
131+
<li>
132+
<img
133+
src="img/related-3.jpg"
134+
alt="JavaScript code on screen"
135+
height="75"
136+
width="75"
137+
/>
138+
<a href="#">Why JavaScript is Awesome</a>
139+
<p class="related-author">By Matilda</p>
140+
</li>
141+
</ul>
142+
</aside>
143+
<footer id="copyright" class="copyright text">
144+
Copyright &copy; 2027 The Cole Magazine.
145+
</footer>
146+
</body>
147+
</html>

‎starter/02-HTML-Fundamentals/style.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
* {
2+
font-family: sans-serif;
3+
color: #444;
4+
}
5+
6+
h1,
7+
h2,
8+
h3 {
9+
color: #1098ad;
10+
}
11+
12+
h1 {
13+
font-size: 26px;
14+
text-transform: uppercase;
15+
font-style: italic;
16+
}
17+
18+
h2 {
19+
font-size: 40px;
20+
}
21+
22+
h3 {
23+
font-size: 30px;
24+
}
25+
26+
h4 {
27+
font-size: 20px;
28+
text-transform: uppercase;
29+
text-align: center;
30+
}
31+
32+
p {
33+
font-size: 22px;
34+
line-height: 1.5;
35+
}
36+
37+
li {
38+
font-size: 20px;
39+
}
40+
41+
/* footer {
42+
font-size: 16px;
43+
} */
44+
45+
/* article header p {
46+
font-style: italic;
47+
} */
48+
49+
#author {
50+
font-style: italic;
51+
font-size: 18px;
52+
}
53+
54+
#copyright {
55+
font-size: 16px;
56+
}
57+
58+
.related-author {
59+
font-size: 18px;
60+
font-weight: bold;
61+
}
62+
63+
.related-list {
64+
list-style: none;
65+
}
66+
67+
.main-header {
68+
background-color: #f7f7f7;
69+
}
70+
71+
aside {
72+
background-color: #f7f7f7;
73+
border-top: 5px solid #1098ad;
74+
border-bottom: 5px solid #1098ad;
75+
}
76+
77+
/* body {
78+
background-color: orchid;
79+
} */
80+
81+
/* .first-li {
82+
font-weight: bold;
83+
} */
84+
85+
li:first-child {
86+
font-weight: bold;
87+
}
88+
89+
li:last-child {
90+
font-style: italic;
91+
}
92+
93+
li:nth-child(2) {
94+
/* color: red; */
95+
}
96+
97+
/*Misconception: This won't work*/
98+
article p:first-child {
99+
color: red;
100+
}
101+
/* Styling Links */
102+
103+
a:link {
104+
color: #1098ad;
105+
text-decoration: none;
106+
}
107+
108+
a:visited {
109+
color: #1098ad;
110+
}
111+
112+
a:hover {
113+
color: orangered;
114+
font-weight: bold;
115+
text-decoration: underline orangered;
116+
}
117+
118+
a:active {
119+
background-color: black;
120+
font-style: italic;
121+
}

0 commit comments

Comments
 (0)