Practice: Applying Styles to HTML

Lectures 9 • 40 slides

Narration

Slide 1 of Lesson 09: Practice: Applying Styles to HTML

Review of the Previous Lesson

  • Basic operations of Developer Tools (DevTools)
  • How to use the Elements/Inspector panel
  • Checking and editing styles, checking the box model

Theme of This Lesson

"Apply the learned knowledge to style actual HTML"

What We've Learned So Far

  • CSS Basics
  • Layout Techniques
  • CSS Variables
  • Developer Tools

Goal of This Lesson

Apply comprehensive styles to the HTML created last time

flowchart TD A[What We've Learned So Far] --> B[CSS Basics] A --> C[Layout Techniques] A --> D[CSS Variables] A --> E[Developer Tools] B --> F[Practice This Time] C --> F D --> F E --> F F --> G[Create CSS File] F --> H[Reset and Base Style] F --> I[Header Styling] F --> J[Main Content Layout] F --> K[Footer Design] G --> L[Acquire Practical Skills] H --> L I --> L J --> L K --> L

Tasks

  • Creating and loading a CSS file
  • Reset and base styles
  • Styling the header
  • Layout of the main content
  • Designing the footer

Acquire Practical Skills

From theory to practice

1/40

Apps - Try Now

SaaS web services and mobile apps from Yamashin Research Lab.

View Apps