Home Page Icon
Home Page
Table of Contents for
cover
Close
cover
by Marian Zburlea, Matt Park, Rob Larsen, Brett Jephson, Lewis Coulson
The HTML and CSS Workshop
Preface
About the Book
About the Chapters
Conventions
Before You Begin
Installing Chrome
Installing Visual Studio Code
Installing the "Open in Default Browser" Extension
Installing the Code Bundle
1. Introduction to HTML and CSS
Introduction
HTML
Syntax
Content Types
The HTML Document
The HTML DOM
The Doctype Declaration
Structuring an HTML Document
HTML
Head
Body
Our First Web Page
Exercise 1.01: Creating a Web Page
Metadata
Exercise 1.02: Adding Metadata
Mistakes in HTML
Validating HTML
Exercise 1.03: Validation
Exercise 1.04: Validation Errors
Activity 1.01: Video Store Page Template
CSS
Syntax
Adding Styles to a Web Page
Exercise 1.05: Adding Styles
Exercise 1.06: Styles in an External File
CSSOM
CSS Selectors
Element, ID, and Class
The Universal Selector (*)
Attribute Selectors
Pseudo-classes
Pseudo-elements
Combining Selectors
Exercise 1.07: Selecting Elements
CSS Specificity
The Special Case of !important
Activity 1.02: Styling the Video Store Template Page
Dev Tools
The Top Bar
The Elements Tab
How a Web Page Renders
Summary
2. Structure and Layout
Introduction
Structural Elements
The header Tag
The footer Tag
The section Tag
The article Tag
The nav Tag
The aside Tag
The div Tag
A News Article Web Page
Exercise 2.01: Marking up the Page
Wireframes
Activity 2.01: Video Store Home Page
CSS Page Layouts
Video Store Product Page
Float-Based Layouts
The float Property
The width Property
Clearing Floated Elements
Flex-Based Layouts
The flex Container
The flex Items
Grid-Based Layouts
The grid Container
The grid Items
Exercise 2.02: A grid-Based Layout
The Box Model
Content Box
The padding Property
The border Property
The margin Property
Exercise 2.03: Experimenting with the Box Model
Putting It All Together
Exercise 2.04: Home Page Revisited
Exercise 2.05: Video Store Product Page Revisited
Activity 2.02: Online Clothes Store Home Page
Summary
3. Text and Typography
Introduction
Text-Based Elements
Headings
Paragraphs
Inline Text Elements
Lists
Exercise 3.01: Combining Text-Based Elements
Semantic Markup
Styling Text-Based Elements
CSS Resets
CSS Text Properties
CSS Font Properties
The display Property
Video Store Product Page (Revisited)
Exercise 3.02: Navigation
Breadcrumbs
Exercise 3.03: Breadcrumb
Exercise 3.04: Page Heading and Introduction
Exercise 3.05: Product Cards
Activity 3.01: Converting a Newspaper Article to a Web Page
Summary
4. Forms
Introduction
Form Elements
The form Element
The input Element
The label Element
The textarea Element
The fieldset Element
The select Element
The button Element
Exercise 4.01: Creating a Simple Form
Styling Form Elements
Label, Textbox, and Textarea
Buttons
Select Boxes
Validation Styling
Exercise 4.02: Creating a Form with Validation Styling
Video Store Forms
Exercise 4.03: New Account Signup Form
Exercise 4.04: Checkout Form
Activity 4.01: Building an Online Property Portal Website Form
Summary
5. Themes, Colors, and Polish
Introduction
The Markup
Inverting Colors
New HTML Elements in the Theme
New CSS Background Properties
Exercise 5.01: Creating a Dark Theme
Creating a Dark Theme with the HSL Function
Exercise 5.02: Creating a Dark Theme Using hsl()
CSS Invert Filter
Exercise 5.03: Creating a Dark Theme with the CSS Invert Filter
CSS Hooks
Exercise 5.04: Customizing a Theme with CSS Hooks
Activity 5.01: Creating Your Own Theme Using a New Color Palette
Summary
6. Responsive Web Design and Media Queries
Introduction
Mobile-First
Responsive Web Design
Responsive Viewport
Understanding Basic Media Queries
Exercise 6.01: Using Media Queries to Change the Page Layout
Device Orientation Media Queries
Exercise 6.02: Using Media Queries to Detect Device Orientation
Combining Multiple Media Queries
Print Stylesheets
Exercise 6.03: Generating a Printable Version of a Web Page Using CSS Media Queries
Activity 6.01: Refactoring the Video Store Product Cards into a Responsive Web Page
Summary
7. Media – Audio, Video, and Canvas
Introduction
Audio
Exercise 7.01: Adding Audio to a Web Page
Attributes
The Autoplay Attribute
The preload Attribute
The loop Attribute
The controls Attribute
Styling Audio Controls
Exercise 7.02: Styling Controls
Multiple Sources
The video Element
Attributes
The width and height Attributes
The poster Attribute
Exercise 7.03: Adding Video to a Web Page
Limitations
The track Element
Adding Subtitles
Exercise 7.04: Adding Subtitles
Images
The img Element
The picture Element
Programmable Graphics
The svg Element
The canvas Element
Exercise 7.05: Drawing Shapes
Gradients
Exercise 7.06: Gradients
Animating a Canvas
Exercise 7.07: Animated canvas
Activity 7.01: Media Page
Summary
8. Animations
Introduction
CSS Transitions
Exercise 8.01: Implementing Our First Simple Animation
Exercise 8.02: Enhanced Control in CSS Transitions
Exercise 8.03: CSS Transition Performance
Exercise 8.04: CSS Transition with Multiple Values
Advanced CSS for Animations
CSS Positioning
Overflow
Opacity
Blur
Inserting Content with attr()
Exercise 8.05: Animating a Website Menu
Transition Duration Sweet Spot
Slowing Animations Down
Animation Acceleration and Deceleration
Keyframe Animations in CSS
Using the CSS Animation Property
Exercise 8.06: CSS Preloader Using Keyframes
More CSS Tips and Tricks
Activity 8.01: Animating Our Video Store Home Page
Summary
9. Accessibility
Introduction
What Is Accessibility?
Accessible Images
Exercise 9.01: Accessible Ratings
Semantic HTML
Accessible Forms
Exercise 9.02: Accessible Signup Form
Keyboard Accessibility
Accessible Motion
Accessibility Tools
Axe Tool
Exercise 9.03: Using Axe
Activity 9.01: Making a Page Accessible
Summary
10. Preprocessors and Tooling
Introduction to CSS Preprocessors
Getting Started with Node.js, npm, and SASS
SCSS Introduction
Exercise 10.01: Using SCSS Variables
Nesting in SCSS
Exercise 10.02: Rewriting Existing CSS with Nested SCSS
Import, Control Directives, and Mixins in SCSS
Exercise 10.03: Using SCSS Mixins and Control Directives
Loops in SCSS
Exercise 10.04: Loops in SCSS
Activity 10.01: Converting the Video Store Home Page into SCSS
Summary
11. Maintainable CSS
Introduction to Maintainable CSS
Block, Element, and Modifier
Block
Element
Modifier
Exercise 11.01: Using BEM Markup
Using BEM Markup with SCSS
Exercise 11.02: Applying SCSS to BEM
Structuring Your SCSS into Maintainable Files
Exercise 11.03: Using Structured SCSS Files
Good Practices for Maintainable CSS
Activity 11.01: Making Our Video Store Web Page Maintainable
Summary
12. Web Components
Introduction
Custom Elements
The define Method
Naming Conventions
Unique Names
Extends HTMLElement
Exercise 12.01: Creating a Custom Element
Behavior of a Custom Element
Exercise 12.02: Adding and Using Custom Elements with Attributes
Custom Element Life Cycle
Exercise 12.03: Custom Element Life Cycle
Extending a Built-in Element
Exercise 12.04: Custom Element Extending HTMLAnchorElement
Shadow DOM
Attaching a Shadow DOM
Inspecting the Shadow DOM
Exercise 12.05: Shadow DOM with a Custom Element
HTML Templates
Exercise 12.06: Templates
Creating a Web Component
Activity 12.01: Creating a Profile
Sharing a Web Component
Summary
13. The Future of HTML and CSS
Introduction
Keeping up with the Web
Chrome Canary
Experimental Flags
Browser Vendor Status
Caniuse
Exercise 13.01: Verifying Browser Support for Web Pages Created Using CSS Grid
CSS Houdini
CSS Paint API
Exercise 13.02: Creating a Red Fill Paint Worklet
Custom Properties
Exercise 13.03: The Fill Color Paint Worklet
Input Properties
Exercise 13.04: Paint Worklet with Mouse Input
CSS Properties and Values API
Animating Custom Properties
Exercise 13.05: Animating a Paint Worklet
Current Browser Support
Progressive Enhancement
Exercise 13.06: Progressive Enhancement
Activity 13.01: Button Library
Summary
Appendix
Chapter 1: Introduction to HTML and CSS
Activity 1.01: Video Store Page Template
Activity 1.02: Styling the Video Store Template Page
Chapter 2: Structure and Layout
Activity 2.01: Video Store Home Page
Activity 2.02: Online Clothes Store Home Page
Chapter 3: Text and Typography
Activity 3.01: Converting a Newspaper Article to a Web Page
Chapter 4: Forms
Activity 4.01: Building an Online Property Portal Website Form
Chapter 5: Themes, Colors, and Polish
Activity 5.01: Creating Your Own Theme Using a New Color Palette
Chapter 6: Responsive Web Design/Media Queries
Activity 6.01: Refactoring the Video Store Product Cards into a Responsive Web Page
Chapter 7: Media - Audio, Video, and Canvas
Activity 7.01: Media Page
Chapter 8: Animation
Activity 8.01: Animating Our Video Store Home Page
Chapter 9: Accessibility
Activity 9.01: Making a Page Accessible
Chapter 10: Preprocessors and Tooling
Activity 10.01: Converting the Video Store Home Page into SCSS
Chapter 11: Maintainable CSS
Activity 11.01: Making Our Video Store Web Page Maintainable
Chapter 12: Web Components
Activity 12.01: Creating a Profile
Chapter 13: Future of HTML and CSS
Activity 13.01: Button Library
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Next
Next Chapter
C14506_FM_ePub_Final_SP
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset