MastersAcademy / frontend-course-2019

Репозиторій з курсу «Advanced Front-end» проекту Masters Academy
https://www.facebook.com/cherkasy.masters/
MIT License
4 stars 19 forks source link

Homework markup 4 #150

Open smithua opened 4 years ago

smithua commented 4 years ago

Всем привет )

Задание:

  1. Создать папку с домашкой homework_markup_4
  2. Внутри должно быть 2 папки (flexbox, grid)
  3. В каждой из них нужно воссоздать Holy Grail Layout https://i.stack.imgur.com/yTzXI.jpg
  4. Кто справится досрочно, есть дополнительное задание. 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:

smithua commented 4 years ago

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

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

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

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

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

smithua commented 4 years ago

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

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