Basics of Web Design

<div class="c-un-numbered-headers-and-contents-list__container"> <ol> <li><strong>Internet and Web Basics</strong> <ul> <li>The Internet and the Web </li> <li>Web Standards and Accessibility </li> <li>Web Browsers and Web Servers </li> <li>Internet Protocols </li> <li>Uniform Resource Identifiers and Domain Names </li> <li>Information on the Web </li> <li>HTML Overview </li> <li>Under the Hood of a Web Page </li> <li>Your First Web Page </li> <li>Review and Apply</li> </ul></li> <li><strong>HTML Basics</strong> <ul> <li>Heading Element </li> <li>Paragraph Element </li> <li>Line Break and Horizontal Rule </li> <li>Blockquote Element </li> <li>Phrase Element </li> <li>Ordered List </li> <li>Unordered List </li> <li>Description List </li> <li>Special Entity Characters </li> <li>HTML Syntax Validation </li> <li>Structural Elements </li> <li>Practice with Structural Elements </li> <li>More Structural Elements </li> <li>Anchor Element </li> <li>Practice with Hyperlinks </li> <li>E-Mail Hyperlinks </li> <li>Review and Apply</li> </ul></li> <li><strong>Web Design Basics</strong> <ul> <li>Your Target Audience </li> <li>Website Organization </li> <li>Principles of Visual Design </li> <li>Design to Provide for Accessibility </li> <li>Use of Text </li> <li>Web Color Palette </li> <li>Design for Your Target Audience </li> <li>Choosing a Color Scheme </li> <li>Use of Graphics and Multimedia </li> <li>More Design Considerations </li> <li>Navigation Design </li> <li>Wireframes and Page Layout </li> <li>Fixed and Fluid Layouts </li> <li>Design for the Mobile Web </li> <li>Responsive Web Design </li> <li>Web Design Best Practices Checklist </li> <li>Review and Apply</li> </ul></li> <li><strong>Cascading Style Sheets Basics</strong> <ul> <li>Cascading Style Sheets Overview </li> <li>CSS Selectors and Declarations </li> <li>CSS Syntax for Color Values </li> <li>Configure Inline CSS </li> <li>Configure Embedded CSS </li> <li>Configure External CSS </li> <li>CSS Selectors: Class, Id, and Descendant </li> <li>Span Element </li> <li>Practice with CSS </li> <li>The Cascade </li> <li>Practice with the Cascade </li> <li>CSS Syntax Validation </li> <li>Review and Apply</li> </ul></li> <li><strong>Graphics &amp; Text Styling Basics</strong> <ul> <li>Graphics on the Web </li> <li>Img Element </li> <li>Image Hyperlinks </li> <li>Configure Background Images </li> <li>Position Background Images </li> <li>CSS Multiple Background Images </li> <li>Fonts with CSS </li> <li>CSS Text Properties </li> <li>Practice with Graphics and Text </li> <li>Configure List Markers with CSS </li> <li>The Favorites Icon </li> <li>Image Maps </li> <li>Figure and Figcaption Elements </li> <li>Review and Apply</li> </ul></li> <li><strong>More CSS Basics</strong> <ul> <li>Width and Height with CSS </li> <li>The Box Model </li> <li>Margin and Padding with CSS </li> <li>Borders with CSS </li> <li>CSS Rounded Corners </li> <li>Center Page Content with CSS </li> <li>CSS Box Shadow and Text Shadow </li> <li>CSS Background Clip and Origin </li> <li>CSS Background Resize and Scale </li> <li>Practice with CSS Properties </li> <li>CSS Opacity </li> <li>CSS RGBA Color </li> <li>CSS HSLA Color </li> <li>CSS Gradients </li> <li>Review and Apply</li> </ul></li> <li><strong>Page Layout Basics</strong> <ul> <li>Normal Flow </li> <li>Float </li> <li>Clear a Float </li> <li>Overflow </li> <li>CSS Box Sizing </li> <li>Basic Two-Column Layout </li> <li>Vertical Navigation with an Unordered List </li> <li>Horizontal Navigation with an Unordered List </li> <li>CSS Interactivity with Pseudo-Classes </li> <li>Practice with CSS Two-Column Layout </li> <li>CSS for Print </li> <li>CSS Sprites </li> <li>Positioning with CSS </li> <li>Fixed Position Navigation Bar </li> <li>Fragment Identifiers </li> <li>Single Page Website </li> <li>Review and Apply</li> </ul></li> <li><strong>Responsive Layout Basics</strong> <ul> <li>CSS Flexible Box Layout </li> <li>More About Flex Containers </li> <li>Flexbox Image Gallery </li> <li>Configure Flex Items </li> <li>Practice with Flexbox </li> <li>CSS Grid Layout </li> <li>Grid Columns, Rows, and Gap </li> <li>Two-Column Grid Page Layout </li> <li>Layout with Grid Areas </li> <li>Progressive Enhancement with Grid </li> <li>Centering with Flexbox and Grid </li> <li>Viewport Meta Tag </li> <li>CSS Media Queries </li> <li>Responsive Layout with Media Queries </li> <li>Responsive Grid Layout with Media Queries </li> <li>Flexible Images with CSS </li> <li>Picture Element </li> <li>Responsive Img Element Attributes </li> <li>Testing Mobile Display </li> <li>Review and Apply</li> </ul></li> <li><strong>Table Basics</strong> <ul> <li>Table Overview </li> <li>Table Rows, Cells, and Headers </li> <li>Span Rows and Columns </li> <li>Configure an Accessible Table </li> <li>Style a Table with CSS </li> <li>CSS Structural Pseudo-classes </li> <li>Configure Table Sections </li> <li>Review and Apply</li> </ul></li> <li><strong>Form Basics</strong> <ul> <li>Form Overview </li> <li>Input Element and Text Box </li> <li>Submit Button and Reset Button </li> <li>Check Box and Radio Button </li> <li>Textarea Element </li> <li>Select Element and Option Element </li> <li>Label Element </li> <li>Fieldset Element and Legend Element </li> <li>Style a Form with CSS </li> <li>Form Layout with CSS Grid </li> <li>Server-Side Processing </li> <li>Practice with a Form </li> <li>Password, Hidden, and File Upload Controls </li> <li>More Text Form Controls </li> <li>Datalist Element </li> <li>Slider and Spinner Controls </li> <li>Date and Color-Well Controls </li> <li>More Form Practice </li> <li>Review and Apply</li> </ul></li> <li><strong>Media and Interactivity Basics</strong> <ul> <li>Getting Started with Audio and Video </li> <li>Audio Element and Source Element </li> <li>Video Element and Source Element </li> <li>Practice with Video </li> <li>Iframe Element </li> <li>CSS Transform Property </li> <li>CSS Transition Property </li> <li>Practice with Interactivity </li> <li>CSS Drop-Down Menu </li> <li>Details Element and Summary Element </li> <li>JavaScript &amp; jQuery </li> <li>HTML5 APIs </li> <li>Review and Apply</li> </ul></li> <li><strong>Web Publishing Basics</strong> <ul> <li>File Organization </li> <li>Register a Domain Name </li> <li>Choose a Web Host </li> <li>Secure Sockets Layer (SSL) </li> <li>Publish with File Transfer Protocol </li> <li>Search Engine Submission </li> <li>Search Engine Optimization </li> <li>Accessibility Testing </li> <li>Usability Testing </li> <li>Review and Apply</li> </ul></li> </ol> <p>Appendix</p> <p>HTML5 Cheat Sheet</p> <p>CSS Cheat Sheet</p> <p>WCAG 2.1 Quick Reference</p> <p>Landmark Roles with ARIA</p> <p>Web Safe Color Palette</p> </div>