Открыто

HTML и CSS для начинающих [Lectrum]

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

Цена: 10950р.
Взнос: 2479р.-77%

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

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

  1. 9 июл 2020
    #1
    Топикстартер
    Топикстартер ЧКЧлен клуба
    HTML и CSS для начинающих [Lectrum]

    [​IMG]

    Об интенсиве


    Курс будет полезен, если вы:
    • Новички, желающие начать свой путь в ИТ и освоить новую профессию
    • Фронтенд-разработчики, которые хорошо владеют JavaScript и хотят подтянуть вёрстку
    • Бекенд-разработчики, которые переходят в фуллстек

    Что вы получите после курса
    • Освоите работу основных и трендовых инструментов верстальщика
    • Практические навыки работы с макетами, простыми анимациями, тенями и градиентами, а также навыки создания страниц по технике Pixel Perfect
    • Научитесь управлять слоями документов, стилизировать скролл бар, работать с параллакс эффектом
    • Основу для своего портфолио
    • Умение ориентироваться в вакансиях на рынке IT


    Неделя 1
    Модуль: Основное обучение

    -Как устроен веб
    Разберёмся чем отличается HTTP от HTTPS. Познакомимся с понятиями доменного имени и URL-адреса, узнаем для чего нужен DNS.

    • Организационные вопросы
      • Обзор процесса обучения
      • Обзор инструментов
    • Настройка окружения
      • Настройка стартовой точки
      • Сравнение популярных редакторов кода
      • Настройка редактора для комфортной работы
      • Настройка веб-браузера
    • Процесс запроса веб-страницы
      • Внешние и внутренние IP-адреса, веб-сервер
      • DNS и его роль в интернете
      • Домены, поддомены и URL-адреса
      • HTTP vs HTTPS
      • HTTP/1.1 vs HTTP/2
      • Жизненный цикл загрузки веб-страницы
    -Работа с графическим редактором
    Разберёмся со стандартным воркфлоу, по которому происходит разработка веб-приложения. Научимся работать с макетами в приложениях Figma, Zeplin, Avocode и Adobe XD.

    • Стандартная среда процеса веб-разработки
      • Разбор ключевых ролей в процесе разработки
      • Разбор основных терминов которые описывают процесс разработки
      • Как выглядит процесс разработки веб-приложения
      • Популярные организационные ошибки начинающих программистов
    • Работа с графическим редактором
      • Зачем верстальщику нужен графический редактор кода
      • Разбор основных инструментов для работы с макетом в приложениях Figma, Adobe XD, Adobe Photoshop
      • Сравнение Adobe Photoshop и Adobe XD
    Неделя 2
    Модуль: Основное обучение

    -Создаем полноценную разметку
    Научимся создавать правильную семантическую разметку на основании макета и технического задания.

    • Работа с разметкой
      • Знакомство со спецификацией
      • Семантика, структура и API HTML-документа
      • Основные элементы HTML-страницы
      • Синтаксис HTML-тегов
      • Разбор основных тегов
      • Отличие между логическими и физическими тегами
      • Какую вёрстку можно считать семантичной
      • Разбор популярных ошибок при создании разметки страницы
      • HTML-атрибуты
      • Комментарии в HTML
    • Работа с навигацией
      • Основы работы со ссылками
      • Безопастность ссылок при переходе на новую страницу
      • Абсолютные и относительные пути
      • Работа с якорями
    • Работа с формой
      • Тег <form> и его атрибуты
      • Типы <input> и их атрибуты
      • Radio-кнопки
      • Сheckbox-кнопки
      • Datalist-cписок
    • Работа со списками
      • Теги <ul> и <ol>
      • Основные отличия и для чего их применять
    • Работа с картинками
      • Тег <img> и его атрибуты
      • Тег <picture>: отличия и для чего применять
      • Основное предназначение тега <figure>
      • Падинг-хак
    • Работа с table
      • Основные теги
      • Особенности работы
      • Лучшие практики по работе с таблицами
    • Работа с iframe
      • Основы работы с iframe
      • Атрибуты тега
      • Применение на практике
    • Работа с quotation elements
      • Основные теги
    • Работа с HTML Media
      • Воспроизведение аудио при загрузке сайта
      • Встроенные возможности воспроизведения видео
    • Работа с HTML Graphics
      • Из чего состоит svg и его атрибуты
      • Примеры использования
    -Настроим базовые стили
    Научимся оживлять разметку с помощью стилей для того, чтобы приблизить наше приложение к макету.

    • Работа со стилями
      • Зачем нужны cтили
      • Синтаксис CSS правил
      • Что такое каскад
      • Способы подключения CSS к веб-документу
      • Разбор основных селекторов
      • Фильтры [class^="..."]
      • Как посчитать вес селекторов
      • В чем разница псевдо-классов и псевдо-элементов :):before или :before)
      • Относительные значения
      • Функции в CSS. Работаем с calc
      • Порядок CSS-свойств
      • Описание шрифтов
      • Свойство box-sizing или как посчитать размер элемента
      • Состояния :link, :visited, :hover, :focus, :active
      • Что такое normalize и reset
      • Работа с margin и padding
      • Разбор популярных ошибок при работе со стилями
      • Познакомимся с caniuse, caniemail, cssdb
      • Переменные в CSS
      • Пространства имён и независимые компоненты
    Неделя 3
    Модуль: Основное обучение

    -Создаем глобальную сетку для веб-страницы
    Научимся создавать полноценный layout для веб-страницы, разберём приёмы для создания строк и колонок.

    • Работа с CSS Grids
      • Разбор понятия сетка документа
      • Разбор блочной модели документа
      • Работа с Grid-контейнером, элементами и линиями
      • Практическое применение Grid track, cell и area
      • Разбор популярных ошибок при работе с CSS Grids
      • Знакомство с рецептами решения багов
    -Создаем Layout внутри компонента
    Научимся управлять расположением элементов внутри компонента.

    • Работа с Flexbox
      • Разбор основной терминологии
      • Работа с разными типами осей внутри Flexbox-контейнера
      • Управление расположением элементов
      • Управление порядком элементов
      • Разбор популярных ошибок при работе с Flexbox
      • Знакомство с рецептами решений багов
    Неделя 4
    Модуль: Основное обучение

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

    • Продвинутые техники работы со шрифтами
      • Управление рендерингом шрифта
      • Разбор свойств для настройки параметров букв и слов
      • Управление отступами
      • Разбор разных типов подчеркиваний
      • Разбор популярных ошибок при работе с кастомными шрифтами
    • Продвинутые техники работы с графическими элементами
      • Абсолютное и относительное позиционирование. Координаты, изменение точки начала координат
      • Как и когда применять фиксированное позиционирование
      • Слои и управление порядком слоёв
      • Работа с градиентом
      • Настройка теней
      • Особенности при работе с графическими элементами в формате .png, .jpg, .svg
      • Разбор популярных ошибок при работе с графическими элементами

    -Введение в анимацию
    Научимся добавлять динамику к веб-страницам с помощью CSS-анимаций. Разберёмся, когда стоит использовать CSS Transition, а когда CSS Keyframes.

    • Базовые анимации с помощью CSS Transition
      • Управление CSS-свойствами, которые нужно анимировать
      • Настройка продолжительности анимации
      • Разбор популярных ошибок при работе с CSS Transition
    • Продвинутые анимации с помощью CSS Keyframes
      • Что такое раскадровка и группировка кадров
      • Работа с повторяющимся анимациями
      • Настройка направления анимации
      • Задержка начала анимации
      • Работа с состоянием до и после анимации
      • Разбор популярных ошибок при работе с CSS Keyframes
    Неделя 5
    Модуль: Работа над проектами

    -Первая неделя практики
    Подготовим окружение и приступим к работе над персональным проектом.

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

    Неделя 6
    Модуль: Работа над проектами

    -Вторая неделя практики
    Отправим проект на код-ревью, имплементируем фидбек от наставника.

    • Рабочий процесс
      • Завершим работу над основной частью своего проекта
      • Откроем пул-реквест и отправим проект на код-ревью
      • Имплементируем фидбек от наставника
      • Откроем пул-реквест и отправим проект на повторное код-ревью
      • Завершим работу над проектом
      • Откроем пул-реквест и отправим проект на финальную проверку
      • Приступим к работе над вторым проектом

    Неделя 7
    Модуль: Работа над проектами

    -Третья неделя практики
    Отправим второй проект на код-ревью, имплементируем фидбек от наставника по второму проекту.

    • Рабочий процесс
      • Завершим работу над основной частью своего второго проекта
      • Откроем пул-реквест и отправим проект на код-ревью
      • Имплементируем фидбек от наставника
      • Откроем пул-реквест и отправим второй проект на повторное код-ревью
      • Завершим работу над вторым проектом
      • Откроем пул-реквест и отправим второй проект на финальную проверку
      • Приступим к работе над третьим проектом
    Неделя 8
    Модуль: Работа над проектами

    -Четвертая неделя практики
    Отправим третий проект на код-ревью, имплементируем фидбек от наставника по третьему проекту.

    • Рабочий процесс
      • Завершим работу над основной частью своего третьего проекта
      • Откроем пул-реквест и отправим проект на код-ревью
      • Имплементируем фидбек от наставника
      • Откроем пул-реквест и отправим проект на повторное код-ревью
      • Завершим работу над проектом
      • Откроем пул-реквест и отправим проект на финальную проверку
    -Работа над групповым проектом
    Выполним задачи для групового проекта, научимся работать в формате Agile-спринтов.

    • Подготовительная работа
      • Настроим стартовую точку
      • Изучим рабочий воркфлоу, по которому будет происходить работа в груповом проекте
      • Групповое планирование спринта
    • Рабочий процесс
      • Выберем интересную задачу из бэклога
      • Получим дополнительные материалы
      • Приступим к выполнению задачи
      • Выполним задачу
      • Отправим задачу на QA-проверку
      • Имплементируем фидбек
      • Отправим задачу на повторный раунд QA
      • Возьмём другую задачу из бэклога
    Неделя 9
    Модуль: Работа над проектами

    -Работа над груповым проектом
    Выполним задачи для групового проекта, научимся работать в формате Agile-спринтов.

    • Рабочий процесс
      • Выберем интересную задачу из бэклога
      • Получим дополнительные материалы
      • Приступим к выполнению задачи
      • Выполним задачу
      • Отправим задачу на QA-проверку
      • Имплементируем фидбек
      • Отправим задачу на повторный раунд QA
      • Возьмём другую задачу из бэклога
    • Финальное демо
      • Каждый студент проведёт короткое демо своих фич, которые были выполнены в рамках спринта
    • Ретроспектива
      • Разберём все достижения и неудачи, которые были в рамках спринта

    Продажник
     
    1 человеку нравится это.
  2. Последние события

    1. skladchik.com
      В складчине участвует 5 человек(а).
      11 мар 2024
    2. Dubalvlad
      Dubalvlad не участвует.
      7 ноя 2023
    3. Noname312
      Noname312 не участвует.
      24 июл 2022
    4. skladchik.com
      В складчине участвует 10 человек(а).
      24 июл 2022

Поделиться этой страницей