Homework markup 4

[smithua]

Всем привет )

Задание:
0. Создать папку с домашкой homework_markup_4

1. Внутри должно быть 2 папки (flexbox, grid)
2. В каждой из них нужно воссоздать Holy Grail Layout https://i.stack.imgur.com/yTzXI.jpg
3. Кто справится досрочно, есть дополнительное задание.
   3.1 В этом макете сверстайте 2 секции (http://j.mp/2PkpJ73) с помощью Grid & Flexbox https://github.com/MastersAcademy/frontend-course-2019/blob/master/lectures/markup3/Main-File-1.zip
   3.2 Отдельно на flexbox
   3.3 Отдельно grid
   .
   .

Что такое Holy Grail Layout
From the Wikipedia summary, and lot of other researches to find the good way to implement this layout, we are looking for something like that:

• Sidebars and main content should have the same height, regardless of which element is the tallest,
• Sidebars should have fixed width and main content fluid width,
• The center column (main content) should appear first in the HTML source,
• If the content is sparse, the footer should stay to the bottom of the page,
• Use a minimal markup and CSS.

[smithua]

Полезные ссылки:

Ссылка на видео с Лекции:
https://youtu.be/W6bD39Eq8_4

Игры по изучению Flexbox & Grid:

• https://flexboxfroggy.com/
• https://cssgridgarden.com/

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/

Почему использовать flex order не очень хорошая идея, тут примеры, которые наглядно это показывают.
https://www.matuzo.at/blog/the-dark-side-of-the-grid-part-2/#visual-order

Autoprefixer:
Тулза для автоматического проставления CSS префиксов, а так же удаляет ненужные префиксы, которые были написаны в вашем CSS

• https://github.com/postcss/autoprefixer
• https://autoprefixer.github.io/

Sara Soueidan гуру в SVG
https://www.sarasoueidan.com/blog/

[smithua]

Слова, часто используемые в CSS-классах

https://github.com/yoksel/common-words