DEV Community

Seungjin Lee
Seungjin Lee

Posted on

Building the Foundations: A Beginner’s Guide to HTML

“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>
Enter fullscreen mode Exit fullscreen mode



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>
Enter fullscreen mode Exit fullscreen mode

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


  1. Russia
  2. United States
  3. 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


A Brown Bear


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!! 😊

Top comments (0)