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