Skills
HTML

HTML

HT01 - HTML Basics

Complexity

Junior

Timeframe

2h

Summary

You should understand the basics of HTML and DOM.

Skill Breakdown

You should understand the concept of HTML elements and HTML attributes.

You should be able to use the most important text elements:

  • paragraph p
  • headings h1 to h6
  • emphasis em
  • importance strong
  • text breaks with br and hr

You should be able to use lists:

  • unordered lists with ul
  • ordered lists with ol
  • list items with li

You should be able to use hyperlinks (i.e. the a element).

You should be able to use images (i.e. the img element).

You should know how to use the generic containers div and span.

You should understand why semantic HTML is important.

You should understand what DOM is and the difference between HTML and DOM.

You should know the most important JavaScript functions for interacting with the DOM:

  • getElementById
  • getElementsByClassName
  • getElementsByTagName
  • querySelector
  • querySelectorAll

You should understand that the results of those JavaScript functions are just regular JavaScript objects. You should be able to use some of the most important properties of these objects:

  • id
  • className
  • innerHTML

You should understand how events and event listeners work.

You should understand the target and currentTarget properties of events.

You should understand how to use preventDefault() to prevent default actions.

Required Resources

Getting Things Done in Next.js:

Optional Resources

MDN Introduction to HMTL:

MDN HTML Reference:

MDN Web API Reference:

HT02 - HTML Forms

Complexity

Junior

Timeframe

2h

Summary

You should understand how to create HTML forms and process form input with JavaScript.

Skill Breakdown

You should know to create a form using the <form> element.

You should know how to create a form control using the <input> element and know the most important input types:

  • text
  • password
  • number
  • email
  • search
  • checkbox
  • radio
  • range

You should khow to add a label using the <label> element.

You should know to add a submit button and how to process a submit event.

You should know how to structure a form using <fieldset> and <legend>.

Required Resources

Getting Things Done in Next.js:

Optional Resources

MDN Web Forms:

HTML Reference:

GitJavaScript