Открыто

[HTML Academy] HTML и CSS. Профессиональная вёрстка сайтов [18 сентября — 20 ноября 2023]

Тема в разделе "Курсы по программированию", создана пользователем konstantin_k, 8 июл 2023.

Цена: ----
Взнос: ----

Основной список: 29 участников

Резервный список: 7 участников

  1. 8 июл 2023
    #1
    konstantin_k
    konstantin_k СкладчикСкладчик

    Складчина: [HTML Academy] HTML и CSS. Профессиональная вёрстка сайтов [18 сентября — 20 ноября 2023]

    [​IMG]

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

    Раздел 1
    Старт
    Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы.

    • Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.
    • Узнаем, кто такие авторы, кураторы и наставники курса.
    • Поговорим о том, из чего состоят сайты, кто и как их делает, и за что в этом процессе отвечает верстальщик.
    • Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.
    • Разберём процесс работы над проектом и его защиту.
    Статьи
    • Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы браузеров, Git и GitHub.
    Проекты
    • Выбираем наставника.
    • Настраиваем инструменты разработки, создаём репозитории проектов.
    • Отрабатываем процесс выполнения заданий. Вносим изменения в проект и отправляем их в GitHub.
    Раздел 2
    Разметка
    Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.

    • Познакомимся с синтаксисом HTML, погрузимся в тонкости тегов и их атрибутов, поговорим о семантике.
    • Посмотрим, как работает спецификация, разберём категории тегов и правила их вкладывания, разберём сложные случаи разметки.
    • Познакомимся с интерфейсом Figma, научимся анализировать макет и выделять из него уникальные и повторяющиеся блоки.
    • Научимся выстраивать базовую структуру страницы и использовать классы для именования блоков.
    Демонстрации
    Интерактивные демонстрации по разметке учебного проекта.

    ТренажёрыСтатьи
    • Тренажёры для знакомства с HTML.
    • Статьи о том, как правильно создавать семантическую HTML-разметку.
    Проекты
    • Получаем макеты в Figma.
    • Создаём и размечаем страницы проекта.
    Раздел 3
    Графика
    Экспортируем графику из макета.

    • Изучим интерфейс Figma и научимся снимать с макета параметры блоков и текста.
    • Разберёмся в форматах графики, научимся выбирать правильный формат, экспортировать и оптимизировать изображения.
    • Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере графики.
    Демонстрации
    Интерактивные демонстрации по внедрению графики учебного проекта.

    ТренажёрыСтатьи
    Статьи про базовые возможности и эффективную работу в Figma и про особенности графических форматов.

    Проекты
    • Экспортируем растровую и векторную графику из Figma.
    • Подключаем контентную графику в разметку.
    Раздел 4
    Базовая стилизация
    Выполним базовую стилизацию страниц проекта.

    • Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере стилевых файлов.
    • Погрузимся в основы CSS и разберёмся, что такое наследование, каскад и специфичность.
    • Внедрим контентную и декоративную графику на страницы проекта.
    • Подключим шрифты, поработаем с типографикой и зададим фоны элементам.
    Демонстрации
    Интерактивные демонстрации по базовой стилизации учебного проекта.

    ТренажёрыСтатьи
    Тренажёры для знакомства с базовым синтаксисом CSS, возможностями по стилизации текста и управлению фоном.

    Проекты
    • Подключаем шрифты.
    • Выполняем базовую стилизацию: текстовые параметры, фоны крупных блоков, текстуры.
    Раздел 5
    Сетки страниц на флексах
    Построим крупные сетки страниц с помощью флексов.

    • Разберёмся в боксовой модели и познакомимся с типами боксов.
    • Научимся анализировать сетки на макетах и определять крупные сетки страниц.
    • Познакомимся со спецификацией Flexible Box Layout: оси флексов, их направление и расположение вдоль них флекс-элементов; растяжение, сужение и базовый размер флексов.
    Демонстрации
    Интерактивные демонстрации по созданию крупных сеток страниц учебного проекта.

    ТренажёрыСтатьи
    • Статьи, которые помогут разобраться с особенностями флексов, блочной модели и приёмами построения сеток.
    • Тренажёры для знакомства с блочной моделью документа, флексами и приёмами построения сеток.
    Проекты
    • Описываем крупные сетки страниц на флексах.
    • Сравниваем вёрстку с макетом.
    Раздел 6
    Сетки компонентов на флексах
    Создадим мелкие сетки компонентов страниц при помощи флексов.

    • Разберём особенности мелких сеток.
    • Узнаем, что такое переполнение и как с ним справиться при помощи флексов.
    • Поговорим про тонкости и ограничения флексов: порядок флекс-элементов, многострочный флекс-контейнер и расположение строк внутри него.
    Демонстрации
    Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.

    ТренажёрыСтатьи
    • Статьи, которые помогут разобраться с особенностями многострочных флексов.
    • Тренажёры для погружения в работу с флексами.
    Проекты
    • Описываем мелкие сетки компонентов страниц на флексах.
    • Сравниваем вёрстку с макетом.
    Раздел 7
    Сетки компонентов на гридах
    Создадим мелкие сетки компонентов страниц при помощи гридов.

    • Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.
    • Разберём типовые ситуации, когда гриды подходят лучше флексов.
    • Поговорим про совместное использование гридов и флексов, рассмотрим преимущества и недостатки каждой технологии.
    Демонстрации
    Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.

    ТренажёрыСтатьи
    • Тренажёры для знакомства с гридами.
    • Статьи, которые помогут разобраться с особенностями гридов.
    Проекты
    • Описываем мелкие сетки компонентов страниц на гридах.
    • Сравниваем вёрстку с макетом.
    Раздел 8
    Декоративные элементы
    Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.

    • Научимся использовать оформительскую и программируемую графику.
    • Научимся стилизовать блоки при помощи двумерных трансформаций, рамок, теней и градиентов.
    • Рассмотрим псевдоэлементы и точечное позиционирование элементов.
    • Погрузимся в тонкости типографики и визуальные правила оформления контента.
    • Научимся стилизовать интерактивные состояния ссылок и кнопок.
    Демонстрации
    Интерактивные демонстрации со стилизацией декоративных и контентных элементов учебного проекта.

    Тренажёрытатьи
    Тренажёры для закрепления навыков создания декоративных элементов.

    Проекты
    • Добавляем мелкие декоративные и иконочные графические элементы.
    • Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
    Раздел 9
    Попапы, слайдеры, формы
    Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.

    • Научимся оформлять нестандартные элементы форм.
    • Разберёмся с тем, как встраивать модальные окна и выпадающие элементы на страницу.
    • Научимся стилизовать интерактивные состояния компонентов форм и слайдеров.

    Скрытая ссылка
     
    Последнее редактирование модератором: 19 мар 2024
  2. Последние события

    1. StIrina
      StIrina не участвует.
      17 июн 2024
    2. FrankL
      FrankL участвует.
      8 май 2024
    3. Xenoslogic
      Xenoslogic участвует.
      15 апр 2024
    4. katewebd
      katewebd участвует.
      21 мар 2024

    Последние важные события

    1. skladchik.com
      Цена составляет 0р.
      19 мар 2024
  3. Обсуждение
  4. 14 янв 2024
    #2
    Alric67
    Alric67 СкладчикСкладчик
    Хорош затягивать, 1200 руб это нормально
     
  5. 10 июл 2024
    #3
    Kuklus
    Kuklus СкладчикСкладчик
    День добрый! А почему прочерки стоят?
     
  6. 10 июл 2024
    #4
    Кирсан Кайфат
    Кирсан Кайфат МодерМодератор Команда форума
    не установлена цена. Можно нажать пожаловаться и в тексте указать стоимость