CSS Grid: Короткий, Но МОЩНЫЙ Гайд!

  Рет қаралды 48,766

Анна Блок

Анна Блок

Күн бұрын

⚡️ Обновленная версия видео - • 🔥 CSS Grid - самый ПОН...
🔥 Марафон Grid CSS - frontendblok.com/marathons/gr...
11-дневный марафон с практическими заданиями для скорейшего закрепления темы, которую активно используют при верстке сайтов.
Материалы из видео:
1) Can I use - caniuse.com/#feat=css-grid
2) W3 - www.w3.org/TR/css-grid-1/
3) Grid Garden - cssgridgarden.com/#ru
4) Шпаргалка Grid - tpverstak.ru/grid/
5) Книга "CSS для профи"
Таймкоды:
00:00 Вступление
00:16 Определение Grid
00:56 Создание стилей Grid на примере
01:41 Стили для родительского блока
02:33 Стили для дочерних элементов
03:20 Стоит ли использовать Grid CSS в 2020 году
03:43 Обучение верстке сайтов
04:06 Источники для изучение Grid
05:54 Итоги
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/

Пікірлер: 97
@annblok_webdev
@annblok_webdev 3 жыл бұрын
Таймкоды: 00:00 Вступление 00:16 Определение Grid 00:56 Создание стилей Grid на примере 01:41 Стили для родительского блока 02:33 Стили для дочерних элементов 03:20 Стоит ли использовать Grid CSS в 2020 году 03:43 Обучение верстке сайтов 04:06 Источники для изучение Grid 05:54 Итоги
@andrejs0tube
@andrejs0tube 3 жыл бұрын
багодаря вашим урокам начал использовать гриды более года назад, для формирования отчетов. Спасибо за инфу!
@Rasmik13
@Rasmik13 3 жыл бұрын
Большое спасибо за Grid Garden. Очень помогло!
@85nik85
@85nik85 3 жыл бұрын
Блок, ты офигенная! Ты... Ты... Ты даже не блок! Ты целый КУБ!!!
@frozeninside5004
@frozeninside5004 3 жыл бұрын
Вот это прям кабзда как подробно ) прям для меня 😂👍
@Snegurjan
@Snegurjan 3 жыл бұрын
Самураям привет))
@frozeninside5004
@frozeninside5004 3 жыл бұрын
@@Snegurjan Привет )
@mikaelgevorgyan4521
@mikaelgevorgyan4521 3 жыл бұрын
Сел кушаю и смотрю =))) интересно очень было слушать и вдруг видос закончился о_О!!!На столь интересно было,что не заметил как пролетели эти почти семь минут
@annblok_webdev
@annblok_webdev 3 жыл бұрын
🤩 Я рада, что видео понравилось, будут новые видео и с большим таймингом
@mikaelgevorgyan4521
@mikaelgevorgyan4521 3 жыл бұрын
@@annblok_webdev Привет!Тайминг нормален =)))!Я сам просто не понял как быстро пролетело время...А ты когда нибудь сайт про хостинг делала?
@progerlife6690
@progerlife6690 3 жыл бұрын
Спасибо, годная инфа)
@user-cb5xj1lg1l
@user-cb5xj1lg1l 3 жыл бұрын
Какой интересный гайд! Я в шоке! Прекрасный новый фон
@azatmiqaelyan6652
@azatmiqaelyan6652 3 жыл бұрын
3 дня назад закончил книгу > и все было интересно 👍
@annblok_webdev
@annblok_webdev 3 жыл бұрын
Поздравляю! 🥳
@niftyfifty1337
@niftyfifty1337 3 жыл бұрын
как успехи сейчас?
@azatmiqaelyan6652
@azatmiqaelyan6652 3 жыл бұрын
@@niftyfifty1337 хорошие успехи. Спасибо!
@silenciomar
@silenciomar Жыл бұрын
@@azatmiqaelyan6652 а как успехи сейчас?))
@hexruin4569
@hexruin4569 3 жыл бұрын
Левая часть сайта Правая часть сайта
@hexruin4569
@hexruin4569 3 жыл бұрын
Грид нулевых годов
@annblok_webdev
@annblok_webdev 3 жыл бұрын
Да
@sergiogiuno8859
@sergiogiuno8859 3 жыл бұрын
Спасибо за видео. Скажите пожалуйста что чаще используется в работе верстальщика bootstrap или grid.
@annblok_webdev
@annblok_webdev 3 жыл бұрын
Зависит от проекта и от целей проекта. И то и то может использоваться часто.
@user-gv2dt2dx9f
@user-gv2dt2dx9f 3 жыл бұрын
Круто! Дякую за корисну інфу)
@annblok_webdev
@annblok_webdev 3 жыл бұрын
Спасибо :)
@nas19tom51
@nas19tom51 3 жыл бұрын
Подробно и полезно спасибо
@shertskoff6852
@shertskoff6852 3 жыл бұрын
Подскажи на Bootstrap классы row и col- , которые делают разметку это то же самое css grid?
@annblok_webdev
@annblok_webdev 3 жыл бұрын
Нет, потому что Bootstrap 4 работает на Flexbox. Принцип построения отличается.
@yuripalienko6259
@yuripalienko6259 3 жыл бұрын
Лично мне гриды нужны были только если есть список и нужно его адаптивно показывать в несколько колонок, все остальное проще флексами, тут в примере то же самое, список из 6 элементов, получатся гриды это классный способ отображать списки.
@annblok_webdev
@annblok_webdev 3 жыл бұрын
Всё так 👍
@catsapp
@catsapp Жыл бұрын
А на флексах легально верстать макет?
@shaxzod1138
@shaxzod1138 Жыл бұрын
Спасибо вам большое!!!
@evgeniyshapovalov2867
@evgeniyshapovalov2867 2 жыл бұрын
Красавка, спасибо:)
@goncharovpro
@goncharovpro 3 жыл бұрын
Короткий и очень слабый урок - правильное название ролика. Половина воды (что можно найти в поисковике доп.информацию) + реклама своего марафона. Дизлайк однозначно
@khabarho9146
@khabarho9146 3 жыл бұрын
Делайте пожалуйста видео про адаптивная верстка
@igorkl5167
@igorkl5167 3 жыл бұрын
Красивый background!
@user-ti9ev4nw2k
@user-ti9ev4nw2k 3 жыл бұрын
Годнота!
@mikaelgevorgyan4521
@mikaelgevorgyan4521 3 жыл бұрын
особена когда используешь grid-area
@MusicDan4o
@MusicDan4o 2 жыл бұрын
Супер. Помогла окончательно разобраться в сетках. Спасибо большое!
@alenachuyankova
@alenachuyankova 2 жыл бұрын
Шикарная шпаргалка! Большое спасибо!
@VRazvedkaSPN
@VRazvedkaSPN 3 жыл бұрын
Не совсем понял. grid-template-columns указали 4 колонки, а позиционирование в grid-column пять колонок...? 3/5, 4/5?
@annblok_webdev
@annblok_webdev 3 жыл бұрын
В видео же объяснила почему так)) отсчёт идёт по линиям grid-lines
@user-uo2qw1cm1v
@user-uo2qw1cm1v 3 жыл бұрын
Спасибо
@getinspired_live
@getinspired_live 2 жыл бұрын
спасибо)
@mikaelgevorgyan4521
@mikaelgevorgyan4521 3 жыл бұрын
Обожаю Grid пишешь на реакте и забываешь,что там уже все на своих позициях давно стоят =)))!
@dmitriystoyanov933
@dmitriystoyanov933 3 жыл бұрын
Я вот только сейчас на грид перехожу. Как же парят эти маргины и паддинги, он реально упрощает жизнь.
@ultraduck100
@ultraduck100 3 жыл бұрын
@@dmitriystoyanov933 а если на сайте надо сверстать блок в котором адаптивные плитки, то без грида это вообще геморройный гемор )
@user-ew4dl5ek2i
@user-ew4dl5ek2i 2 жыл бұрын
спасибо
@anthony_sdv
@anthony_sdv 3 жыл бұрын
В данном макете можно обойтись 3 колонками, а контент в первой выравнивать по левому краю 😜
@annblok_webdev
@annblok_webdev 3 жыл бұрын
Как вариант. Такое решение тоже подходит, но там текст везде выравнивается по левому краю.
@veshua_j
@veshua_j Жыл бұрын
И вод я здесь )
@user-qz4pq2gu4w
@user-qz4pq2gu4w 3 жыл бұрын
Такой вопрос. Если выбирать между CSS GRID и BOOTSTRAP GRID, то что проще и практичней? Что лучше учить новичку?
@snippetdev8456
@snippetdev8456 3 жыл бұрын
Ты задаёшь такие глупые вопросы. Ответ - знать нужно всё, а иначе зачем ты такой нужен, знающий 1/100 от всего WEB.
@Beast8833
@Beast8833 3 жыл бұрын
сравнил кислое с красным.... гриды это технология, бс(css) это фреймворк построенный на технологии флексов
@user-qz4pq2gu4w
@user-qz4pq2gu4w 3 жыл бұрын
@@snippetdev8456 Все знать не реально. Сколько ты сайтов видел на grid? я думаю если откроешь рандомно сайты из поисковой выдачи, это будет 1 из 10. Вопрос был что учить новичку в html и css. Умничать не обязательно. Был бы таким умником, сразу бы понял, что новичку выучить сразу "ВСЕ" не получится, нужно учить постепенно.
@user-qz4pq2gu4w
@user-qz4pq2gu4w 3 жыл бұрын
@@Beast8833 Где ты видел сравнение? Вопрос не ясен? Повторю. Что проще выучить, что более востребовано и чаще применяется CSS GRID или BOOTSTRAP ? С чего начать новичку?
@Beast8833
@Beast8833 3 жыл бұрын
@@user-qz4pq2gu4w html css js, это основа сайтостроения, без всяких фреймворком типа бутстрап будет понимание основ, бутстрап учить и не придется, только ознакомиться с классами, которые в нем используются для сетки....так понятнее?
@flaviooliveira3095
@flaviooliveira3095 3 жыл бұрын
Bootstrap 👨🏽‍💻
@user-qv5ti2vl4i
@user-qv5ti2vl4i 3 жыл бұрын
2:52 не пойму, почему блок "ОБО МНЕ" grid-column: 1/3 а не 1/2
@annblok_webdev
@annblok_webdev 3 жыл бұрын
Счёт идёт по разделяющим линиям
@thekamol
@thekamol 3 жыл бұрын
хотелось бы бутстрап 5 будет построена на грид
@mirandal9987
@mirandal9987 2 жыл бұрын
ну и прописали мы в стилях сетку. что дальше то?
@anton.k.
@anton.k. 3 жыл бұрын
а чем это лучше флексбоксов
@annblok_webdev
@annblok_webdev 3 жыл бұрын
Флексы для линейной расстановки элементов по одной из двух осей, а с гридами элементами можно управлять в двух осях.
@stevepopcorn8670
@stevepopcorn8670 3 жыл бұрын
А есть Анна Строка?
@catsapp
@catsapp Жыл бұрын
Народ, IE 6 поддерживаем?
@drmackey69
@drmackey69 3 жыл бұрын
Ребят, посоветуйте хороших живых ютуб каналов по типу этого, которые посвещены веб разработке. Был бы признателен...
@annblok_webdev
@annblok_webdev 3 жыл бұрын
Ютуб обычно сам отлично рекомендует, когда вы смотрите видео по конкретной тематике. в данном случае веб.
@Nick-il7it
@Nick-il7it 3 жыл бұрын
От себя могу порекомендовать мой топ каналов: от 0 до 1, Просто: Разработка и Фрилансер по жизни. Если нужно больше JS`a то Владилен Минин, WebDev с нуля: канал Алекса Лущенко и IT-Камасутра
@ASS-hl2on
@ASS-hl2on 3 жыл бұрын
@@Nick-il7it it Kamasutra
@gaeresnazarenko9059
@gaeresnazarenko9059 3 жыл бұрын
я шестой лайк поставил и первый комент))))
@annblok_webdev
@annblok_webdev 3 жыл бұрын
😅отлично!
@egorkomarov4719
@egorkomarov4719 3 жыл бұрын
Хочу больше тик ток видосов =)
@user-vs4nr6jv6p
@user-vs4nr6jv6p 2 ай бұрын
На когото она так похожа ))))
@azatmiqaelyan6652
@azatmiqaelyan6652 3 жыл бұрын
Мне сейчас 15 лет
@slime155
@slime155 3 жыл бұрын
всем плевать братан
@azatmiqaelyan6652
@azatmiqaelyan6652 3 жыл бұрын
@@slime155 И мне плевать на тебя , если я в свои 15 лет добился многого читал эту книгу и много других книг и знаю на много больше тебя, добился большего, и сейчас работаю в этой сфере, то мне плевать на людей каких как ты.
@slime155
@slime155 3 жыл бұрын
@@azatmiqaelyan6652 Ничего себе Больше меня добился. Даже читал эту книгу и много других книг (непонятно какую книгу). Ну это ты конечно даа.. Еще и в 15 лет. Очень интересно!!! На самом деле читаю твой комментарий, и понимаю что ты 15летний дурачок который решил повыёбываться типо: "Ой смотрите, мне только 15 а я уже программирование учу, это значит что я добился большего чем вы".
@azatmiqaelyan6652
@azatmiqaelyan6652 3 жыл бұрын
@@slime155 знаешь что да ити ти.. просто не хочу испортит комментарии этого замечательного видео. Чего ты добился в этой жизни диванний эксперт. Или ты новерно какой себе программист котор пишет говно код. И еще раз говорю мне плевать на тебя что хочешь пиши. И ты не достоин того чтобы я тратил свое драгоценное время чтобы отвечать твои легко мисленные комментарии диванного эксперта. Смотри на себя в зеркало! !!!!
@slime155
@slime155 3 жыл бұрын
@@azatmiqaelyan6652 за тебя стыдно. Какой из тебя программист, если ты даже писать грамотно не можешь. Я да, добился побольше чем ты, это очевидно. И я в свои годы не писал в интернете типо посмотрите мне 15 лет а я уже крутой, учу программирование.
@ARTEMFOREVER
@ARTEMFOREVER 3 жыл бұрын
3:32 - вся суть Ани) в этих секундах.
@vitalikgorohkov1896
@vitalikgorohkov1896 3 жыл бұрын
А что не так?
@thegate4407
@thegate4407 3 жыл бұрын
Что. За .....реклама тупо
@maksimrugalov3158
@maksimrugalov3158 3 жыл бұрын
Сложно объясняешь, не трате время, вообще ничего не понял
@user-dd3nm6yz6d
@user-dd3nm6yz6d 3 жыл бұрын
Флекс, Грид, Бутстрап... Ребята вы серьёзно? Да это же плоско-каменный век. Почему не развиваете 3d интернет? Взгляните сюда. @t Интернет должен стать полностью 3-дэшным. Или так и будете лепить этот плоский метро-стиль?
@Beast8833
@Beast8833 3 жыл бұрын
потому что интернет это не только "сделать 3.14здато, не как у всех", но и частично как платформа, где можно продавать, а для продаж нужно, чтобы робот мог индексировать "плоский" сайт, сайт, состоящий только их webGL, он не для этого
@TalkerTube
@TalkerTube 2 жыл бұрын
Не надо так яростно размахивать руками. Очень отвлекает. Вы видимо где-то услышали, что на видео нужно жестикулировать и все такое. Фишка в том что нужно иметь чувство меры во всем. И в этом тоже
@user-gn1jl9sg8h
@user-gn1jl9sg8h Жыл бұрын
весь ролик реклама, дизлайк, куча воды
@annblok_webdev
@annblok_webdev Жыл бұрын
На канале есть новый ролик про грид kzbin.info/www/bejne/mJDGlGZ4ocqtb6s&si=EnSIkaIECMiOmarE
@mariialysenko1094
@mariialysenko1094 2 жыл бұрын
Ужасный урок
@user-cv9xy4uu2f
@user-cv9xy4uu2f Жыл бұрын
Ни о чем
@velesdragon6267
@velesdragon6267 3 ай бұрын
Фигня полная а не объяснение
😎 Pixel Perfect верстка сайтов на практике
31:26
ПЕЙ МОЛОКО КАК ФОКУСНИК
00:37
Masomka
Рет қаралды 9 МЛН
GADGETS VS HACKS || Random Useful Tools For your child #hacks #gadgets
00:35
FLIP FLOP Hacks
Рет қаралды 102 МЛН
He Threw A Banana Peel At A Child🍌🙈😿
00:27
Giggle Jiggle
Рет қаралды 15 МЛН
What is the difference between Float, Flexbox and Grid CSS?
10:06
Анна Блок
Рет қаралды 216 М.
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Slaying The Dragon
Рет қаралды 441 М.
CSS units for font-size: px, %, em, rem, vw, vh, vmin, vmax
18:35
Анна Блок
Рет қаралды 68 М.
CSS Grid Layout. Практика + шпаргалка.
34:22
Фрілансер по життю
Рет қаралды 172 М.
Google Fonts уже не тот ❌
6:21
Анна Блок
Рет қаралды 8 М.
CSS Pseudo elements Before and After: Examples
11:55
Анна Блок
Рет қаралды 101 М.
7 ways to vertically and to horizontally center with CSS
12:00
Анна Блок
Рет қаралды 91 М.
ПЕЙ МОЛОКО КАК ФОКУСНИК
00:37
Masomka
Рет қаралды 9 МЛН