Skip to content

Commit 88ea9ca

Browse files
Lazik10Lazik10
committed
Lazik - CSS Fundamentals
1 parent a576364 commit 88ea9ca

File tree

2 files changed

+323
-124
lines changed

2 files changed

+323
-124
lines changed

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

Lines changed: 132 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<html lang="cz">
44
<head>
55
<meta charset="UTF-8" />
6+
<link rel="stylesheet" href="style.css">
67
<title>Basic language of the web: HTML</title>
78
</head>
89

@@ -15,140 +16,147 @@ <h4>The basic language of the web: HTML</h4>
1516
<h5>The basic language of the web: HTML</h5>
1617
<h6>The basic language of the web: HTML</h6>
1718
-->
19+
<div class="container">
20+
<header class="main-header">
21+
<!-- H - Main Headline -->
22+
<h1>The Code Magazine [DEMO]</h1>
1823

19-
<header>
20-
<!-- H - Main Headline -->
21-
<h1>The Code Magazine [DEMO]</h1>
22-
23-
<nav>
24-
<!-- Anchors / Links -->
25-
<a href="blog.html">Blog</a>
26-
<a href="#">Chalanges</a>
27-
<a href="#">Flexbox</a>
28-
<a href="#">CSS Grid</a>
29-
</nav>
30-
</header>
31-
32-
<article>
33-
<header>
34-
<!-- Secondary Headline -->
35-
<h2>The Basic Language of the Web: HTML</h2>
36-
37-
<img
38-
src="img/laura-jones.jpg"
39-
alt="Lazik image"
40-
width="50"
41-
height="50"
42-
/>
43-
<!-- Paragraph -->
44-
<p>Posted by <strong>Lazik</strong> on Monday, June 21st</p>
45-
46-
<!-- Image -->
47-
<img
48-
src="img/post-img.jpg"
49-
alt="HTML code on a screen"
50-
width="500"
51-
height="200"
52-
/>
24+
<nav>
25+
<!-- Anchors / Links -->
26+
<a href="blog.html">Blog</a>
27+
<a href="#">Chalanges</a>
28+
<a href="#">Flexbox</a>
29+
<a href="#">CSS Grid</a>
30+
</nav>
5331
</header>
5432

55-
<p>
56-
All modern websites and web applications are built using three
57-
<!-- Emphasis / Italic-->
58-
<em>fundamental</em>
59-
technologies: HTML, CSS and JavaScript, These are the languages of the
60-
web
61-
</p>
62-
<p>
63-
In this post, let's focus on HTML. We will leadn what HTML is all about,
64-
and why you too should leadn it.
65-
</p>
66-
67-
<h3>What is HTML?</h3>
68-
<p>
69-
<!-- Strong / Bold -->
70-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
71-
<strong>M</strong>arkup <strong> L</strong>anguage. It's a markup
72-
language that web developers use to structure and describe the content
73-
of the webpage (not a programming language)
74-
</p>
75-
<p>
76-
HTML consists of elements that describe different types of content:
77-
paragraphs, links, headings, images, video, etx. Web browsers understand
78-
HTML and render HTML code as websites.
79-
</p>
80-
<p>In HTML, each element is mafe up of 3 parts:</p>
81-
<!-- OL (Ordered List)-->
82-
<ol>
83-
<!-- LI (List element) -->
84-
<li>The opening tag</li>
85-
<li>The closing tag</li>
86-
<li>Content</li>
87-
</ol>
33+
<article>
34+
<header class="post-header">
35+
<!-- Secondary Headline -->
36+
<h2>The Basic Language of the Web: HTML</h2>
8837

89-
<p>
90-
You can learn more at the
91-
<!-- a (anchor element) is used for links -->
92-
<a href="https://developer.mozilla.org/en-US/" target="_blank"
93-
>MDN Web Docs</a
94-
>.
95-
</p>
96-
97-
<h3>Why should you learn HTML?</h3>
98-
<p>
99-
There are counless reasons for learning the fundamental language of the
100-
web. Here are 5 of them:
101-
</p>
102-
<!-- UL (Unordered List) -->
103-
<ul>
104-
<li>To be able to use the fundamental web dev language</li>
105-
<li>
106-
To hand-craft beautiful websites instead of relying on tools like
107-
Wordpress or Wix
108-
</li>
109-
<li>To build web applications</li>
110-
<li>To impress firends</li>
111-
<li>To have fun</li>
112-
</ul>
113-
<p>Hopefully you learned something new here. See you next time!</p>
114-
</article>
115-
116-
<aside>
117-
<h4>Related posts</h4>
118-
<ul>
119-
<li>
12038
<img
121-
src="img/related-1.jpg"
122-
alt="img/related-1.jpg"
123-
height="50"
39+
src="img/laura-jones.jpg"
40+
alt="Lazik image"
12441
width="50"
125-
/>
126-
<a href="">How to Learn Web Developement</a>
127-
<p>By Jonas Schmedtmann</p>
128-
</li>
129-
<li>
130-
<img
131-
src="img/related-2.jpg"
132-
alt="img/related-2.jpg"
13342
height="50"
134-
width="50"
13543
/>
136-
<a href="">The Unknown Powers of CSS</a>
137-
<p>By Jim Dillon</p>
138-
</li>
139-
<li>
44+
<!-- Paragraph -->
45+
<p id="author">Posted by <strong>Lazik</strong> on Monday, June 21st</p>
46+
47+
<!-- Image -->
14048
<img
141-
src="img/related-3.jpg"
142-
alt="img/related-3.jpg"
143-
height="50"
144-
width="50"
49+
class="html-image"
50+
src="img/post-img.jpg"
51+
alt="HTML code on a screen"
52+
width="500"
53+
height="200"
14554
/>
146-
<a href="">Why JavaScript is Awesome</a>
147-
<p>by Matilda</p>
148-
</li>
149-
</ul>
150-
</aside>
55+
</header>
56+
57+
<p>
58+
All modern websites and web applications are built using three
59+
<!-- Emphasis / Italic-->
60+
<em>fundamental</em>
61+
technologies: HTML, CSS and JavaScript, These are the languages of the
62+
web
63+
</p>
64+
<p>
65+
In this post, let's focus on HTML. We will leadn what HTML is all about,
66+
and why you too should leadn it.
67+
</p>
68+
69+
<h3>What is HTML?</h3>
70+
<p>
71+
<!-- Strong / Bold -->
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 the 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, etx. Web browsers understand
80+
HTML and render HTML code as websites.
81+
</p>
82+
<p>In HTML, each element is mafe up of 3 parts:</p>
83+
<!-- OL (Ordered List)-->
84+
<ol>
85+
<!-- LI (List element) -->
86+
<li class="first-list">The opening tag</li>
87+
<li>The closing tag</li>
88+
<li>Content</li>
89+
</ol>
90+
91+
<p>
92+
You can learn more at the
93+
<!-- a (anchor element) is used for links -->
94+
<a href="https://developer.mozilla.org/en-US/" target="_blank"
95+
>MDN Web Docs</a
96+
>.
97+
</p>
98+
99+
<h3>Why should you learn HTML?</h3>
100+
<p>
101+
There are counless reasons for learning the fundamental language of the
102+
web. Here are 5 of them:
103+
</p>
104+
<!-- UL (Unordered List) -->
105+
<ul>
106+
<li class="first-list">To be able to use the fundamental web dev language</li>
107+
<li>
108+
To hand-craft beautiful websites instead of relying on tools like
109+
Wordpress or Wix
110+
</li>
111+
<li>To build web applications</li>
112+
<li>To impress firends</li>
113+
<li>To have fun</li>
114+
</ul>
115+
<p>Hopefully you learned something new here. See you next time!</p>
116+
</article>
117+
118+
<aside>
119+
<h4>Related posts</h4>
120+
<ul class="list">
121+
<li>
122+
<img
123+
src="img/related-1.jpg"
124+
alt="img/related-1.jpg"
125+
height="50"
126+
width="50"
127+
/>
128+
<a href="">How to Learn Web Developement</a>
129+
<p class="related-author">By Jonas Schmedtmann</p>
130+
</li>
131+
<li>
132+
<img
133+
src="img/related-2.jpg"
134+
alt="img/related-2.jpg"
135+
height="50"
136+
width="50"
137+
/>
138+
<a href="">The Unknown Powers of CSS</a>
139+
<p class="related-author">By Jim Dillon</p>
140+
</li>
141+
<li>
142+
<img
143+
src="img/related-3.jpg"
144+
alt="img/related-3.jpg"
145+
height="50"
146+
width="50"
147+
/>
148+
<a href="">Why JavaScript is Awesome</a>
149+
<p class="related-author">by Matilda</p>
150+
</li>
151+
</ul>
152+
</aside>
151153

152-
<footer>Copyright &copy; 2027 by The Code Magazine</footer>
154+
<footer>
155+
<p id="copyright">
156+
Copyright &copy; 2027 by The Code Magazine
157+
</p>
158+
</footer>
159+
</div>
160+
<button>❤️Like</button>
153161
</body>
154162
</html>

0 commit comments

Comments
 (0)