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
Curriculum
- 6 Sections
- 21 Lessons
- 5 Hours
Expand all sectionsCollapse all sections
- SECTION-1INTRODUCTION TO HTML:HTML, or HyperText Markup Language, is the fundamental language used to create and design documents on the World Wide Web. It serves as the backbone of web pages, providing the structure and format for content that browsers display. Understanding HTML is essential for anyone looking to build or maintain websites.7
- SECTION-2Introduction to CSS: CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS controls the layout of multiple web pages all at once and is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.7
- SECTION-3Advanced HTML & CSS:As you delve deeper into HTML and CSS, you'll find a wealth of advanced techniques and features that can help you create more sophisticated, dynamic, and responsive web pages. This section covers some of these advanced concepts, providing you with the tools to build professional and engaging web experiences.5
- SECTION-4Project-Based Learning in Web Development: Project-based learning (PBL) is an effective educational approach where students learn by actively engaging in real-world and personally meaningful projects. In web development, PBL enables learners to apply HTML, CSS, and other web technologies to create functional websites or web applications. This hands-on experience reinforces theoretical knowledge and builds practical skills.2
- SECTION-5Additional Resources:2
- Assessment and Certification:0
