Skip to content

Commit

Permalink
#2 finish working on section 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@alilosoft
alilosoft committed Aug 1, 2022
1 parent 5604950 commit 1d45879
Show file tree
Hide file tree
Showing 2 changed files with 347 additions and 117 deletions.
248 changes: 131 additions & 117 deletions 02-Udemy/-01-HTML-CSS-Jonas/Code/03-CSS-Fundamentals/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,128 +3,142 @@
<head>
<meta charset="UTF-8" />
<title>The basic language of the Web: HTML</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1 style="font-family: 'Courier New'">👩‍💻 alilosoft.dev</h1>

<nav>
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="#">Flexbox</a>
<a href="#">CSS Grid</a>
</nav>
</header>

<article>
<header>
<h2>The Basic Language of the Web: HTML</h2>
<img src="img/author.jpg" alt="Laura Jones avatar" width="75" />
<p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
<img src="img/post-img.jpg" alt="HTML code on a screen" width="500" />
<div class="container">
<header class="main-header">
<h1>👨‍💻 alilosoft.dev</h1>

<nav>
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="#">Flexbox</a>
<a href="#">CSS-Grid</a>
</nav>
</header>

<p>
All modern websites and web applications are built using three
fundamental technologies: <em>HTML, CSS</em> and <em>JavaScript</em>.
These are the languages of the web.
</p>

<p>
In this post, let's focus on HTML. We will learn what HTML is all about,
and why you too should learn it.
</p>

<h3>What's HTML?</h3>

<p>
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
language that web developers use to structure and describe the content
of a webpage (not a programming language).
</p>

<p>
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.
</p>

<p>In HTML, each element is made up of 3 parts:</p>

<ol>
<li>The opening tag</li>
<li>The closing tag</li>
<li>The content of element</li>
</ol>

<p>
You can learn more at the
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
target="_blank"
>MDN Web Docs</a
>.
</p>

<h3>Why should you learn HTML?</h3>

<p>
There are countless reasons for learning the fundamental language of the
web. Here are 5 of them:
</p>

<ul>
<li>To be able to use the fundamental web dev language</li>
<li>
To hand-craft beautiful websites instead of relying on tools like
<em>Wordpress</em> or <em>Wix</em>
</li>
<li>To build web applications</li>
<li>To impress friends</li>
<li>To have fun 😃</li>
<li>To make a lot of money 💰</li>
</ul>

<p>Hopefully you learned something new here. See you next time!</p>
</article>

<aside>
<h4>Related posts</h4>
<ul>
<li>
<article class="post">
<header class="post-header">
<button class="like-btn">❤ Like</button>
<h2>The Basic Language of the Web: HTML</h2>
<img src="img/author.jpg" alt="Laura Jones avatar" width="75" />
<p id="author">
Posted by <strong>Chya</strong> on Monday, June 21st 2030
</p>
<img
src="img/related-1.jpg"
alt="related post 1"
height="75"
width="75"
class="post-img"
src="img/post-img.jpg"
alt="HTML code on a screen"
width="500"
height="250"
/>
<a href="#">How to learn Web Development</a>
<p>By Jonas Schmedtmann</p>
</li>
<li>
<img
src="img/related-2.jpg"
alt="related post 2"
height="75"
width="75"
/>
<a href="#">The Unknown powers of CSS</a>
<p>By Jim Dillon</p>
</li>
<li>
<img
src="img/related-3.jpg"
alt="related post 3"
height="75"
width="75"
/>
<a href="#">Why JavaScript is Awesome</a>
<p>By Matilda</p>
</li>
</ul>
</aside>

<footer>Copyright &copy; 2030 by the <em>Code Magazine</em>.</footer>
</header>

<p>
All modern websites and web applications are built using three
fundamental technologies: <em>HTML, CSS</em> and <em>JavaScript</em>.
These are the languages of the web.
</p>

<p>
In this post, let's focus on HTML. We will learn what HTML is all
about, and why you too should learn it.
</p>

<h3>What's HTML?</h3>

<p>
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
language that web developers use to structure and describe the content
of a webpage (not a programming language).
</p>

<p>
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.
</p>

<p>In HTML, each element is made up of 3 parts:</p>

<ol>
<li>The opening tag</li>
<li>The closing tag</li>
<li>The content of element</li>
</ol>

<p>
You can learn more at the
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
target="_blank"
>MDN Web Docs</a
>.
</p>

<h3>Why should you learn HTML?</h3>

<p>
There are countless reasons for learning the fundamental language of
the web. Here are 5 of them:
</p>

<ul>
<li>To be able to use the fundamental web dev language</li>
<li>
To hand-craft beautiful websites instead of relying on tools like
<em>Wordpress</em> or <em>Wix</em>
</li>
<li>To build web applications</li>
<li>To impress friends</li>
<li>To have fun 😃</li>
<li>To make a lot of money 💰</li>
</ul>

<p>Hopefully you learned something new here. See you next time!</p>
</article>

<aside>
<h4>Related posts</h4>
<ul class="related-posts">
<li>
<img
src="img/related-1.jpg"
alt="related post 1"
height="75"
width="75"
/>
<a href="#">How to learn Web Development</a>
<p class="related-author">By Jonas Schmedtmann</p>
</li>
<li>
<img
src="img/related-2.jpg"
alt="related post 2"
height="75"
width="75"
/>
<a href="#">The Unknown powers of CSS</a>
<p class="related-author">By Jim Dillon</p>
</li>
<li>
<img
src="img/related-3.jpg"
alt="related post 3"
height="75"
width="75"
/>
<a href="#">Why JavaScript is Awesome</a>
<p class="related-author">By Matilda</p>
</li>
</ul>
</aside>

<footer>
<p id="copyright">Copyright &copy; 2030 by alilosoft.dev</p>
</footer>
</div>
</body>
</html>
Loading

0 comments on commit 1d45879

Please sign in to comment.