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
