Scribd
Upload
38 views11 pages

HTML, CSS, and JavaScript Course Guide

This document outlines the modules and lessons for a course on programming with HTML, CSS, and JavaScript. The course covers the basics of HTML, CSS, and JavaScript, including HTML structure and elements, CSS styling, JavaScript variables, functions, and objects. It teaches skills like adding paragraphs and links in HTML, styling fonts and colors in CSS, and working with arrays, operators, and built-in objects in JavaScript. The modules include lessons and exercises to practice the concepts taught.

Uploaded by

akramcry
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
38 views11 pages

HTML, CSS, and JavaScript Course Guide

This document outlines the modules and lessons for a course on programming with HTML, CSS, and JavaScript. The course covers the basics of HTML, CSS, and JavaScript, including HTML structure and elements, CSS styling, JavaScript variables, functions, and objects. It teaches skills like adding paragraphs and links in HTML, styling fonts and colors in CSS, and working with arrays, operators, and built-in objects in JavaScript. The modules include lessons and exercises to practice the concepts taught.

Uploaded by

akramcry
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Programming with HTML, CSS and JavaScript (55320A)

Module 1: A Quick Overview of Web Development

Lessons

• HTML is Part of a Team


• Client-side Programming
• Server-side Programming
• Web Development Technologies

Lab 1: None

Module 2: Introduction to HTML

Lessons

• Exercise: A Simple HTML Document


• Getting Started with a Simple HTML Document
• HTML Elements, Attributes, and Comments
• The HTML Skeleton
• Viewing the Page Source
• Special Characters
• HTML Elements and Special Characters
• History of HTML
• The lang Attribute

Lab 1: Getting Started

• A Simple HTML Document


• After completing this module, students will be able to:
• Create a simple HTML page.
• Understand HTML elements and attributes.
• Understand how whitespace is treated in HTML.
• Add special characters to HTML pages.
• Explain the general history of HTML.

Module 3: Paragraphs, Headings, and Text

Lessons

• Paragraphs
• Heading Levels
• Breaks and Horizontal Rules
• Exercise: Paragraphs, Headings, and Text
• The div Tag
• Creating an HTML Page
• Quoted Text
• Preformatted Text
• Inline Semantic Elements
• Exercise: Adding Inline Elements

Lab 1: Exercises included throughout lesson

• Creating an HTML Page


• Adding Inline Elements
• After completing this module, students will be able to:
• Add paragraphs to HTML pages.
• Add headings to HTML pages.
• Add breaks and horizontal rules.
• Add quoted text.
• Add preformatted text.
• Add phrase elements to call out or identify textual elements on the page.
• Understand the meaning of semantic content.

Module 4: HTML Links

Lessons

• Links Introduction
• Text Links
• Absolute vs. Relative Paths
• Targeting New Tabs
• Email Links
• Exercise: Adding Links
• Lorem Ipsum
• The title Attribute
• Linking to a Specific Location on the Page
• Targeting a Specific Location on the Page

Lab 1: Exercises included throughout lesson

• Adding Links
• After completing this module, students will be able to:
• Add basic text links.
• Understand the difference between absolute and relative paths.
• Add links that open in new tabs or windows.
• Add links that open up an email client.
• Add links to specific locations on the page.
Module 5: HTML Images

Lessons

• Inserting Images
• Image Links
• Adding Images to the Document
• Exercise: Adding Images to the Page
• Providing Alternative Images

Lab 1: Exercises included throughout lesson

• Adding Images to the Page


• After completing this module, students will be able to:
• Add images to an HTML page.
• Create image links.
• Make images accessible.

Module 6: HTML Lists

Lessons

• Unordered Lists
• Ordered Lists
• Definition Lists
• Exercise: Creating Lists

Lab 1: Exercises included throughout lesson

• Creating Lists
• After completing this module, students will be able to:
• Create unordered (bulleted) lists.
• Create ordered (numbered) lists.
• Create definition lists.

Module 7: Crash Course in CSS

Lessons

• Benefits of Cascading Style Sheets


• CSS Rules
• Selectors
• Combinators
• Precedence of Selectors
• How Browsers Style Pages
• CSS Resets
• CSS Normalizers
• External Stylesheets, Embedded Stylesheets, and Inline Styles
• Exercise: Creating an External Stylesheet
• Exercise: Creating an Embedded Stylesheet
• Exercise: Adding Inline Styles
• div and span
• Exercise: Styling div and span
• Media Types
• Units of Measurement
• Inheritance

Lab 1: Exercises included throughout lesson

• Creating an External Stylesheet


• Creating an Embedded Stylesheet
• Adding Inline Styles
• Styling div and span Elements
• After completing this module, students will be able to:
• Understand the benefits of CSS.
• Redefine how elements are formatted.
• Create and use CSS selectors.
• Create and use CSS combinators.
• Understand the CSS cascade.
• Understand the role of CSS resets and normalizers.
• Create and use external and embedded stylesheets.
• Add inline styles to HTML elements.
• Use the div and span elements.
• Understand media types.
• Understand and use the viewport tag.
• Understand and select proper units of measurement.
• Understand inheritance in CSS.

Module 8: CSS Fonts

Lessons

• font-family
• @font-face
• font-size
• font-style
• font-variant
• font-weight
• line-height
• font shorthand
• Exercise: Styling Fonts

Lab 1: Exercises included throughout lesson

• Styling Fonts
• After completing this module, students will be able to:
• Use the font-family property.
• Use the font-size property.
• Use the font-style property.
• Use the font-variant property.
• Use the font-weight property.
• Use the line-height property.
• Use shorthand properties, such as font.

Module 9: Color and Opacity

Lessons

• About Color and Opacity


• Color and Opacity Values
• color
• opacity
• Exercise: Adding Color and Opacity to Text

Lab 1: Exercises included throughout lesson

• Adding Color and Opacity to the Text


• After completing this module, students will be able to:
• Use the color property.
• Use the opacity property.

Module 10: CSS Text

Lessons

• letter-spacing
• text-align
• text-decoration
• text-indent
• text-shadow
• text-transform
• white-space
• word-break
• word-spacing
• Exercise: Text Properties

Lab 1: Exercises included throughout lesson

• Text Properties
• After completing this module, students will be able to:
• Use the letter-spacing property.
• Use the text-align property.
• Use the text-decoration property.
• Use the text-indent property.
• Use the text-shadow property.
• Use the text-transform property.
• Use the white-space property.
• Use the word-break property.
• Use the word-spacing property.

Module 11: JavaScript Basics

Lessons

• JavaScript vs. EcmaScript


• The HTML DOM
• JavaScript Syntax
• Accessing Elements
• Where Is JavaScript Code Written?
• JavaScript Objects, Methods, and Properties
• Exercise: Alerts, Writing, and Changing Background Color

Lab 1: Exercises included throughout lesson

• Alerts, Writing, and Changing Background Color


• After completing this module, students will be able to:
• Understand the HTML Document Object Model
• Understand the JavaScript syntax rules.
• Write inline JavaScript.
• Write JavaScript within script blocks.
• Create external JavaScript files.
• Work with JavaScript objects, methods, and properties.
• Reference HTML elements with JavaScript.

Module 12: Variables, Arrays, and Operators

Lessons

• JavaScript Variables
• A Loosely Typed Language
• Google Chrome DevTools
• Storing User-Entered Data
• Exercise: Using Variables
• Constants
• Arrays
• Exercise: Working with Arrays
• Associative Arrays
• Playing with Array Methods
• JavaScript Operators
• The Modulus Operator
• Playing with Operators
• The Default Operator
• Exercise: Working with Operators

Lab 1: Exercises included throughout lesson

• Working with Arrays


• Working with Operators
• After completing this module, students will be able to:
• Create, read, and modify variables in JavaScript.
• Create JavaScript arrays.
• Use JavaScript operators.

Module 13: JavaScript Functions

Lessons

• Global Objects and Functions


• Exercise: Working with Global Functions
• User-defined Functions
• Exercise: Writing a JavaScript Function
• Returning Values from Functions

Lab 1: Exercises included throughout lesson

• Working with Global Functions


• Writing a JavaScript Function
• After completing this module, students will be able to:
• Understand JavaScripts global functions and objects.
• Create custom JavaScript functions.
• Return values from functions.
Module 14: Built-In JavaScript Objects

• Lessons
• Strings
• Math
• Date
• Helper Functions
• Exercise: Returning the Day of the Week as a String

Lab 1: Exercises included throughout lesson

• Returning the Day of the Week as a String


• After completing this module, students will be able to:
• Work with JavaScript’s built-in String object.
• Work with JavaScript’s built-in Math object.
• Work with JavaScript’s built-in Date object.

Module 15: Conditionals and Loops

Lessons

• Conditionals
• Short-circuiting
• Switch / Case
• Ternary Operator
• Truthy and Falsy
• Exercise: Conditional Processing
• Loops
• while and do…while Loops
• for Loops
• break and continue
• Exercise: Working with Loops
• Array: forEach()

Lab 1: Exercises included throughout lesson

• Conditional Processing
• Working with Loops
• After completing this module, students will be able to:
• Write if / else if / else conditions.
• Write switch / case statements.
• Create for and while loops.

Module 16: Event Handlers and Listeners

Lessons
• On-event Handlers
• Exercise: Using On-event Handlers
• The addEventListener() Method
• Anonymous Functions
• Capturing Key Events
• Exercise: Adding Event Listeners
• Benefits of Event Listeners
• Timers
• Typing Test

Lab 1: Exercises included throughout lesson

• Using On-event Handlers


• Adding Event Listeners
• Creating a Typing Test
• After completing this module, students will be able to:
• Understand on-event handlers.
• Identify and use commonly-used on-event handlers.
• Create eventListeners.

Module 17: The HTML Document Object Model

Lessons

• CSS Selectors
• The innerHTML Property
• Nodes, NodeLists, and HTMLCollections
• Accessing Element Nodes
• Exercise: Accessing Elements
• Dot Notation and Square Bracket Notation
• Accessing Elements Hierarchically
• Exercise: Working with Hierarchical Elements
• Accessing Attributes
• Creating New Nodes
• Focusing on a Field
• Shopping List Application
• Exercise: Logging
• Exercise: Adding EventListeners
• Exercise: Adding Items to the List
• Exercise: Dynamically Adding Remove Buttons to the List Items
• Exercise: Removing List Items
• Exercise: Preventing Duplicates and Zero-length Product Names
• Manipulating Tables
Lab 1: Exercises included throughout lesson

• Accessing Elements
• Working with Hierarchical Elements
• Logging
• Adding EventListerners
• Adding Items to the List
• Dynamically Adding Remove Buttons to the List Items
• Removing List Items
• Preventing Duplicates and Zero-length Product Names
• After completing this module, students will be able to:
• Access specific nodes within the HTML DOM.
• Identify nodes by tag name, class name, and CSS selector.
• Access nodes hierarchically.
• Create and remove nodes.
• Dynamically create an HTML page with JavaScript.

Module 18: HTML Forms

Lessons

• How HTML Forms Work


• The form Element
• Form Elements
• Buttons
• Exercise: Creating a Registration Form
• Checkboxes
• Radio Buttons
• Exercise: Adding Checkboxes and Radio Buttons
• Fieldsets
• Select Menus
• Textareas
• Exercise: Adding a Select Menu and a Textarea
• HTML Forms and CSS

Lab 1: Exercises included throughout lesson

• Creating a Registration Form


• Adding Checkboxes and Radio Buttons
• Adding a Select Menu and a Textarea

Module 19: JavaScript Form Validation

Lessons

• Server-side Form Validation


• HTML Form Validation
• Accessing Form Data
• Form Validation with JavaScript
• Exercise: Checking the Validity of the Email and URL Fields
• Checking Validity on Input and Submit Events
• Adding Error Messages
• Validating Textareas
• Validating Checkboxes
• Validating Radio Buttons
• Validating Select Menus
• Exercise: Validating the Ice Cream Order Form
• Giving the User a Chance

Lab 1: Exercises included throughout lesson

• Checking the Validity of the Email and URL Fields


• Validating the Ice Cream Order Form
• After completing this module, students will be able to:
• Access data entered by users in forms.
• Validate text fields, textareas, radio buttons, checkboxes, and select menus.
• Write clean, reusable validation functions.

Module 20: Regular Expressions

Lessons

• Getting Started
• Regular Expression Syntax
• Backreferences
• Form Validation with Regular Expressions
• Cleaning Up Form Entries
• Exercise: Cleaning Up Form Entries
• A Slightly More Complex Example

Lab 1: Exercises included throughout lesson

• Cleaning up Form Entries


• After completing this module, students will be able to:
• Use regular expressions for advanced form validation.
• Use backreferences to clean up form entries.

Common questions

Powered by AI

To make images accessible, developers should use the 'alt' attribute to describe the content and function of each image, ensuring text alternatives are specific and meaningful . For decorative images, an empty alt attribute should be used to inform screen readers to skip over them .

Client-side programming involves writing code that runs on the user's browser, such as HTML, CSS, and JavaScript, to structure, style, and make a web page interactive . Server-side programming involves code that is executed on the server, handling data storage, business logic, and complex calculations before sending the results to the client-side .

Absolute paths should be used when referencing files hosted on a different server or domain, ensuring the link works regardless of the current page's location . This guarantees the specificity of the location but can lead to broken links if the resource moves. Relative paths are preferred for linking resources within the same domain, making the site structure more flexible and portable .

CSS cascading determines which style rules apply when multiple rules could be applied to an HTML element. CSS follows a hierarchy of importance based on specificity (id selectors have higher precedence than class selectors), inline styles, and source order, with styles declared later in a stylesheet overriding earlier ones when all other precedence rules are equal .

HTML treats multiple spaces, tabs, and line breaks as a single space when rendering the content. This means that any additional whitespace introduced in the HTML code does not affect the layout of the web page, allowing developers to format code for readability without impacting visual presentation .

Form validation with JavaScript provides immediate feedback to users, enhancing user experience by quickly catching errors before server submission . Regular expressions offer a powerful way to define complex validation patterns, such as email formats, which ensures data integrity and prevents malformed data from reaching the server . Together, they enhance form processing by balancing user experience with data reliability.

JavaScript is a loosely typed language, meaning variables don't have a fixed type and can store any type of data. This flexibility increases development speed by allowing developers to write less boilerplate code, though it requires careful handling to avoid type-related errors .

JavaScript can interact with the DOM to access and modify HTML elements using methods like getElementById, querySelector, and innerHTML. These manipulations allow developers to dynamically update the content of a webpage, such as changing text, styles, and attributes, or adding and removing elements, without requiring a complete page reload, improving efficiency and user experience .

Semantic HTML elements, like <article>, <header>, <footer>, and <nav>, provide meaning to the content beyond presentation, enhancing accessibility by helping assistive technologies understand the document structure . For SEO, semantic elements improve search engine understanding of page content, potentially improving ranking .

Event listeners provide a way to separate JavaScript code from HTML, improving maintainability and allowing multiple handlers for the same event without overwriting existing handlers. They support various phases of event propagation and can dynamically attach or detach handlers, offering more flexibility than inline event handlers .

You might also like