DMS 381: Intermediate Markup--HTML5/CSS3

Objectives

by the end of this module, you will be able to

• identify internal and external linking methods
• explain the difference between internal and extneral links
• demonstrate knowledge of best practices for organizing websites

Tutorials

1. linking resources to an HTML page
2. external vs. referential links
3. organizing your website

complete playlist

Assessment

Module 1 is assessed through the Module 1 Quiz in Canvas

Evaluation Criteria

You must achieve an 80% or higher on the Module 1 Quiz to proceed to the rest of the course. You may take the Quiz more than once.

Objectives

by this end of this module, you will be able to

• create internal page navigation
• create external links to web resources
• create referential links to web resources
• use CSS to style links
• create a website structure on the server

Tutorials

1. internal page navigation
2. external links
3. referential links
4. using CSS pseudo-classes to style links
5. uploading a website structure to the server

complete playlist

Web Resources

• Sample File for Tutorial 1
• HTML Color Picker
• w3schools HTML Tutorial
• w3schools CSS Tutorial
• Review: FTP Explained
• Review: FTP with a Client

Assessment

this module will be assessed through the following coding exercises:

1. 2.1 internal and external links
2. 2.2 creating your first web site

Objectives

by the end of this module, you will be able to

• add images to an HTML file
• style image properties using CSS
• use images as background elements
• apply principles of universal design to images

Tutorials

1. images and image properties in HTML and CSS
2. images as backgrounds
3. images and universal design
4. tips for editing images--basic tasks
5. tips for editing images--advanced tasks

complete playlist

Web Resources

• Universal Design Guidelines for Images
• GIMP Image Editing Software

Sources for Free Images

• unsplash.com
• pexels.com
• pixabay.com

Assessment

this module will be assessed through the following coding exercises:

1. 3.1 adding images to a page: HTML and CSS
2. 3.2 image backgrounds
3. 3.3 editing images

Objectives

by the end of this module, you will be able to

• apply cascading style files to multiple web pages in a site
• demonstrate effective design according to principles of visual rhetoric
• adapt borrowed code
• demonstrate best practices of universal design throuhout a website

Tutorials

1. CSS files and how to link them to your website
2. custom fonts
3. icon fonts
4. vector graphics backgrounds and adapting code
5. universal design and site navigation

complete playlist

Web Resources

• CSS3 Patterns Gallery
• Free Front End CSS Background Patterns
• Magic Pattern Toolbox: CSS Patterns
• Hero Patterns
• Font Squirrel
• Font Awesome
• HTML symbol codes from Toptal
• Universal Design for Navigation and Orientation

Assessment

This module will be assessed by demonstration of the following:

1. 4.1 applying CSS files to multiple pages
2. 4.2 original website

Objectives

by the end of this module, you will be able to

• fix resource and linking errors
• demonstrate strategies for fixing code

Tutorials

1. troubleshooting linking errors
2. adapting code

complete playlist

Web Resources

• Stack Overflow
• HTML symbol codes from Toptal

Assessment

This module will be assessed through

1. 5.1 submission of a debugging log
2. 5.2 successful completion of a quiz

Evaluation Criteria: Quiz

You must achieve 100% on the Module 5 Quiz to demonstrate mastery of Module 5 objectives. You may take the quiz at any point after Module 1 has been completed. You may take the Quiz more than once.