Skip to content

Commit 3aa741e

Browse files
andrewbarlowandrewbarlow
committed
finish CSS basics
1 parent 844a7c2 commit 3aa741e

File tree

13 files changed

+515
-6
lines changed

13 files changed

+515
-6
lines changed

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@
1111
<div class="container">
1212
<header class="main-header">
1313
<h1>📘 The Code Magazine</h1>
14-
<div>
14+
<nav>
1515
<a href="blog.html">Blog</a>
1616
<a href="#">Challenges</a>
1717
<a href="#">Flexbox</a>
1818
<a href="#">CSS Grid</a>
19-
</div>
20-
<p>test Paragraph</p>
19+
</nav>
2120
</header>
2221

2322
<article>

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

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ body {
77
color: #444;
88
font-family: sans-serif;
99
border-top: 10px solid #1098ad;
10+
position: relative;
1011
}
1112

1213
nav {
1314
font-size: 18px;
15+
text-align: center;
1416
}
1517

1618
article {
@@ -187,6 +189,46 @@ footer {
187189
color: green;
188190
} */
189191

190-
/* nav a:link { */
191-
/* font-size: 10px; */
192-
/* } */
192+
nav a:link {
193+
margin-right: 30px;
194+
margin-top: 10px;
195+
display: inline-block;
196+
}
197+
198+
nav a:link:last-child {
199+
margin-right: 0;
200+
}
201+
202+
button {
203+
font-size: 22px;
204+
padding: 20px;
205+
cursor: pointer;
206+
position: absolute;
207+
bottom: 50px;
208+
right: 50px;
209+
}
210+
211+
h1::first-letter {
212+
font-style: normal;
213+
margin-right: 5px;
214+
}
215+
216+
h3 + p::first-line {
217+
}
218+
219+
h2 {
220+
position: relative;
221+
}
222+
223+
h2::after {
224+
content: "TOP";
225+
background-color: #ffe70e;
226+
color: #444;
227+
font-size: 16px;
228+
font-weight: bold;
229+
display: inline-block;
230+
padding: 5px 10px;
231+
position: absolute;
232+
top: -15px;
233+
right: -25px;
234+
}

‎mywork/04-CSS-Layouts/blog.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>BLOG</title>
5+
</head>
6+
<body>
7+
<h2>BLOG</h2>
8+
<a href="index.html">Main Page</a>
9+
</body>
10+
</html>

‎mywork/04-CSS-Layouts/content.txt

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
📘 The Code Magazine
2+
3+
The Basic Language of the Web: HTML
4+
5+
Posted by Laura Jones on Monday, June 21st 2027
6+
7+
All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web.
8+
9+
In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.
10+
11+
What is HTML?
12+
13+
HTML stands for HyperText Markup Language. It's a markup language that web developers use to structure and describe the content of a webpage (not a programming language).
14+
15+
HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand HTML and render HTML code as websites.
16+
17+
In HTML, each element is made up of 3 parts:
18+
19+
The opening tag
20+
The closing tag
21+
The actual element
22+
You can learn more at the MDN Web Docs.
23+
24+
Why should you learn HTML?
25+
26+
There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
27+
28+
To be able to use the fundamental web dev language
29+
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
30+
To build web applications
31+
To impress friends
32+
To have fun 😃
33+
34+
Hopefully you learned something new here. See you next time!

‎mywork/04-CSS-Layouts/img/challenges.jpg

120 KB
Loading

‎mywork/04-CSS-Layouts/img/laura-jones.jpg

6.64 KB
Loading

‎mywork/04-CSS-Layouts/img/post-img.jpg

53.4 KB
Loading

‎mywork/04-CSS-Layouts/img/related-1.jpg

50.2 KB
Loading

‎mywork/04-CSS-Layouts/img/related-2.jpg

33 KB
Loading

‎mywork/04-CSS-Layouts/img/related-3.jpg

43.5 KB
Loading

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

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link href="style.css" rel="stylesheet" />
6+
<title>The Basic Language of the Web: HTML</title>
7+
</head>
8+
9+
<body>
10+
<!-- Commenting Syntax!! -->
11+
<div class="container">
12+
<header class="main-header clearfix">
13+
<h1>📘 The Code Magazine</h1>
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+
21+
<!-- <div class="clear"></div> -->
22+
</header>
23+
24+
<article>
25+
<header class="post-header">
26+
<h2>The Basic Language of the Web: HTML</h2>
27+
<img
28+
src="img/laura-jones.jpg"
29+
alt="Headshot of Laura Jones"
30+
width="50"
31+
height="50"
32+
class="author-img"
33+
/>
34+
35+
<p id="author" class="author">
36+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
37+
</p>
38+
39+
<img
40+
src="img/post-img.jpg"
41+
alt="HTML text"
42+
width="500"
43+
height="200"
44+
class="post-img"
45+
/>
46+
</header>
47+
48+
<p>
49+
All modern websites and web applications are built using three
50+
<em>fundamental</em> technologies: HTML, CSS and JavaScript. These are
51+
the languages of 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>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 content
65+
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. s
72+
</p>
73+
74+
<p>In HTML, each element is made up of 3 parts:</p>
75+
76+
<ol>
77+
<li class="first-li">The opening tag</li>
78+
<li>The closing tag</li>
79+
<li>The actual element</li>
80+
</ol>
81+
<p>
82+
You can learn more at
83+
<a
84+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
85+
target="_blank"
86+
>MDN Web Docs</a
87+
>
88+
</p>
89+
90+
<h3>Why should you learn HTML?</h3>
91+
92+
<p>
93+
There are countless reasons for learning the fundamental language of
94+
the web. Here are 5 of them:
95+
</p>
96+
97+
<ul>
98+
<li class="first-li">
99+
To be able to use the fundamental web dev language To hand-craft
100+
beautiful websites instead of relying on tools like Worpress or Wix
101+
</li>
102+
<li>To build web applications</li>
103+
<li>To impress friends</li>
104+
<li>To have fun 😃</li>
105+
</ul>
106+
107+
<p>Hopefully you learned something new here. See you next time!</p>
108+
</article>
109+
110+
<aside>
111+
<h4>Related Posts</h4>
112+
<ul class="no-bullet-list">
113+
<li>
114+
<img
115+
src="img/related-1.jpg"
116+
alt="Related image 1"
117+
width="75"
118+
height="75"
119+
/>
120+
<a href="#" target="_blank">How to Learn Web Development</a>
121+
<p class="related-author">By Jonas Schmedtmann</p>
122+
</li>
123+
124+
<li>
125+
<img
126+
src="img/related-2.jpg"
127+
alt="Related image 2"
128+
width="75"
129+
height="75"
130+
/>
131+
<a href="#" target="_blank">The Unknown Powers of CSS</a>
132+
<p class="related-author">By Jim Dillon</p>
133+
</li>
134+
135+
<li>
136+
<img
137+
src="img/related-3.jpg"
138+
alt="Related image 3"
139+
width="75"
140+
height="75"
141+
/>
142+
<a href="#" target="_blank">Why JavaScript is Awesome</a>
143+
<p class="related-author">By Matilda</p>
144+
</li>
145+
</ul>
146+
</aside>
147+
<footer>
148+
<p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
149+
</footer>
150+
</div>
151+
</body>
152+
</html>

‎mywork/04-CSS-Layouts/shoe_page.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
</head>
9+
<body></body>
10+
</html>

0 commit comments

Comments
 (0)