Building the Foundations: A Beginner’s Guide to HTML

Seungjin Lee — Mon, 13 Jan 2025 10:26:31 +0000

“The concepts covered in this article are based on the HTML basics course offered by Codecademy.”

I am restarting to practice html. Please keep watching me :)
And I hope my blog is helpful and cheerful to html beginners like me.

Content:

HTML structure
Headings
Divs
Attributes (using id = “”)
Styling Text ('em' and 'strong' )
Line Breaks ('br')
Unordered Lists ('ul' and 'li' tag)
Ordered Lists ('ol')
Images (img src = “” /)
Image Alts (img src=”” alt=”” /)
Videos

What I learned:

Don’t forget the “opening tag” and “closing tag”.
'h1' used for main headings and all other smaller headings are used for subheadings.
'p' is ‘paragraphs’ ; a block of plain text’
'span' is short pieces of text or other HTML.
'em' tag will render as italic.
'strong' tag will render as bold.
'br': line breaks

Code:

HTML structure code:

<body>
  <h1>Hello World</h1>
  <p>This paragraph is a child of the body </p>
  <div>
    <h1> Sibling to p, but also grandchild of body</h1>
    <p>Sibling to h1, but also grandchild of body</p>
  </div>
</body>

HTML Basic code:

<body> 
 <h1>The Brown Bear</h1>
  <div id="introduction">
    <h2>About Brown Bears</h2>
    <p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br/> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
    <h3>Species</h3>
    <ul>
      <li>Arctos</li>
      <li>Collarus</li>
      <li>Horribilis</li>
      <li>Nelsoni (extinct)</li>
    </ul>
    <h3>Features</h3>
    <p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
  </div>
  <div id="habitat">
    <h2>Habitat</h2>
    <h3>Countries with Large Brown Bear Populations</h3>
    <ol>
      <li>Russia</li>
      <li>United States</li>
      <li>Canada</li>
    </ol>
    <h3>Countries with Small Brown Bear Populations</h3>
    <p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
  </div>
  <div id="media">
    <h2>Media</h2>
    <img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" alt="A Brown Bear"/>
    <br><br>
    <video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" width="320" height="240" controls>
    Video not supported </video>
  </div>
</body>

Result:

The Brown Bear

About Brown Bears

The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently Least Concern.

There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.

Species

Arctos
Collarus
Horribilis
Nelsoni (extinct)

Features

Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.

Habitat

Countries with Large Brown Bear Populations

Russia
United States
Canada

Countries with Small Brown Bear Populations

Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.

Media

Video not supported

Guys, can you share what sources are helpful to beginners who wants to learn html and build portfolio?

If you guys know more basic knowledge or have some feedback, please let me know and share your ideas in the comment!! 😊

DEV Community: Seungjin Lee