[loftschool] Основы вёрстки сайтов, 2019

​

За 5 недель качественно освойте верстку на HTML и CSS, и получите первый проект в портфолио.

Программа обучения
1 неделя
Открытие курса. Устройство интернета

• Введение в профессию.
• Платформа обучения.
• Устройство курса.
• Редакторы кода: Sublime Text 3, VS Code, Atom.

Устройство интернета
Видеокурс

• Основы HTTP.
• Модель “клиент/сервер”.
• Хостинг, хостер.
• Регистратор, домен.
• IP, DNS.

Работа с хостингом
Видеокурс

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

HTML. Теги и работа с разметкой
Видеокурс

• Структура HTML-документа
• Emmet — инструмент, ускоряющий работу с HTML
• Необходимые в работе теги и их атрибуты
• Форматирование кода, комментирование
• Ссылки — предназначение и применение
• Теги форм и таблиц

Спойлер: Продолжение описания

Разметка элементов страницы
Практический вебинар

• Анализ макета для последующей разметки.
• Логические составляющие элементов страницы.
• Разметка элементов.
• Семантика верстки.
• Бэм-Нейминг.
• Ответы на вопросы.

2 неделя
CSS
Видеокурс

• Добавление стилей к HTML-страниц.
• hex, text, rgb, rgba, hsla.
• Создаём начальную структуру проекта.
• Разбираемся с CSS-селекторами и их синтаксисом.
• Отношение блоков между собой.
• Работа со шрифтами.
• Абсолютные и относительные пути.

Работа с PSD-макетом
Видеокурс

• Работа с дизайн-макетом
• Разбор PSD-макета на необходимые верстальщику изображения
• JPEG, PNG, SVG, GIF — различие в форматах хранения изображений
• Работа со слоями — необходимые команды и инструменты
• Настройка рабочего пространства Photoshop
• Горячие клавиши и приемы, ускоряющие работу
• Альтернативные инструменты для работы с макетом (adobe.Assets, Avocode, zeplin.io)

Основы вёрстки
Видеокурс

• Основы “блочной” вёрстки
• Поведение элементов: блочное и строчное
• Блочная модель элементов. Свойства и настройка поведения блоков
• Расположение блоков на странице. Вёрстка
• Свойства позиционирования элементов и приоритет наложения блоков
• Точные и относительные единицы измерения

Стилизация элементов страницы
Практический вебинар

• Часто используемые свойства CSS
• Оформление элементов страницы
• Переиспользование элементов. Модификаторы
• Префиксы
• Модификация готовых элементов
• Perfect Pixel

3 неделя
Flexbox
Видеокурс

• Разбираем новый модуль CSS — Flexbox
• Основные понятия в Flexbox
• Поведение Flexbox-layout
• Преимущества перед блочной версткой
• Управление пропорциями и порядками блоков
• Использование Flexbox в мобильной вёрстке
• Применение знаний на практике: верстаем макет на Flexbox

Построение лейаута и БЭМ-нейминг
Видеокурс

• Подготовка структуры документа для «боевого» шаблона
• Настройка стилей для рабочего шаблона. Normalize.css
• Теория логических блоков — смотрим на макет «издалека»
• Модульность. Правила и способы верстать независимыми блоками
• Методологии именований блоков и создания структуры
• БЭМ-нейминг: продвинутые техники использования

Вёрстка страниц
Практический вебинар

• Применение знаний на практике
• Вёрстка «боевых» страниц
• Применение знаний на практике
• Старт проекта «с нуля»
• Построение шаблона для работы

4 неделя
Частые приемы вёрстки
Видеокурс

• Частые приемы в вёрстке типовых элементов
• Приведение страниц в соответствие с дизайн-макетом
• Подготовка вёрстки для динамических элементов
• Вёрстка анимированных элементов
• CSS3-свойства
• Префиксы «новых» CSS-свойств. Кроссбраузерная работа со стилями

Анимации CSS
Видеокурс

• Плавное изменение состояний элементов
• CSS3-анимации. Рассмотрение свойств и принципов работы
• Keyframes: пишем покадровую анимацию
• Трансформация элементов
• Бесконечная анимация

Применение анимаций на практике
Практический вебинар

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

5 неделя
Подводим итоги курса
Выпускной вебинар

• Выпускной
• Строим планы на будущее
• Подводим итоги

Выпускной проект
В течение курса, шаг за шагом мы вместе с вами выполним боевой проект — настоящий корпоративный сайт для одной из трёх выдуманных компаний.

Начало обучения 1.10.2019 года.

 

гость, Курсы по программированию, доступ в библиотеку сразу после оплаты. Уникальные складчины, не пропусти.

Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...
Курс состоит из более чем 180 часов видео и домашних заданий от ведущих специалистов по Data Scientist компаний Mail.ru, Ivi и Avito.

Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...
Профессия web-разработчика одна из самых высокооплачиваемых и востребованных на рынке IT-специалистов. На старте карьеры специалист может получать от 80 до 100 тыс. рублей.
Поэтому быстро освоить этот инструмент программирования и получить актуальную сегодня профессию может даже новичок.

Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...
Excel — это не только разноцветные ячейки и формулы вроде A2+B4.
Это мощный инструмент, с помощью которого можно объединять данные из нескольких таблиц, фильтровать и сортировать, составлять диаграммы и графики.

Благодаря встроенным инструментам сводных таблиц, визуализации и обработки данных, Excel давно стал незаменимым помощником всех, кто работает с цифрами.

 

курс будет или нет?

 

Здравствуйте, на данный момент в теме мало участников для того, чтобы объявлять сборы. Вы можете помочь ускорить выкуп материала рекламируя складчину.
До 5 рекламных сообщений в сутки в темах текущего раздела.
Подробнее Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...

 

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

К каждому модулю добавлены доп.материалы, вебинары, ссылки,
а также архив полезностей из группы курса в telegram.

P.S. если ты новичок в веб-дизайне для тебя есть небольшой бонус.