HTML to CSS to Responsive Web Design

On this page…

    Note that all the presentations on this page are available under a Creative Commons Attribution-ShareAlike License. You can use these slides in many ways, provided you follow the terms of the license.

    Scott & Jans: An Intro

    Scott. Jans. Lovecraft. Outlines. Responsive web design.

    Web Development: The Absolute Basics

    Background. History. W3C & WHATWG. Can I Use. Browsers. Choices. Browser parts. Rendering engines. Simple webpages. Elements, attributes, & values. DTDs. Character encoding. ASCII. UTF-8. Setting character encoding. Simple webpages, corrected. Web servers. HTTP. Comments. Editing tools. Templates.

    Bonus: Installing, Configuring, & Using Brackets

    Installation. How it works. First extensions. Brackets as debugging tool. Configuration. Other extensions.

    Bonus: Installing, Configuring, & Using Visual Studio Code

    First tasks. Installation. How VSCode works. The GUI. Key features. Language support. Command palette. IntelliSense. Snippets. Git. Configuration. First extensions. Themes. Basics. Validation. Automation.

    HTML Overview: Elements, Attributes, Entities

    Categorizing HTML elements. Basic document structure. Metadata. Global attributes. Lines & paragraphs. Outlines & sections. Grouping. CSS hooks. Lists. Quotations. Text semantics. Text formatting. Links. Multimedia. Tables. Forms. Frames. Scripting. Foreign characters. Obnoxious & obsolete. Character entities. IE, bringing up the rear. Tools.

    Bonus: Markdown

    Background. Basic syntax. Process. MultiMarkdown. PHP Markdown Extra. Sundown. Pandoc. Testing. Software. Integrating.

    It’s Boxes All the Way Down!: Elements & Their Relationships

    Parents & children. Ancestors & descendants. Grandparents. Siblings. Boxes. Block. Inline.

    CSS Overview: Selectors, Integration, Inheritance, Cascading

    History. Why CSS? Integrating CSS: inline, embedded, linking, @import. The browser processing pipeline (DOM & CSSOM). Basic selectors. Simple: universal, type, class, ID. Compound. Complex: descendant & child combinators. Key selectors. Selector lists. Formatting. <span> & <div>. Inheritance. Cascading: importance, specificity, order. The Cascade. CSS Reset Keywords. Tools.

    CSS Building Blocks: Selectors

    Basics. How many? Simple selectors. Pseudo-classes. Pseudo-elements. <string>. Attributes. Compound selectors. Complex selectors with combinators. Selector lists. 3 wishes.

    CSS Data Types: Classifying Data Used as CSS Values

    Defined. Basic data types. <string>. <url>. <length>: absolute, relative, font-relative, viewport percentage, calc(), <color>.

    CSS Typography: Fonts & Formatting

    Why? Typefaces, fonts, glyphs, & characters. Types. Measure. Leading. Scale. Operating system defaults. Web browser defaults. Core Fonts for the Web. ClearType Font Collection. Font properties. Font stacks. Text properties. font shorthand. Line box properties. Multi-column layout. Generated content. Font formats. @font-face. Licensing.

    Tables & Lists: Organized Data

    Deprecations & removals. Basic tables. Defining sets of rows. Table title. Styling tables. Columns. Sortable columns. Creating tables the easy way. Styling lists.

    CSS Layout: Boxes, Displays, & Positioning

    Box model. Padding. Border. Margin. box-sizing, width, height, & overflow. Layout modes. display. Positioning. Normal flow. Out of normal flow. float & clear. position. z-index. visibility. Opacity. Flexbox. Grid.

    WebSanity Top Secret