css-positioning

Stage#1. Positioning in CSS. Flex 🌐

Module Overview 📚

This module focuses on the essential aspects of CSS positioning and Flexbox layouts. It's designed to equip students with a comprehensive understanding of CSS position properties and the block-model concept. Moreover, it emphasizes the use of Flexbox for creating responsive and efficient web layouts.

Learning Objectives 🎯

Students will:

• Gain an in-depth understanding of CSS 'position' properties and the 'block-model'.
• Learn both basic and advanced Flexbox layout techniques, crucial for responsive web design.

Approximate Module Completion Time ⏳

• 6 hours

Theory 📖

Students should explore the following resources:

1. Basics of Element Positioning:

   • Understanding the CSS Position Property
   • The CSS Box Model
   • The Box Model
   • Positioning Types
   • HTML Block and Inline Elements

2. Flexbox:

   • A Guide to Flexbox
   • Interactive Guide to Flexbox
   • Flexbox Tutorial (RU)
   • Flexbox (RU)

Practice 💻

• Complete the "[St1] CSS Positioning & Flexbox" test in the RS APP > Auto Test.

Additional Materials 📘

Enhance your skills with these supplementary materials:

• Position (RU)
• Block Model (RU)
• Block vs Inline (RU)
• Learn Flexbox the Easy Way (Video)
• CSS Position Property Tutorial (Video)
• Flexbox Playground
• Flexbox Cheat Sheet
• Learning Flexbox Through Game
• Position, Floats, Flex, Semantic, CSS3 (RU Video)
• CSS: Flexbox (RU)