Course Overview:
This course provides a comprehensive introduction to HTML and CSS, the foundational technologies for creating and styling web pages. Through a series of lectures, hands-on exercises, and projects, learners will gain the skills needed to build and style their own web pages from scratch.
Module 1: Introduction to HTML
Lesson 1.1: What is HTML?
- Definition of HTML
- Importance of HTML in web development
- Overview of HTML versions
Lesson 1.2: Basic Structure of an HTML Document
- The <!DOCTYPE html> declaration
- The <html>, <head>, and <body> tags
- Creating a simple HTML document
Lesson 1.3: HTML Tags and Elements
- Understanding tags and elements
- Formatting text: bold, italic, underline, superscript, subscript
- Creating links and adding images
Lesson 1.4: Attributes and Formatting
- Using attributes: id, class, src, href, alt, title
- Formatting text: bold, italic, underline, superscript, subscript
- Creating links and adding images
Lesson 1.5: Creating Lists and Tables
- Ordered and unordered lists
- Nested lists
- Table elements: <table>, <tr>, <td>, <th>, <caption>, <thead>, <tbody>, <tfoot>
Lesson 1.6: Forms and Input Elements
- Creating forms: <form>, <input>, <textarea>, <select>, <option>
- Form attributes and methods: action, method, name, value, placeholder
- Input types: text, password, email, radio, checkbox, submit, button
Module 2: Introduction to CSS:
Lesson 2.1: What is CSS?
- Definition of CSS
- Importance of CSS in web design
- Overview of CSS versions
Lesson 2.2: CSS Syntax and Selectors
- Basic CSS syntax: selectors, properties, and values
- Types of selectors: element, class, id, universal, attribute, pseudo-classes, and pseudo-elements
Lesson 2.3: Including CSS in HTML
- Inline CSS
- Internal CSS (using <style> tag)
- External CSS (linking to a stylesheet)
- CSS file structure and organization
Lesson 2.4: Box Model and Layout
- Understanding the box model: margin, border, padding, content
- Width and height properties
- Display property: block, inline, inline-block
- Positioning elements: static, relative, absolute, fixed, sticky
Lesson 2.5: Styling Text and Fonts
- Font properties: font-family, font-size, font-weight, font-style
- Text properties: color, text-align, text-decoration, text-transform, letter-spacing, line-height
- Google Fonts integration
Lesson 2.6: Colors and Backgrounds
- Color properties: color, background-color
- Using hexadecimal, RGB, RGBA, HSL, HSLA color values
- Background properties: background-image, background-size, background-repeat, background-position
Module 3: Project-Based Learning
Project 1: Personal Portfolio Website
- Creating a multi-page website
- Incorporating HTML5 semantic elements
- Styling with CSS and implementing responsive design
Project 2: Interactive Form
- Creating a complex form with various input types
- Styling the form for usability and aesthetics
- Validating form inputs with HTML5 attributes
Additional Resources
- Recommended books and online tutorials
- Links to documentation and community forums
- Practice exercises and challenges
Assessment and Certification
- Quizzes and assignments after each module
- Final project submission and review
- Certification of completion
Contact Details
training@ensuresafe.sg
+65 9680 5878
+65 69777350
Course Features
- Lectures 21
- Quizzes 2
- Duration 5 hours
- Skill level All levels
- Language English
- Students 5
- Certificate Yes
- Assessments Yes
