Documentation of 30 days of Code Challenge Part 1 - HTML

Documentation of 30 days of Code Challenge
Part 1 - HTML

Hello everyone!! Welcome back to another post. So I decided to lean web development for a project and to maintain consistency I have taken 30 days of Code Challenge.

And as far as I know documenting your learning is the best way to memorize the concepts in long run. So here I am!!

Day 1

Currently I have decided to learn from Free Code Camp. I decided to start it from Responsive Web Design, which covers web development concepts from the scratch. Today I finished the Basic HTML and HTML5 course. As it is was my first day today so I did not want to over burden things and feel exhausted on other days.

I made a web cat photo app and a form using HTML. I am summing up all the important concepts I learnt today.

Summary

HTML is the standard markup language for Web pages. HTML elements usually have opening and closing tags that surround and give meaning to content.

With HTML you can create your own Website.

Heading Element - Search engine browsers use the headings to index the structure and content of your web pages. HTML headings are defined with h1 to h6 tags.

<h1>Large Heading</h1>
<h6>Smallest Heading</h6>

Paragraph Element - p elements are for paragraph text on websites. p stands for "paragraph".

<p>This is my first paragraph.</p>

Comments in HTML - With the help of Commenting you can leave comments for other developers without affecting the output.

<!-- Comment -->

HTML5 Elements -

  • The HTML img tag is used to embed an image in a web page. It is self closing tag.
<img src = "url" alt= "alternate text">

The value of the alt attribute should describe the image.

  • Anchor Elements- The HTML a tag defines a hyperlink. Clicking on the link text, will send the reader to the specified URL address.
<a href = "url">text link</a>
  • HTML Lists- HTML lists allows to group a set of related items in lists.

Unordered List

<ul>
<li>milk</li>
<li>coffee</li>
</ul>

Ordered List-

<ol>
<li>dog</li>
<li>cat</li>
</ol>
  • Form Element - An HTML form is used to collect user input. The user input is most often sent to a server for processing. The HTML form element is used to create an HTML form for user input.
<form>
form elements
</form>
  • Doctype of HTML Document- At the top of your document, you need to tell the browser which version of HTML your page is using. You tell the browser this information by adding the <!DOCTYPE ...> tag on the first line. . For HTML5, you use -
<!DOCTYPE html>
  • Head and Body of HTML Document - Any information about your page would go into the head tag and with the content of the page (what displays for a user) would go into the body tag.

    Example of Page Layout:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
    </div>
  </body>
</html>

Resources I'm using :

W3 Schools HTML
Free Code Camp