Skip to content

Latest commit

 

History

History
95 lines (62 loc) · 4.43 KB

html.md

File metadata and controls

95 lines (62 loc) · 4.43 KB
Raw

HTML

Projected Time

About 2.5 hours

  • 2 hours for Guided Practice
  • 20 minutes for the slides
  • 15 minutes for Check for Understanding

Prerequisites

  • Day one tasks

Motivation

  • Hyper Text Markup Language is the markup language for creating web pages and web applications.
  • Almost all the modern web applications use HTML for their front-end. And if you wish to be a web developer, you need to learn HTML.
  • HTML is really simple and easy to learn.

Objectives

Participants will be able to:

  • Create an HTML file and open it in Chrome
  • Code a bare-bones HTML structure
  • Draw a hierarchy of the HTML elements
  • Properly write opening and closing tags for commonly-used HTML elements
  • Use proper indentation to improve readability
  • Code an unordered and ordered list, and know how they are different
  • Make a word or phrase link to an external webpage
  • Separate HTML code into containers
  • Identify semantic and non-semantic elements

Specific Things to Learn

  • How to open an HTML file in Chrome
  • HTML document structure
  • Commonly-used HTML tags
  • Proper HTML indentation
  • Semantic elements

Lesson

Guided Practice

  • First, read just the first 5 paragraphs in one of the best resources for HTML documentation, MDN (5 min): https://developer.mozilla.org/en-US/docs/Web/HTML

    There's a "References" menu on the left side of the page if you are using a wide browser window. Find it, open its submenu items "HTML Elements", "Global Attributes", and "Input types". Spend just 5 minutes opening a bunch of the listed links and looking around. You will want to know about these later!

  • Next, work through these interactive Codecademy lessons. They take about 30 minutes each.

Spend 5 minutes scanning through this list:

HTML resources are pretty easy to search for online. Bookmark MDN and the cheatsheet for later, but feel free to use a search engine too when you're not sure about something.

Take a short break, then move to the next section.

Slideshow

Choose to watch the video about the slides, or read through the slides on your own. (20 min)

HTML (video walkthrough of slides)

HTML (slides)

Common Mistakes / Misconceptions

  • Only front-end engineers need to know HTML. Knowing a little bit of HTML, even if you want to be purely a backend web developer or work on non-Internet-based products, is really useful. It'll allow you to make static webpages to showcase your projects, and you could pitch in if one of your colleagues who usually takes care of HTML coding is out.
  • HTML isn't a "serious" language. HTML is indeed a coding language, though it can't do the kinds of logic-based things or decision-making that languages like JavaScript or Python can do. Nonetheless, it's a language that fulfills its purpose very well!

Check for Understanding

If you don't know the answers to any of these, search for the answer in your resources or online for a few minutes. If you're still not sure, figure it out with a peer before moving on.

  • What are semantic and non-semantic elements in HTML?
  • How do you write comments in HTML?
  • Why is indentation used in HTML?
  • How can we insert an image in a HTML document?
  • What does the line 'meta charset=“utf-8”' mean?

Supplemental Resources (always optional)