Skip to content

Latest commit

 

History

History
80 lines (55 loc) · 3.75 KB

html.md

File metadata and controls

80 lines (55 loc) · 3.75 KB

HTML

Projected Time

About 5.5 hours

  • 20 minutes for video walkthrough of slides
  • 5 hours for Independent Practice (Project)
  • 15 minutes for Check for Understanding

Prerequisites

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

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!

Independent Practice

No pairs will be assigned for this project, but you should rely on your classmates for help once you've spent 20 minutes working independently through something you're stuck on.

The activity for the HTML, CSS, Bootstrap and jQuery lessons is a project that allows you to combine your new skills in each of these areas.

Click here to access the instructions for the HTML portion of the project. Please don't move on to the prompts for the other topics yet.

Check for Understanding

  • 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