Профессиональная верстка сайта - CSS Grid простыми словами

Мы продолжаем уроки профессиональной верстки сайта и в этом видео мы разберем css grid простыми словами. CSS grid на самом деле упрощает адаптивную верстку сайта даже самых сложных макетов. CSS Grid позволяет делать нестандартные шаблоны даже новичку разобравшись в основных свойствах css grid.
Хостинг Fornex - li.tl/Fornex1
Зарегистрируйся прямо сейчас и по промокоду Blog10x Вы получите скидку на все услуги кроме заказа доменов

[@ВиталийВасиленко-э2ц]

большое человеческое спасибо!!! так четко и так ясно никто неизлагает ну или очень мало кто так может ..... как только заработаю первые деньги с верстки отдам их тебе !!! а то и регулярно буду донатить ... правдоаочень пмагаеш!!

[@badmad8234]

Крутяк, шеф. Интересная модель подачи с хорошим темпом.

[@SuprunAlexey]

Темп такой потому что вырезаю половину)

[@elektro-fishingskatfisher2888]

Спасибо за урок! Нехуя не понял! Но спасибо 🙏

[@SuprunAlexey]

ахах пожалуйста

[@РоманРоман-г6о]

Как всегда отличный урок, большое спасибо!

[@geek7807]

2:23 С точки зрения оптимизации, да, картинки должны быть фактического размера. Но стили в любом случае должны быть написаны так, чтобы любая картинка имела заданное значение. 7:03 Разве не лучше использовать not last child? Это как-то логичнее. Да и указатель не очень точный, там ведь .info есть. :08 Не лучше ли сразу в начале обнулять все базовые стили, включая бордеры? 13:30 Закругленны Ладно, всё-всё, я умничать закончил.

[@Vladikslavik]

Я бы сделал превьюхи на отцентрированных бэкграундах с большими фотками, а вывод карточек каруселью и не парился бы. Хотя с точки зрения оптимизации это конечно зашкварно бы было )) Но если карточек на странице всего два ряда, то можно и забить на оптимизацию. Кстати, было бы не плохо показать ученикам как прикрутить сюда карусель для карточек.

[@ЕгорПищальников-з9г]

Про :not(:last-child) очень круто, спасибо!

[@indigolight6007]

друг, этот урок для новичков в том числе. честно, не понял даже о чем ты говоришь. здесь автор не рассказывает, как лучше сделать, а говорит, как можно сделать

[@vitalysementsov3157]

если задаёте вопрос по коду, будьте любезны скидывать кусок кода, вообще в сообществе, при вопросе у меня не работает бэкграунд, вас пошлют куда подальше и заблочат на ресурсе ну либо уволят если вы джут(хотя тут я может перегибаю) всегда скидывайте кусок проблемного кода, часто ваши "я всё написал правильно" означает что вы где-то ошиблись, может ; забыли поставить в конце строки, может слово не правильно написали, это не так бросается в глаза, особенно когда код писал ты сам

[@dinalytvynenko6780]

Спасибо! Очень полезно и доступно!

[@SuprunAlexey]

Все для вас

[@den4ikno130]

Контент супер! Большое тебе спасибо.

[@SuprunAlexey]

Супер, всегда пожалуйста

[@ЕгорПищальников-з9г]

Не очень хорошая практика делать margin-left: -4px; для inline-block элементов, чтобы убрать отступ. Вместо этого лучше убрать пробел между ними в коде. А также margin-top: 50px; лучше ставить всей форме, а у input'а убрать. 15:08 ставьте margin-top: 50px; он ошибся маленько)

[@ivansavkiv2765]

Для input, щоб не було 4px пробілу між ними просто прописати для form font-size: 0)) Лайфхак)

[@garrimilligan6176]

привет! слушай изначально не мог урезать фото,небыло фотошопа да и сейчас нет.и когда вроде как урезал текст и стата не выстроились друг за другом в блоке!что это может быть?хотя весь материал за исключением некоторых названий как у тебя!

[@-genesis-8624]

Крутой урок)

[@SuprunAlexey]

Спасибо

[@teama539]

А как сделать поиск работающим ?

[@lR1anl]

Такой вопрос, а card-container'ы не лучше было бы сделать ненумерованым списком?

[@molotov641]

Спасибо

[@artemii8672]

Очень важный вопрос надеюсь на ответ, почему верстальщики не создают сайты на Wix или webnode?

[@SuprunAlexey]

Для каких то проектов создают. Верстка сайта же не ограничивается такими примитивными макетами, там где недостаточно возможностей конструкторов, там идёт верстка) так же верстка нужна для cms. Так же в любом чуть более сложном проекте и с js фреймворками нужно верстать

[@artemii8672]

@@SuprunAlexey, огромное спасибо за ответ и за ваш контент.

[@SuprunAlexey]

все для вас

[@dmitry_kolom]

Думал уже наверное заброшу после такого, поймал ошибку проверил всё раз 5 ничего не нашел. Просто решил переписать код, переписал код и у меня в одном из строк repeat просто не сработал, просто клоунада какая-то, причем это не по моей ошибке потому что я не менял языков ничего не менял и всё правильно было написано.Хорошо что исправил. .cards{ display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); grid-column-gap:0px; grid-row-gap:30px; } .cards{ display:grid; grid-template-columns: repeat (3, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 30px;

[@maykl_tlkn]

Дякую!

[@graceman999]

А разве можно использовать css grid кроссбраузерно? caniuse.com/#feat=css-grid или я не туда смотрю?

[@MrYaraslav]

а почему картинки в тег figure не не вставлял???

[@ТимурНазаров-у7п]

Как чайник понял, что изучать программирование надо начинать с html и css. Они лежат в основе

[@videostudio5387]

Здравствуйте, скажите пожалуйста зачем тут прописывать закругления: .apart input[type="text"] { border-top-left-radius: 4px; border-bottom-left-radius: 4px;} оно же вообще никак не влияет или я что то не понимаю?

[@AvensisMovie]

Он прописывает их, так как в макете эти закругления присутствуют)

[@denisborisenko9322]

css grid тут просто к слову пришлось?

[@graceman999]

8:00

[@jurakobylinsky8677]

Сделайте, пожалуйста, видео верстки проекта на чистом Material Design Components. И вопрос: MD есть в разных фреймворках: Vue, Angular, Bootsrap, Materialize, React, Vuetify - какие принципиальные отличия между ними, + /- ?

[@SuprunAlexey]

У меня есть уроки Material Design Bootstrap, посмотрите в плейлистах

[@jurakobylinsky8677]

@@SuprunAlexey Видел. Но MDB достаточно большой. К тому же, там не хватает некоторых компонентов, поэтому интересна верстка на чистом MDC. Кстати, самая полная реализация MDC в Vuetify. Но в чем выгода использования фреймворка перед чистым MDC?

[@SuprunAlexey]

и каких компонентов не хватает? На чистом mdc сам каждый компонент собираешься верстать? Выгода во времени, используешь фреймворк, под него уже все есть, зачем еще раз изобретать велосипед

[@jurakobylinsky8677]

@@SuprunAlexey Например, в Materialize нет tables. А вообще, я просто хочу разобраться какой именно МД фреймворк мне подойдёт. Ответов пока не нахожу. А, есть один - у них разные размеры .js а значит, какие-то менее "тяжёлые", а какие-то более шустрые. Вот и хотелось бы с точки зрения профессионала увидеть советы по выбору фреймворка.

[@catmoon6369]

Можешь показать как создать свой виджет для сайта, чтобы фотки подхватывались на сайт из инсты?( И из первого урока почему - то текст при адаптации под телефон красиво и четко вышел, а в декстоп версии лесенкой(

[@SuprunAlexey]

как нибудь сделаю

[@indigolight6007]

дело в размере экрана. у меня например блок с адресом и телефоном едет по горизонтали. не понимаю почему, но так лучше все равно - при масштабировании страницы адрес и телефон всегда на видном месте

[@garrimilligan6176]

Как без фотошопа преобразовать фото в смарт объект?)

[@КомышанСергей]

Можно потом готовый проект в виде архива выложить?

[@SuprunAlexey]

Выкладывайте

[@КомышанСергей]

​@@SuprunAlexey Извиняюсь, не так выразился. Чтобы вы выложили тот проект, который делался в видео, в виде архива

[@garrimilligan6176]

и еще момент я пишу как для ноута,на тел хз как перейти!хотя верстка вреде у тебя адаптированна

[@superzrus4607]

Ребят если что то не получается то сперва перепроверьте код, я так заместо *button-search* написал *batton-search* и потом сидел голову ломал почему всё не так

[@SuprunAlexey]

Да, именно так часто и бывает

[@superzrus4607]

@@SuprunAlexey О здравствуйте, а вы можете подсказать проверенные фриланс площадки? Если не трудно

[@SuprunAlexey]

@@superzrus4607 гляньте у меня есть видео на канале на эту тему

[@superzrus4607]

@@SuprunAlexey Спасибо

[@vitalikisialeu9863]

А можно загрузить готовую верстку?

[@vitalysementsov3157]

за готовое платить надо, вот тебе сайт, иди покупай hostiq.ua/create-website/?.com& это обучающее видео, скажи спасибо, что оно бесплатно, уже начинают раздражать такие халявщики, часто люди платят за такую информацию(за уроки по верстве) сходи на гикблейнз посмотри цену, офигей с цены и не задавай таких вопросов больше

[@garrimilligan6176]

что подскажешь молодой?)

[@ИгорьКазадаев-о2т]

Глаз режет)) в версии для смартфонов пожалуйста напиши ещё название сайта на кнопке, ничего конструктивно не изменится, но выглядеть будет лучше))И спасибо за гриды и флексы, нигде более ясного объяснения не находил

[@SuprunAlexey]

Хорошо

[@iTRON-086]

Просмотрел больше половины ролика - про GRID ни слова. Автор, учись подавать материал.

[@SuprunAlexey]

В смысле? Там где начали его использовать, там про него и говорю, наверное следует досмотреть видео, и верстать проект.

[@iTRON-086]

@@SuprunAlexey Заголовок не подразумевает, что где-то на середине ролика мы дойдём наконец до темы. Ждал гриды, а в ролике просто всё подряд. Вот в чем проблема

[@SuprunAlexey]

Ты курс смотрел? Или так на одно видео зашёл? Посмотри весь курс

[@iTRON-086]

@@SuprunAlexey Спасибо, еще лучше.

[@dinalytvynenko6780]

с 8й минуты используется грид в макете