Introduction to Web
- What is The Internet?
- The World Wide Web
- Web Server and Domain Name Service
- Web Browser and its purpose
- What are Web Pages?
- Text Editors
- The HTML Code
HTML File Basics
- Creating An HTML Document
- Organizing Your Project Assets
Visual Studio Code (BONUS)
- Installation and Interface Tour
- Common Shortcuts
- Chrome Shortcuts
- VS Code Shortcuts
- Utilizing Emmet.io and Intellisense
- Windows Shortcuts
- Converting Screenshots Into Links For Troubleshooting
- Installing Extensions
- Configuration For Convenience
What is HTML?
- Elements
- The Head
- The Body
- Syntax and semantics
- Setting up the HTML document structure
- Creating Comments
Global Attributes
- Title
- Style
- Class
- Id
Block Elements
- Headings
- Paragraphs
- Line Breaks
- Ordered Lists
- Unordered Lists
- Special Characters
- Preformatted Text
- Details
- Summary
- Horizontal Rule
Inline Elements
- Span
- Bold
- Italic
- Underline
- Strong
- Emphasis
- Insert
- Small
- Big
- Superscript
- Subscript
- Del
- Mark
Images
- Using Royalty Free Images
- Alt Attribute
- Width
- Height
Links
- Relative Links
- Absolute Links
- Link Target
- Text
- Telephone
- Image Link
- Download Link
- Anchor Links
Embedding Media
- Internal Embedding
- External Embedding
- Audio
- Video
- Google Apps
- Social Media
- Manual Embedding
Other Elements
- Tables
- Forms
- Divs
- Link
- Meta
What is CSS?
- CSS Syntax
- Cascading Styles with Inheritance
- Understanding Specificity
Linking CSS to HTML
- Inline Style Attribute
- Internal Style Tag
- External Style Sheet
CSS Selectors
- Element
- Class
- ID
- Multi Selector
- Descendant
- Wild Card
- Direct Child
- General Sibling
- Adjacent Sibling
- Attribute
- Pseudo Class
- Pseudo Element
The Box Model
- Margin
- Padding
- Border and Styling
Box Sizing
- Content Box
- Border Box
Sizing
- Width
- Min-Width & Max Width
- Height
- Min-Height and Max Height
- Pixels
- Percentage
- Viewport Height & Viewport Width
- Rems & Ems
- Ch
- Targeting the Root Element
Colors
- Using Color Generators
- Storing CSS Variables
- Hexadecimal
- Red Green Blue (RGB)
- Hue Saturation Lightness (HSL)
Text
- Text Alignment
- Text Transform
- Text Decoration
- Text Shadow
- Box Shadow
- Font Family
- Font Weight
- Font Style
- Font Size
- Line Height
- Letter Spacing
- Word Spacing
- List Style Type
- Custom List Style Type Using Marker
Background
- Background Color
- Background Image
- Background Size
- Background Repeat
- Background Position
- Position
- Object Fit
- Z-index
Easily Align Elements with Flexbox
Advanced Positioning with CSS Grid
Introduction to Bootstrap
- What is Bootstrap?
- Adding the Bootstrap library CDN
- Integrating Bootstrap library Locally
- Using the grid design pattern
- Using Bootstrap’s custom classes
- Using Bootstrap’s typography
- Using Bootstrap icons
- Using Styled Buttons
Final Project: Company Website with four pages
Standards and validation
- Common HTML and CSS mistakes
- Code validation
- Accessibility Standards
- Google HTML style guide
- Google CSS style guide
Other Tips and More!