Introduction to Web Development and Associated Technologies
Introduction
Web Architecture
The Core 3: HTML
The Core 3: CSS
The Core 3: JavaScript
The World Wide Web Consortium (W3C)
Semantic HTML5
Basic Structure of a Web Page
HTML Syntax
Browsers to Download
Creating a Project, File Naming, and Folder Structuring
Using Brackets to Author Web Pages
Creating your First Web Page
Validating your First Web Page
Semantic Structure and Inline Tags
Introduction
The Structure of a Tag
Global Attributes
Section Elements
Section Tags
Heading Tags
Grouping Tags
Inline Tags (Part 1)
Inline Tags (Part 2)
Inline Tags (Part 3)
Lab 1
Quiz 1
Tables, Lists, and Images
Introduction
Working with Tables (Part 1)
Working with Tables (Part 2)
Lab 2
Working with Lists
Lab 3
Working with Images
Lab 4
Quiz 2
Working with Links
Introduction
Working with Links
Attributes for Links
Creating a Link for an Image / Text
Creating a Link to an Email Address or Phone Number
Creating a Link to a Placeholder
Working with Image Maps
Quiz 3
Cascading Style Sheets Part 1 - Introduction
Introduction
What is CSS?
Why Should I Use CSS?
How CSS Works
Defining Styles
Selector Types (CSS Level 1)
Selector Types (CSS Level 2)
Lab 5: CSS Level 1 Selectors
Lab 6: CSS Level 2 Selectors
Selector Types (CSS Level 3)
Lab 7: CSS Level 3 Selectors
Common Font Properties
Common Background Properties
Common Block Properties
Common Box Properties
Common Border Properties
Common List Properties
Common Positioning Properties
Lab 8: Formatting the Vecta Corp. Site
Cascading Style Sheets Part 2 - Grid Systems, Layout, and Positioning
Introduction
Grid Systems: What is a Grid?
Grid Systems: History of Grids in Design
Grid Systems: Why Should I Use Grids?
Grid Systems: How Grid Systems Work in Web Design
Lab 9: The 960 Grid System
How to Float and Clear Elements
How to Use CSS3 to Create Text Columns
How to Position Elements Using Positioning Properties
Lab 10: Structuring the Vecta Corp. Site using a Traditional Approach
Quiz 4
Cascading Style Sheets Part 3 - Advanced CSS Concepts
Introduction
Valuable Third-Party Tools
Working with Web Fonts: The @font-face selector
Working with Web Fonts: Google Web Fonts
Sprites
Navigation Menus
Accordions
Transitions
Transforms
Animations
Filters
Lab 11: An Advanced Web Page Layout
Lab 12: Making the Web Page Backward Compatible
Lab 13: Designing a Style Sheet for Printers
Quiz 5
Cascading Style Sheets Part 4 - Flex Box Layout
Introduction
What is the Flex Box layout?
Layout Terminology
Layout Properties
Your First Flex Box Layout
Setting Flex Item Dimensions
Aligning Flex Items Horizontally
Aligning Flex Items Vertically
Wrapping and Aligning Wrapped Items
Changing the Order of Flex Items
Lab 14: Creating a Web Page Using Flex Box Layout
Cascading Style Sheets Part 5 - Grid Layout
Introduction
Grid Terminology
Grid Container and Grid Items
Your First Grid Layout: Using Template Areas
How to Align Grid Items and Grid Tracks
Grid Layouts Using Numbered Lines
Grid Layouts Using Named Lines
Grid Layouts Using the 12 Column Grid Concept
Lab 15: Creating a Web Page with Grid Layout
Lab 16: Creating an Advanced Grid Layout
Lab 17: Creating a Grid Layout with a Call To Action
Lab 18: Creating a Grid Layout with a Fixed Sidebar
Lab 19: Creating a Grid Layout with a Headline and Gallery
Lab 20: Creating a Grid Layout with Featured Products
Responsive Web Design
Introduction
Responsive Web Design
UX of the Modern Web
Layouts
Type
Images
Tables
Flat Design
Media Queries
Testing
Resources
Lab 21: A Responsive Website Design (Part 1)
Lab 22: A Responsive Website Design (Part 2)
Forms
Introduction
Forms: Stepping Stones to the Dynamic World
Creating a Form
Individual Form Tags
Grouping Forms with Fieldset and Legend
Textboxes
Checkboxes and Radio Buttons
Buttons
Dropdown Lists and List Boxes
Multi-Line Textboxes
File, Hidden, and Image Fields
Accessibility and Usability with Label
New HTML5 Tags
The Constraint Validation API: Native Data Validation
Quiz 6
Audio and Video
Introduction
Audio and Video in HTML5
Media Types
Codecs
Audio and Video Support in Current Browsers
The <video> and <audio> Tags
Adding Audio and Video to a Web Page
Making Audio and Video Backward Compatible
Quiz 7