О курсе
CSS Grid Layout – это гибкий и мощный способ управления размещением элементов, который вместе с базовыми элементами CSS реализует полную и завершенную систему создания макетов веб-страниц.
При прохождении курса «Верстка на Grid» вы познакомитесь с основами CSS Grid и на практике узнаете, как эффективно использовать CSS Grid для создания гибких и адаптивных макетов. Вы научитесь создавать сетки с помощью grid-template-columns и grid-template-rows, задавать размеры и расположение элементов внутри сетки с использованием grid-column и grid-row, а также управлять пространством между элементами с помощью grid-gap. По окончании курса вы можете создавать сложные сетки, поймете, как управлять расположением и размерами элементов, а также научитесь использовать мощные функции, такие как позиционирование элементов, создание областей сетки и многие другие.
Данный обучающий курс предоставит вам не только теоретическое понимание лучших практик и современных трендов в области верстки, но и практические навыки создания гибких и современных веб-макетов. После прохождения курса вы сможете получить сертификат, подтверждающий ваши знания и умение использовать Grid-верстку.
Курс «Верстка на Grid» идеально подходит для веб-разработчиков, дизайнеров и всех, кто заинтересован в создании современных и адаптивных веб-страниц с помощью CSS Grid.
Этот курс входит в специальности:
Предварительные Требования
Курс подойдет тем, кто уже имеет базовые знания HTML и CSS, и хочет познакомиться с CSS Grid и изучить основы этой технологии для уверенного использования ее на практике.
Вы научитесь
- Использовать CSS Grid во время верстки веб-страниц.
- Использовать Figma для создания шаблонов и дальнейшей работы.
- Создавать свои стили.
- Создавать адаптивные макеты с помощью медиа-запросов
- Использовать Grid для создания различных макетов для разных устройств и экранов
- Понимать особенности и уметь применять Grid colums (столбцы) и Grid rows (строки
- Понимать и применять на практике возможности объединения ячеек и именования линий.
- Использовать функции repeat, minmax, fit-content и другие, позволяющие создавать сложные и гибкие сетки
- Использовать фракционные единицы (fr) и автоматические размещения (auto-fit и auto-fill).
- Применять grid-template-areas и разбивать грид на grid-areas
- Выравнивать ячейки грида с помощью правил justify-items и align-items. Выравнивать контент в ячейках.
- Использовать max-content и min-content
- Упорядочивать элементы и управлять отображением элементов в блоках.
- Ограничивать области перемещения блоков с абсолютным позиционированием.
- Использовать свойства flex и grid. Уметь превращать флекс блоки в грид.
- Понимать автосвойства грид и уметь контролировать построение грида.
- Уметь совмещать медиа-запросы и правила гридблоков.
- Создать готовый сверстанный проект и деплоить его на github.
- 3 ч 46 м
- 10
- украинский
Что входит в курс
×
Вы действительно хотите открыть доступ к тестированию по курсу Верстка на Grid на 40 дней?
Цель урока – познакомиться с описанием курса, узнать, что такое Grid в CSS, поработать с онлайн IDE Codeopen, настроить рабочее окружение и рассмотреть примеры работы с Grid container.
Цель урока – ознакомиться с Grid Generator, рассмотреть свойство grid-template-columns, узнать новую единицу измерения fr (fraction - судьба), на практике усвоить сочетание и смешивание различных единиц измерения, таких как гибкие и фиксированные, а также научиться задавать треки с помощью repeat.
Цель урока – понять разницу между явным и неявным Grid, узнать о Grid-клеточках, Grid-области, Gap (промежутках), изучить свойства minmax, grid-auto-rows, grid-column-start, grid-column-end, grid- row-start, grid-row-end, grid-column.
Цель урока – узнать подгриды, научиться управлять порядком отображения с помощью z-index, понять разницу между двумерным (Grid) и одномерным позиционированием (Flex), изучить свойства auto-fill и auto-fit для автозаполнения треков, узнать все о display сontents.
Ціль уроку – зрозуміти як правильно позиціонувати елементи в сітці Grid за допомогою направляючих ліній, на практиці засвоїти grid-template-columns та grid-template-rows, grid-column та grid-row, grid-area та використання span в Grid.
Ціль уроку – вивчити шаблони в Grid, навчитись позиціонувати елементи в сітці за допомогою імен (alias), перевизначати контент за допомогою медіавиразів чи додаткових класів, на практиці засвоїти такі властивості як: grid-template-areas, grid-template / grid.
Цель урока – узнать, как правильно определять названия линий в Grid, а также как работать с неявными областями сетки из именуемых линий. На практике усвоить repeat при определении линий Grid.
Цель урока – изучить, как работает автоматическое размещение элементов, какой дефолтный размер строк, когда недостаточно места для контента, узнать о заполнении пробелов и анонимных элементах сетки Grid.
Цель урока – изучить техники выравнивания блоков в CSS-разметке Grid, в частности осей Grid Layout, режимов записи в сеточных макетах, физических и логических значений в выравнивании макета сетки, выравнивание элементов на блоке или столбце по оси, выравнивание элементов на встройке, центрирование элемента в области Grid, выравнивание дорожек сетки на оси блока или столбца, выравнивание и auto margins.
Цель урока – создание собственного проекта на основе полученных знаний по курсу и деплой проекта на github pages и хостинг Netlify.
Доступ к полному курсу с учебными материалами и тестированием на 30 дней за 14,99 USD
КупитьПокупай подпискус доступом ко всем курсам и сервисам
Вопросы и ответы
Онлайн курсы имеют ряд преимуществ перед оффлайн форматом:
- Независимость от локации. Онлайн позволяет учиться где угодно.
- Сохранение денег и времени на дорогу. Вы экономите время и деньги с поездок на курсы и обратно.
- Онлайн курсы дешевле. Нет нужды в помещении и ноутбуках для студентов, поэтому стоимость ниже.
- Удобный темп обучения, постоянный доступ к информации. Обучение в вашем темпе в любом месте 24/7. Также есть доступ к записанным урокам, чего нет в оффлайн формате.
На ITVDN есть 2 формата обучения: Live Online и видео курсы. Цена обучения зависит от выбранного вами способа обучения.
Если вы хотите учиться самостоятельно в формате видео курсов, стоимость обучения составит в среднем 10-15 USD в месяц в зависимости от выбранного вами пакета подписки.
Live Online – это онлайн обучение с тренером в группах вместе с другими студентами. Учеба в данном формате стоит в среднем 6-7 USD за один час.
Зависит от того, сколько внимания программированию вы будете выделять ежедневно, какой именно это язык и какой у вас опыт кодинга. Среднее время на овладение одним языком при условии регулярных занятий хотя бы 2 часа в день:
- новички – от 3 до 6 месяцев;
- те, кто имеет базовые знания другого языка – от 1 до 3 месяцев;
- профессиональные программисты – до 1 месяца.
Самый лучший вариант инвестиции времени – 8 часов ежедневно (20% теории + 80% практики). Больше практики – быстрее овладеете программированием.
Для овладения IT-специальностью нужно выделить не менее 500 часов, из которых около 100 часов – на просмотр видео уроков или посещение онлайн занятий с ментором, а 400 – на выполнение практических заданий по пройденным темам.
В зависимости от того, сколько времени вы готовы выделять на обучение в день, вы сможете пройти программу за 3-8 месяцев. Если у вас есть определенная база знаний по IT, количество необходимого времени будет меньшим.
Также продолжительность обучения зависит от выбранной вами специальности, поскольку набор технологий, которые вы должны изучить, будет разным.
Начинать следует с тех, которые содержат в названии слово “Стартовый”. Такие курсы имеют вводный материал для знакомства с языком или технологией.
Если вы планируете учиться по конкретной специальности в формате видео курсов, перейдите на страницу специальности и прокрутите до заголовка “Видео курсы по специальности …”. Ниже будет список видео курсов, отсортированных в порядке необходимости изучения.
Ещё ниже вы найдете Roadmap по специальности – путеводитель, на котором изображены видео курсы в виде дерева, что также легко сориентирует вас в последовательности прохождения курсов.
Если вы выбираете Live Online обучение с тренером, всё очень просто:
- посещайте все занятия, вовремя выполняйте д/з;
- дополнительно смотрите видео уроки на ITVDN;
- после каждого урока проходите краткое тестирование;
- практикуйтесь в Интерактивном практикуме;
- общайтесь с одногруппниками в ходе решения д/з, задавайте вопросы ментору на уроках и вне их;
- в конце каждого курса сдавайте экзамен на TestProvider (и получайте Сертификаты);
- в конце всего обучения проходите экзамен по специальности и получите диплом.
Мы имеем специальный раздел – “Вакансии”, который помогает нашим студентам искать первую работу в IT. Детальнее о возможностях и о разделе по ссылке.
А для тех, кто учится онлайн с ментором, у нас дополнительно предусмотрена индивидуальная помощь HR-специалиста по подготовке к трудоустройству с первого дня обучения и до получения первого job-оффера. Она включает в себя помощь в оформлении соцсетей, подготовке резюме, проведении пробного собеседования, предоставлении советов по поиску работы и самопрезентации и т. д.
К сожалению, данная услуга ITVDN не предусмотрена, однако вы можете заказать индивидуальную консультацию с нашим ментором. Подробности вы найдете по ссылке.
На ITVDN отсутствуют курсы для детей, поэтому комфортный возраст для начала обучения по нашим материалам – от 14 лет.
Никаких требований к вашему уровню английского мы не выдвигаем, поскольку все учебные материалы идут на русском или украинском языках. При этом базовые знания английского будут полезны для комфортного поиска информации в гугле, чтения документаций в интернете и прочего.
На ITVDN можно пройти полное обучение с нуля до специалиста уровня Trainee/Junior. Если вы уже практикующий разработчик, наши видео курсы помогут углубить ваши знания до уровня Middle.
После окончания действия вашей подписки доступ к видео курсам, к сожалению, будет закрыт. Однако вы сможете пользоваться теми учебными материалами, которые вы скачали на свой девайс во время обучения.
Нет, скидки не суммируются.
Отзывы наших студентов
Отзывы в DOU
4,9/5 - 200 отзывов
Отзывы в Facebook
5,0/5 - 707 отзывов
Отзывы в Google
4,9/5 - 836 отзывов