html-css-responsive.md

Responsive Web Design

1. Learn the basics of Responsive web design basics:

   • Set the viewport
   • Size content to the viewport
   • Use CSS media queries for responsiveness
   • How to choose breakpoints
   • View media query breakpoints in Chrome DevTools

2. CSS Flexbox:

   • Flex container properties
   • Flex item properties
   • Flex-direction property

3. CSS Grid Layout:

   • Grid та Flex. Основні поняття
   • Визначення grid-сітки
   • Керування елементами grid-сітки

4. Flexbox Froggy - гра для закріплення

Flexbox Froggy Result:

5. Grid Garden - гра для закріплення

Grid Garden Result: