Доступно

[WebForMySelf] Технология CSS Grid. Руководство по адаптивной верстке (Денис Булыга)

Тема в разделе "Курсы по программированию"

Цена:
3582 руб
Взнос:
130 руб
Организатор:
Дивия

Список участников складчины:

1. Дивия 2. Zerocool14pvo 3. andfed 4. rtagna 5. Valeriya_Vi 6. galina2702 7. Ingener 8. novikovv 9. aldadis 10. Рудик_Вильнев 11. vikki13 12. TOR1N 13. pavelalex 14. Владимир_vvl 15. andreyzz 16. Органза 17. digitalwizzard 18. MaryMaryM 19. Марина_нн 20. Chepuska 21. slater999 22. ma0331
Купить
  1. Дивия Организатор складчин

    [WebForMySelf] Технология CSS Grid. Руководство по адаптивной верстке (Денис Булыга)

    [​IMG]


    Автор:
    Денис Булыга

    Что такое верстка:
    Верстка
    - это создание веб-страниц с помощью специальных языков. Верстка — это также интересная, постоянно меняющаяся область деятельности в создании сайтов.
    Это процесс перевода макета сайта, созданного дизайнером в графической программе, в HTML-страницу. При этом используются специальные языки, которые для этого предназначены: HTML, CSS, JavaScript.
    Соответственно, верстальщик — это человек, который занимается кодированием HTML-страницы.
    Верстальщик — это профессия, в которой можно постоянно развиваться, и очень много смежных профессий в веб-разработке неразрывно связаны с версткой.

    CSS Grid – высший пилотаж в верстке:
    CSS Grid
    — это мощная новая технология в верстке. Она позволяет быстро создавать динамические, отзывчивые, современные макеты на чистом CSS. При этом код чище и проще в поддержке, по сравнению с традиционными методами верстки.
    Grid Layout — это новая модель макета, которая обладает мощными способностями контролировать размеры и расположение блоков, а также их содержимого.
    Она представляет собой набор горизонтальных и вертикальных линий, которые образуют сетку, состоящую из рядов и колонок. Технология основана на разделении пространства для макета на столбцы и строки, а также на использовании предсказуемого поведения размеров. Grid позволяет точно позиционировать и масштабировать блоки контента в областях сетки, получаемых при пересечении этих столбцов и строк. Таким образом, получаем очень гибкое поведение верстки при адаптации.

    Возможности CSS Grid:
    Фиксированные и гибкие размеры полос Фиксированные и гибкие размеры полос

    Вы можете создать сетку с фиксированными размерами полос — например, используя пиксели. Вы также можете создать сетку с гибкими размерами, используя проценты или новую единицу измерения — fr, предназначенную для этой цели
    Расположение элемента Расположение элемента
    Вы можете размещать элементы в заданном месте, используя номера строк, имена, или путем привязки к области. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в сетке
    Создание дополнительных полос для хранения контента Создание дополнительных полос для хранения контента
    С Grid вы можете определить явную сетку с макетом, но спецификация также касается контента, размещенного за пределами объявленной области. При необходимости добавляются дополнительные строки и столбцы
    Управление выравниванием Управление выравниванием
    CSS Grid содержит функции, позволяющие точно, легко и интуитивно понятно контролировать, как именно элементы выравниваются после размещения в области сетки, и как выравнивается весь Grid Layout
    Управление перекрывающимся контентомУправление перекрывающимся контентом
    CSS Grid позволяет поместить в одну ячейку сетки более одного элемента. Также области могут частично перекрывать друг друга. Управление перекрывающимся контентом можно удобно контролировать с помощью свойства z-index

    Уроки курса:
    Блок 1. Верстка макета Landing Page (6 часов 36 минут)

    Урок 1. Обзор PSD-макета и готовой верстки Landing Page 4:59
    Урок 2. Экспорт изображений для верстки из Adobe Photoshop CC 2018 7:27
    Урок 3. Установка Node Js, Gulp CLI и инициализация проекта 7:07
    Урок 4. Начало создания автоматизированной сборки при помощи Gulp 4 27:22
    Урок 5. Создание дополнительных задач по автоматизации 19:17
    Урок 6. Подготовка к верстке и детальный обзор проекта 15:55
    Урок 7. Создание HTML-разметки для шапки сайта 7:25
    Урок 8. Полная стилизация шапки сайта 18:52
    Урок 9. Создание разметки для блока баннера 4:58
    Урок 10. Стилизация баннера и написание собственного миксина 22:48
    Урок 11. HTML-структура блока с преимуществами 7:14
    Урок 12. Полная стилизация преимуществ 21:11
    Урок 13. HTML-разметка блока с работами 8:04
    Урок 14. Написание стилей для блока работ 32:53
    Урок 15. Доступность интерактивных элементов и адаптация блока работ 14:05
    Урок 16. Написание структуры для информационного блока 3:37
    Урок 17. Полная стилизация информационного блока 16:15
    Урок 18. Создание разметки для блока скиллов 5:37
    Урок 19. Стилизация блока со скиллами 20:08
    Урок 20. Анимация линий блока прогресса 13:34
    Урок 21. HTML-структура блока новостей 7:51
    Урок 22. Полная стилизация блока с новостями 42:25
    Урок 23. HTML-разметка блока карусели 4:35
    Урок 24. Стилизация карусели и подключение плагина OwlCarousel 30:45
    Урок 25. HTML-разметка блока контактов 7:09
    Урок 26. Полная стилизация блока контактов 20:17
    Урок 27. Полная реализация подвала 4:30

    Блок 2. Верстка главной страницы сайта студии (6 часов 25 минут)
    Урок 1. Обзор макета 3:56
    Урок 2. Экспорт SVG из Adobe Illustrator 2:37
    Урок 3. Подготовка к верстке 6:54
    Урок 4. HTML-разметка шапки сайта 10:21
    Урок 5. Стилизация шапки сайта 33:58
    Урок 6. Адаптив шапки сайта 10:49
    Урок 7. Улучшение типографики 10:42
    Урок 8. Создание разметки для блока меню 3:32
    Урок 9. Стилизация блока меню 25:15
    Урок 10. Доработка меню 13:29
    Урок 11. HTML-разметка блока проектов 19:15
    Урок 12. Стилизация блока проектов. Часть 1 17:09
    Урок 13. Стилизация блока проектов. Часть 2 18:53
    Урок 14. Стилизация блока проектов. Часть 3 44:25
    Урок 15. Адаптация блока проектов 32:22
    Урок 16. HTML-разметка блока студио 16:26
    Урок 17. Стилизация блока студио. Часть 1 23:08
    Урок 18. Стилизация блока студио. Часть 2 12:22
    Урок 19. Адаптация блока студио 19:32
    Урок 20. HTML-разметка блока с новостями 6:47
    Урок 21. Стилизация блока новостей 12:46
    Урок 22. Адаптация блока новостей 8:34
    Урок 23. Разметка подвала 3:13
    Урок 24. Полная стилизация подвала сайта 16:43
    Урок 25. Подключение Google maps 12:16

    Бонусы:
    Бонус 1. Премиум-курс «Учебник по основам HTML для начинающих»
    Бонус 2. Премиум-курс «Учебник по основам CSS для начинающих»
    Бонус 3. Премиум-курс «Верстка сайта для начинающих»
    Бонус 4. Премиум-курс «HTML5. Основы»
    Бонус 5. Премиум-курс «CSS3. Основы»
    Бонус 6. Премиум-курс «Теория и практика адаптивной верстки»
    Бонус 7. Премиум-курс «CSS Grid Layout»
    Бонус 8. Премиум-курс «Flexbox»
    Бонус 9. Премиум-курс «Препроцессор Sass»
    Бонус 10. Мини-курс «Построение сеток при помощи Masonry»

    Доп. бонусы:
    1. Курс «Верстка-Мастер. От теории до верстки популярных шаблонов» стоимостью 7970 руб.
    2. Курс «Веб-дизайнер – профессионал. Создание востребованных макетов» стоимостью 5970 руб.

    Обзор видеокурса:

    Скрытый текст. Открывается зарегистрированным пользователям.



    Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...
     
    ma0331, Assylzhan91, aldadis и ещё 1-му нравится это.
  2. Похожие складчины
    Загрузка...
  3. Tiki Активный складчик
    [geekbrains] Java. Уровень 1 (Александр Вдовенков)
    Ссылка на складчину - Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...
    Курс от компании GeekBrains - Java уровень 1 (2019 года)
    Курс состоит из 8 видеоуроков + 8 практических заданий. Каждый урок представлен в виде вебинара, продолжительностью от 1.5 до 2 часов.

    Чему обучают данные курсы:
    • Ознакомитесь с одним из самых востребованных языков программирования;
    • Научитесь устанавливать и настраивать инструменты разработчика;
    • Изучите основные конструкции, применяемые при разработке программ;
    • Напишите игру “Крестики-нолики” в процедурном стиле;
    • Изучите основные принципы объектно-ориентированного программирования и научитесь применять их на практике;
    • Узнаете, как преобразовать программу из обычного процедурного вида в ООП, и научитесь такие программы составлять;
    • Познакомитесь с созданием графического интерфейса с помощью библиотеки Swing и напишите приложение с его использованием;

    Названия уроков:
    1) Введение
    2) Основные конструкции
    3) Практика
    4) Крестики-нолики в процедурном стиле
    5) Введение в ООП
    6) Практика ООП и работа со строками
    7) Написание приложения с графическим интерфейсом
     
    Последнее редактирование модератором: 12 май 2019
    Tiki,
  4. Leo. Активный складчик
    _Neo [Яндекс Практикум] Аналитик данных

    Начните зарабатывать, анализируя

    Что именно вы будете делать, когда станете аналитиком
    Выгружать, преобразовывать и очищать данные с помощью SQL-запросов.
    Создавать дашборды с помощью Tableau и других инструментов.
    Запускать А/В-тестирования для проверки гипотез.
    Рассчитывать ключевые метрики работы компании и оценивать их значимость.
    Помогать бизнесу принимать решения на основе данных.

    Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...
     
    Leo.,
Наверх