Skip to content

Commit 3add4f5

Browse files
MandoCastilloMandoCastillo
committed
using floats
1 parent 10de6bc commit 3add4f5

File tree

6 files changed

+216
-163
lines changed

6 files changed

+216
-163
lines changed

‎starter/.idea/.gitignore

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎starter/.idea/modules.xml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎starter/.idea/starter.iml

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎starter/.idea/vcs.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

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

0 commit comments

Comments
 (0)