Open Chebutalio opened 2 years ago
Завдання:
Створити папку з домашкою 4-layouts
В середині має бути дві папки: flexbox, grid;
В папці flexbox потрібно навєрстать Holy Grail Layout;
В папці grid потрібно також навєрстать Holy Grail Layout; Holy Grail Layout - https://i.stack.imgur.com/yTzXI.jpg
Кольори можете використати інші.
Корисні посилання: Слова, що часто використовуються в CSS-класах: https://github.com/yoksel/common-words
Ігри для вивчення Flexbox:
https://flexboxfroggy.com/ (дуже рекомендую) https://codingfantasy.com/games/flexboxadventure (опціонально) https://knightsoftheflexboxtable.com/ (опціонально) https://mastery.games/flexboxzombies/ (опціонально)
Grid: https://cssgridgarden.com/ (дуже рекомендую) https://codingfantasy.com/games/css-grid-attack (опціонально)
A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Grid https://css-tricks.com/snippets/css/complete-guide-grid/
Flexbugs A community-curated list of flexbox issues and cross-browser workarounds for them. https://github.com/philipwalton/flexbugs
Відео та блог о Grid & Flexbox от Jen Simmons: https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag https://gomakethings.com/layout-land/
CSS директива Supports(): https://medium.com/web-standards/supports-92dba6de7ae7 https://css-tricks.com/how-supports-works/ https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
Для перевірки браузерної підтримки CSS/JS фич https://caniuse.com/ https://www.caniemail.com
Чому використовувати flex order не дуже гарна ідея: https://www.matuzo.at/blog/the-dark-side-of-the-grid-part-2/#visual-order
Autoprefixer: Штука, що проставляє автоматично префікси в вашому CSS: https://github.com/postcss/autoprefixer https://autoprefixer.github.io/
Завдання:
Створити папку з домашкою 4-layouts
В середині має бути дві папки: flexbox, grid;
В папці flexbox потрібно навєрстать Holy Grail Layout;
В папці grid потрібно також навєрстать Holy Grail Layout; Holy Grail Layout - https://i.stack.imgur.com/yTzXI.jpg
Кольори можете використати інші.
Корисні посилання: Слова, що часто використовуються в CSS-класах: https://github.com/yoksel/common-words
Ігри для вивчення Flexbox:
https://flexboxfroggy.com/ (дуже рекомендую) https://codingfantasy.com/games/flexboxadventure (опціонально) https://knightsoftheflexboxtable.com/ (опціонально) https://mastery.games/flexboxzombies/ (опціонально)
Grid: https://cssgridgarden.com/ (дуже рекомендую) https://codingfantasy.com/games/css-grid-attack (опціонально)
A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Grid https://css-tricks.com/snippets/css/complete-guide-grid/
Flexbugs A community-curated list of flexbox issues and cross-browser workarounds for them. https://github.com/philipwalton/flexbugs
Відео та блог о Grid & Flexbox от Jen Simmons: https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag https://gomakethings.com/layout-land/
CSS директива Supports(): https://medium.com/web-standards/supports-92dba6de7ae7 https://css-tricks.com/how-supports-works/ https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
Для перевірки браузерної підтримки CSS/JS фич https://caniuse.com/ https://www.caniemail.com
Чому використовувати flex order не дуже гарна ідея: https://www.matuzo.at/blog/the-dark-side-of-the-grid-part-2/#visual-order
Autoprefixer: Штука, що проставляє автоматично префікси в вашому CSS: https://github.com/postcss/autoprefixer https://autoprefixer.github.io/