Skip to content

Commit fdf05c6

Browse files
nuthancnuthanc
committed
Update
1 parent d2f96e9 commit fdf05c6

File tree

10 files changed

+210
-1
lines changed

10 files changed

+210
-1
lines changed

‎README.md

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,38 @@
2222
* Opening tag
2323
* Content: Content of the element or another element(Child element)
2424
* Some elements like img have no content
25-
* Closing tag
25+
* Closing tag
26+
* Doctype specifying the version of the html
27+
* html element containing head and body
28+
* Headings from h1 to h6
29+
* Each page should have **1 h1 heading**
30+
* **strong**(semantic meaning) instead of **b**
31+
* **em**(emphasize) instead of **i**
32+
* **img** element
33+
* src attribute in img element
34+
* alt attribute important in img element(Screen readers)
35+
* width attribute automatically takes value in px(No need to specify explicitly)
36+
* VS Code provides width and height at the bottom for Opened images(Open post-img.png and check)
37+
* **lang** attribute for html for specifying the language
38+
* **meta** element with charset of UTF-8(Characters we use in English)
39+
* Open link in new tab using target="_blank"
40+
* External links using url and internal links by pointing to the html file
41+
* href of **#** for going to the top of the Current Page
42+
* **Structuring our Page**
43+
* nav element for Navigation containing the anchor elements
44+
* header element for Top Part of a Web Document or anything
45+
* header can be within article also
46+
* article element for Blog Post
47+
* aside: Secondary information that complements any other information(like article), also for Sidebar
48+
* footer element
49+
* HTML entity(©) using &(name);
50+
* Semantic HTML: Elements have Meaning or Purpose
51+
* strong
52+
* em
53+
* nav instead of div for Navigation elements
54+
* header instead of div
55+
* SEO and accessibility
56+
57+
### Challenges
58+
59+
* Challenge 2: https://codepen.io/nuthan-chandra/pen/PoaewNP

‎starter/02-HTML-Fundamentals-Imp/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">Back to Home</a>
9+
</body>
10+
</html>

‎starter/02-HTML-Fundamentals-Imp/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!

‎starter/02-HTML-Fundamentals-Imp/img/challenges.jpg

120 KB
Loading

‎starter/02-HTML-Fundamentals-Imp/img/laura-jones.jpg

6.64 KB
Loading

‎starter/02-HTML-Fundamentals-Imp/img/post-img.jpg

53.4 KB
Loading

‎starter/02-HTML-Fundamentals-Imp/img/related-1.jpg

50.2 KB
Loading

‎starter/02-HTML-Fundamentals-Imp/img/related-2.jpg

33 KB
Loading

‎starter/02-HTML-Fundamentals-Imp/img/related-3.jpg

43.5 KB
Loading

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

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

0 commit comments

Comments
 (0)