Basics of Web Design HTML5 & CSS

For introductory courses in Web Design

Provide a strong foundation for web design and web development

Basics of Web Design: HTML5, is a foundational introduction to beginning web design and web development. The text provides a balance of “hard” skills such as HTML 5, CSS, and “soft” skills such as web design and publishing to the Web, giving students a well-rounded foundation as they pursue careers as web professionals. Students will leave an introductory design course with the tools they need to build their skills in the fields of web design, web graphics, and web development.

The 5th Edition features a major change from previous edition. Although classic page layout methods using CSS float are still introduced, there is a new emphasis on Responsive Page Layout utilizing the new CSS Flexible Box Layout (Flexbox) and CSS Grid Layout techniques. Therefore, the new 5th Edition features new content, updated topics, hands-on practice exercises, and case studies.

Dr. Terry Ann Felke-Morris is a Professor Emerita at Harper College in Palatine, Illinois. She holds a Doctor of Education degree, a Master of Science degree in information systems, and numerous certifications, including Adobe Certified Dreamweaver 8 Developer, WOW Certified Associate Webmaster, Microsoft Certified Professional, Master CIW Designer, and CIW Certified Instructor.

Dr. Felke-Morris received the Blackboard Greenhouse Exemplary Online Course Award in 2006 for use of Internet technology in the academic environment. She is the recipient of two international awards: the Instructional Technology Council’s Outstanding e-Learning Faculty Award for Excellence and the MERLOT Award for Exemplary Online Learning Resources—MERLOT Business Classics.

With more than 25 years of information technology experience in business and industry, Dr. Felke-Morris published her first website in 1996 and has been working with the Web ever since. A long-time promoter of web standards, she was a member of the Web Standards Project Education Task Force. Dr. Felke-Morris is the author of the popular textbook Web Development and Design Foundations with HTML5, currently in its 9th Edition. She was instrumental in developing the Web Development degree and certificate programs at Harper College. For more information about Dr. Terry Ann Felke-Morris, visit https://terrymorris.net.

1 Internet and Web Basics

The Internet and the Web

Web Standards and Accessibility

Web Browsers and Web Servers

Internet Protocols

Uniform Resource Identifiers and Domain Names

Information on the Web

HTML Overview

Under the Hood of a Web Page

Your First Web Page

Review and Apply

2 HTML Basics

Heading Element

Paragraph Element

Line Break and Horizontal Rule

Blockquote Element

Phrase Element

Ordered List

Unordered List

Description List

Special Entity Characters

HTML Syntax Validation

Structural Elements

Practice with Structural Elements

More Structural Elements

Anchor Element

Practice with Hyperlinks

E-Mail Hyperlinks

Review and Apply

3 Web Design Basics

Your Target Audience

Website Organization

Principles of Visual Design

Design to Provide for Accessibility

Use of Text

Web Color Palette

Design for Your Target Audience

Choosing a Color Scheme

Use of Graphics and Multimedia

More Design Considerations

Navigation Design

Wireframes and Page Layout

Fixed and Fluid Layouts

Design for the Mobile Web

Responsive Web Design

Web Design Best Practices Checklist

Review and Apply

4 Cascading Style Sheets Basics

Cascading Style Sheets Overview

CSS Selectors and Declarations

CSS Syntax for Color Values

Configure Inline CSS

Configure Embedded CSS

Configure External CSS

CSS Selectors: Class, Id, and Descendant

Span Element

Practice with CSS

The Cascade

Practice with the Cascade

CSS Syntax Validation

Review and Apply

5 Graphics & Text Styling Basics

Web Graphics

Image Element

Image Hyperlinks

Configure Background Images

Position Background Images

CSS Multiple Background Images

Fonts with CSS

CSS Text Properties

Practice with Graphics and Text

Configure List Markers with CSS

The Favorites Icon

Image Maps

Figure and Figcaption Elements

Review and Apply

6 More CSS Basics

Width and Height with CSS

The Box Model

Margin and Padding with CSS

Borders with CSS

CSS Rounded Corners

Center Page Content with CSS

CSS Box Shadow and Text Shadow

CSS Background Clip and Origin

CSS Background Resize and Scale

Practice with CSS Properties

CSS Opacity

CSS RGBA Color

CSS HSLA Color

CSS Gradients

Review and Apply

7 Page Layout Basics

Normal Flow

Float

Clear a Float

Overflow

CSS Box Sizing

Basic Two-Column Layout

Vertical Navigation with an Unordered List

Horizontal Navigation with an Unordered List

CSS Interactivity with Pseudo-Classes

Practice with CSS Two-Column Layout

CSS for Print

CSS Sprites

Positioning with CSS

Practice with Positioning

Fixed Position Navigation Bar

Review and Apply

8 Responsive Layout Basics

CSS Flexible Box Layout

More About Flex Containers

Flexbox Image Gallery

Configure Flex Items

Practice with Flexbox

CSS Grid Layout

Grid Columns, Rows, and Gap

Two-Column Grid Page Layout

Progressive Enhancement with Grid

Centering with Flexbox and Grid

Viewport Meta Tag

CSS Media Queries

Responsive Layout with Media Queries

Responsive Grid Layout with Media Queries

Flexible Images with CSS

Picture Element

Responsive Img Element Attributes

Testing Mobile Display

Review and Apply

9 Table Basics

Table Overview

Table Rows, Cells, and Headers

Span Rows and Columns

Configure an Accessible Table

Style a Table with CSS

CSS Structural Pseudo-classes

Configure Table Sections

Review and Apply

10 Form Basics

Form Overview

Text Box

Submit Button and Reset Button

Check Box and Radio Button

Hidden Field and Password Box

Textarea Element

Select Element and Option Element

Label Element

Fieldset Element and Legend Element

Style a Form with CSS

CSS Grid Layout Form

Server-Side Processing

Practice with a Form

More Text Form Controls

Datalist Element

Slider and Spinner Controls

Calendar and Color-Well Controls

More Form Practice

Review and Apply

11 Media and Interactivity Basics

Plug-ins, Containers, and Codecs

Configure Audio and Video

Flash and the HTML5 Embed Element

Audio Element and Source Element

Video Element and Source Element

Practice with Video

Iframe Element

CSS Transform Property

CSS Transition Property

Practice with Transitions

CSS Drop-Down Menu  

Details Element and Summary Element

JavaScript & jQuery

HTML5 APIs

Review and Apply

12 Web Publishing Basics

File Organization

Targeting Hyperlinks

Register a Domain Name

Choose a Web Host

Secure Sockets Layer (SSL)

Publish with File Transfer Protocol

Search Engine Submission

Search Engine Optimization

Accessibility Testing

Usability Testing

Review and Apply

APPENDIX

Answers to Review Questions

HTML5 Cheat Sheet

CSS Cheat Sheet

WCAG 2.1 Quick Reference

Landmark Roles with ARIA

Index

Credits

Web Safe Color Palette