Skip to main content

HTML Simplified: A Beginner's Guide

Most Technology Training classes will be delivered online until further notice.


Before each sesson, Tech Training will provide a Zoom link for live online classes, along with any required class materials.

 


Introduction to HTML (Hypertext Markup Language) delves into key components of its structure, syntax, and usage. By the end of this course, students will have developed the skills to create web pages and incorporate essential attributes.

Note: This course assumes participants have basic computer literacy skills and familiarity with using a web browser. A computer/laptop with plain text editor or IDE and web browser installed is required. No prior programming experience is required.

Day 1:

1. Introduction to HTML

  • What is HTML? History of HTML (Changes and enhancements to HTML5)
  • HTML document structure: doctype declaration

2. Structure of HTML

  • Setting an HTML document
  • Creating a head and body for the document
  • Understanding imports and scripts
  • Writing the doctype declaration and opening/closing HTML tags

3. Exploring tags and usage

  • Creating headings h1 through h6
  • Formatting text using inline tags, em, strong, br, p etc.
  • Basic overview of unordered and ordered lists

4. Inserting images and multimedia

  • Inserting an image with html
  • Adding images (sizing, background, alignment)
  • Specifying image sources and alternative text
  • Adding videos and audio


Day 2:

5. Implementing semantic HTML5 elements

  • Understanding the purpose and benefits of semantic elements
  • Using <header>, <nav>, <section>, and <footer> tags for improved structure
  • Setting up a page new semantic content

6. Lists (unordered list, ordered lists, tables)

  • Structuring navigation menus using unordered lists
  • Understanding th, tr, and td tags
  • Creating tables with rows and columns using HTML table tags

7. Anchor tags and linking

  • Understanding linking
  • Creating internal and external links
  • Linking to an email and other sources
  • Creating a new tab and security vulnerabilities

8. Creating forms

  • Understanding the purpose of forms in collecting user input
  • Understanding form tag
  • Creating input tags (input type radio, checkbox, etc.)

Part 2 (Styling and Modernization)


Day 3:

9. Introduction to CSS

  • How CSS affects HTML
  • Creating stylesheets
  • Targeting (class, ids)
  • Essential concepts (positioning, display, visibility, Box model such as padding, margin, and border)

10. Flexbox

  • Benefits of flexbox and the modernization of flexibility
  • Setting up a flex container and child
  • Flex properties

11. CSS Grid

  • Benefits of CSS Grid and introduction in 2017
  • Setting up a CSS Grid
  • CSS Grid and properties

12. UI and UX

  • What is responsive design?
  • Selectors (hovering, nth selectors, sibling selector, adjacent selectors)
  • Media queries and creating responsive layouts

Part 3 (The Future and Applications)

Day 4:

13. Accessibility

  • History of accessibility on the web
  • Aria labels and tab navigation
  • Tools to test accessibility such as AXE and screen readers

14. Modern CSS and its benefits

  • Bootstrap (and why it is falling out of favor)
  • Tailwind CSS
  • SCSS/SASS

15. Publishing your static webpage

  • Webhosting options
  • Uploading your webpage
  • Testing your webpage

16. Review, Recap, and the future

  • Review key concepts and possible improvements to the barebones webpages
  • Benefits of JavaScript and other libraries/frameworks
  • Additional resources and continued learning opportunities

Josh David Alpert

Josh Alpert is a seasoned Principal Software Engineer at AlgoWorks.ai, based in the Los Angeles Metropolitan Area. 

Custom training workshops are available for this program

Technology training sessions structured around individual or group learning objectives. Learn more about custom training


University IT Technology Training sessions are available to a wide range of participants, including Stanford University staff, faculty, students, and employees of Stanford Hospitals & Clinics, such as Stanford Health Care, Stanford Health Care Tri-Valley, Stanford Medicine Partners, and Stanford Medicine Children's Health.

Additionally, some of these programs are open to interested individuals not affiliated with Stanford, allowing for broader community engagement and learning opportunities.