Introduction to HTML and CSS Coding Part 2

Studies have shown that website design impacts how businesses are viewed, with presentation directly related to trust. With this in mind, it’s crucial for organizations to have well-designed websites.

This course expands on the basics learned in Part 1, teaching additional skills that are useful for building websites.

These include:

• why performance and organization are important,
• how to shape and design a website,
• responsive web design,
• and best practices for HTML and CSS that help keep code clean and reusable.

Course Topics:

Lesson 1: Performance and Organization

TOPIC A: Strategy and Structure

• Performance
• Style Architecture

TOPIC B: Object-oriented CSS

• Object-oriented CSS Methodology
• Separating Structure from Skin
• Separate Content from Container

TOPIC C: Scalable and Modular Architecture for CSS

• Scalable and Modular CSS
• The Five Core Categories
• Which Methodology Should You Choose?

TOPIC D: Reusable Code

• Reusing Styles
• Activity 1-4: Writing Reusable Code
• Summary
• Review Questions

Lesson 2: HTML: How to Position Content

TOPIC A: Review

• Common Terms

TOPIC B: Positioning Content with Floats

• Positioning with Floats
• Layout without Floats
• Three-Column Layout with Floats
• Clearing Floats
• Activity 2-2: Combining Two and Three Column Layouts

TOPIC C: Positioning with Inline-Block

• Positioning with Inline-Block
• Activity 2-3: Creating Columns with Inline-Block
• Summary
• Review Questions

Lesson 3: Complex Selectors

TOPIC A: Commonly Used Selectors

• Type Selector
• Class Selectors
• ID Selectors
• Child Selectors

TOPIC B: Attribute Selectors

• Attribute Present Selector
• Attribute Equals Selector
• Attribute Contains Selector
• Attribute Begins or Ends with Selector
• Pseudo-Classes
• Activity 3-2: Using Selectors
• Summary
• Review Questions

Lesson 4: Responsive Web Design

TOPIC A: Flexible Layouts

• Flexible Layout
• Flexible Grid

TOPIC B: Media Queries

• Using Media Queries
• Logical Operators in Media Queries
• Activity 4-2: Using Dynamic Widths and Media Queries
• Summary
• Review Questions

Lesson 5: Writing Your Best Code

TOPIC A: HTML Coding Practices

• Standards-Compliant Markup
• Use of Semantic Elements
• Use of Proper Document Structure
• Keep Syntax Organized
• Activity 5-1: Applying Best Practices for HTML

TOPIC B: CSS Coding Practices

• Organizing Code with Comments
• Writing CSS Using Multiple Lines and Spaces
• Use Proper Class Names
• Use Shorthanded Properties and Values
• Activity 5-2: Applying Best Practices for CSS
• Summary
• Review Questions