Верстка сайтов [HTML Academy] HTML и CSS. Профессиональная вёрстка сайтов (2021)

[Малыш Джон]

Автор: HTML Academy
Название: HTML и CSS. Профессиональная вёрстка сайтов (2021)

Описание:

Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.

Первая неделя
Познакомимся с участниками и процессом на курсе, рассмотрим устройство веба и ваше место в профессии, подготовим инструменты для работы.

Как проходит курс.

• Обзор личных проектов.
• Техническое задание и критерии качества.
• Структура курса.
• Авторы, кураторы, наставники.
• Работа с наставником.
• Защита личного проекта.

Кто и как делает сайты.

• Из чего состоит сайт в интернете: сервер, браузер, вёрстка.
• Кто делает сайты: дизайн, вёрстка, бэкенд.
• Ответственность верстальщика: удобство, доступность, перфоманс.

Инструменты и процесс.

• Редакторы и инспекторы графики: Figma, Photoshop.
• Редакторы кода, браузеры, отладчики.
• Система контроля версий.
• Процесс работы над проектом.

Раздел 2
Разметка

Проанализируем макет перед вёрсткой, узнаем синтаксис HTML и базовую структуру страницы, посмотрим как работает спецификация и разберём сложные случаи разметки.

Создание страниц по макету.

• Анализ макета.
• Структура проекта.

Синтаксис HTML

• Парные и одиночные теги.
• Вложенность и дерево документа.
• Типы атрибутов.

Базовая структура страницы.

• Метаданные и подключение ресурсов.
• Контент страницы.
• Теги для вывода и подключения.

Семантика и спецификации.

• Стандарты и спецификации.
• Категории тегов.
• Разбор правил вкладывания

Вторая неделя
Раздел 3
Стилизация

Разделим макет на блоки, создадим структуру стилей, погрузимся в основы CSS, поработаем с типографикой и подключим шрифты.

Устройство и логические части макета.

• Выделение блоков из макета.
• Уникальные и повторяющиеся блоки.
• Создание переменных для цветов.

Файлы и структура для блоков.

• Подключение стилей на страницу.

Погружение в стили для блоков.

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

Наследование, каскад, специфичность

• Какие свойства наследуются, какие нет.
• Чем font-size отличается от background-color.
• Каскадирование и специфичность.

Размеры и центрирование макета.

• Измерение блоков в Figma.

Шрифты.

• Использование системных шрифтов.
• Подключение шрифтов проекта.
• Использование и настройка Google Fonts.
• Использование шрифтов в стилях.

Раздел 4
Графика

Посмотрим, какие есть редакторы и инспекторы графики, изучим интерфейс Figma, разберёмся в форматах графики, научимся выбирать правильные, экспортировать и оптимизировать.

Отличия редактора от инспектора.

• Обзор редакторов: Photoshop, Illustrator, Sketch, Figma.
• Обзор инспекторов: Zeplin, Avocode.
• Выбор подходящего инструмента.

Интерфейс Figma и работа с макетом.

• Страницы, фреймы, слои, инспектор.
• Параметры блоков: прозрачность, фон, тени, координаты.
• Параметры текста: семейство, начертание, размер.

Форматы графики и принцип выбора.

• Растровая, векторная и генерируемая графика.
• Форматы GIF, JPEG, PNG, WebP и SVG.
• Выбор формата по детализации изображения.
• Настройки экспорта графики из Figma.

Оптимизация графики после экспорта.

• Установка Squoosh и SVGOMG на десктоп.
• Оптимальные настройки Squoosh и SVGOMG.
• Пакетная оптимизация графики.

Файловая структура и указание путей.

• Структура папок для хранения графики.
• Пути к ресурсам на примере графики.

Третья неделя
Раздел 5
Сетки на гридах

Научимся понимать систему сеток и раскладку блоков на примере Grid Layout. Научимся выделять сетки на макетах. Разберёмся в блочной модели.

Модульная система и сетки.

• Направляющие, колонки, строки и отступы.
• Сетка как основа, но не строгое правило.

Спецификация Grid Layout и раскладка по сетке макета.

• Устройство шаблонов: строки, колонки, линии, отступы.
• Ручная и автоматическая раскладка.
• Спецификация Box Alignment и выравнивание внутри сетки.

Блочная модель.

• Устройство, типы и переключение блочной модели.
• Явная и автоматическая ширина, центрирование.

Раздел 6
Сетки на флексах

Научимся понимать систему сеток и раскладку блоков на примере Flexible Boxes. Научимся выбирать случаи, когда флексы подходят лучше гридов.

Спецификация Flexible Boxes и раскладка внутри блоков.

• Оси: основная, поперечная, направление.
• Расположение на основной и поперечной оси.
• Растяжение, сужение, базовый размер флексов.

Флексы и гриды.

• Особенности систем раскладки.
• Ситуации, подходящие для гридов.
• Ситуации, подходящие для флексов.
• Совместное использование.

Четвёртая неделя
Раздел 7
Декоративные элементы

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

Контентная и оформительская графика в вебе.

• Отличия контентной и оформительской графики.
• Вставка оформительской в стили и разметку.
• Программируемая графика, уместное использование.

Визуальные правила и типографика.

• Теория близости и оптическая компенсация.
• Типографика и характеристики текста.

Интерактивность интерфейса.

• Состояния и события элементов интерфейса.
• Переходы, анимация, плавность интерфейса.

Раскладка контента: мультиколонки и флоаты.

• Колонки для текста и блоков, перетекание и запреты.
• Обтекание блоков текстом, схлопывание и клиаринг.

Переполнение контента.

• Изменение числа элементов в списках.
• Вставка картинок и видео.
• Длинные и короткие слова, многострочность и переносы.

Пятая неделя
Раздел 8
Оформление контента

Узнаем как стилизовать содержание внутренних страниц, которые наполняются из CMS. Начнём готовиться к защите личного проекта.

Практикуемся в вёрстке элементов содержимого.

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

Разбираем типовые случаи переполнения и способы борьбы с ними.


Раздел 9
Доступность и формы

Поговорим про доступность, рассмотрим возможности улучшения удобства интерфейсов. Поработаем с инструментами проверки и отладки доступности.

Ситуации с неудобным интерфейсом, введение в доступность.

• Неконтрастные цвета, подложки для текста.
• Универсальный доступ, условия и физиология.
• Альтернативные средства: поисковики, режимы чтения, скринридеры.

Доступность встроенных в HTML элементов.

• Встроенные интерактивные элементы.
• Ориентиры и навигация в скринридерах.

Способы взаимодействия с интерфейсом.

• Мышь и ховер.
• Клавиатура и фокус.
• Клавиатура и голос.

Популярные паттерны интерфейса.

• Кнопки-ссылки.
• Радиокнопки, чекбоксы, селект.

Подписи к интерактивным и контентным элементам.

• Заголовки областей контента.
• Подписи к контентным элементам: картинки, видео, фреймы.
• Доступная инлайновая вставка SVG.
• Формы и подписи к полям.
• Добавление подписей в сложных случаях: заголовки, иконки.

Инструменты проверки и отладки доступности.

• Дерево доступности в браузерных отладчиках.
• Расширения для проверки доступности: aXe, Siteimprove.
• Демонстрация скринридера.

Шестая неделя
Раздел 10
Оживление интерфейса

Поговорим о том, где применяется JavaScript, чем отличается DOM и HTML-дерево. Подключим и настроим JavaScript-компоненты.

JavaScript в браузерах.

• JavaScript-движки в браузерах и не только.
• Отличия DOM и HTML-дерева.
• Работа с DOM: поиск элементов и сохранение в переменных.
• Создание функций, вызов и передача параметров.

Интерактивные компоненты Барбершопа.

• Обзор требований технического задания учебного проекта.
• Подключение JavaScript-файлов на страницу.
• Настройка компонентов.

Раздел 11
Финал

Поговорим о том, как прошёл курс и куда вам двигаться дальше.

Результаты курса.

• Статистика по студентам и проектам.
• Сложности в процессе.

Ваше место в профессии.

• Что вы узнали в процессе.
• Что вы уже можете делать.
• Место на профессиональном пути.

Куда двигаться дальше.

• Варианты развития.
• Профессии Академии.
• Навыки и курсы.
• Акселератор и Лига А.

Подробнее:

Скачать:

 

[HuraTuB]

с первого взгляда курс многообещающе информативный, а учитывая помощь в комментах в нахождении макетов получается и вовсе полная картина. Итак даю себе время на прохождение данного курса примерно до ноября - а далее обязательно отпишусь о том, что мне дал курс, много ли осталось пробелов, могу ли верстать сайты без подглядок на сторонние ресурсы и т.д. время взял с запасом - поскольку есть постоянная работа и уделять курсу времени получается не особо много + ужу 32год идет - усваяемость материала уже не та)))

 

[evgenirv]

Тот самый случай когда можно сказать "Под пиво пойдет" Курс конечно, много обещающий, но я бы сказал что это просто красивая обложка. Конечно, как для начинающего верстальщика, (для таких как я) дало неплохой пинок под зад, не более. Тем кто начинает, лучше уж на вебреференс учитесь, там лучше информация и тем более бесплатно

 

[spambot002]

Очень много ошибок по семантике.... Верстальщики обучают работать на коленке.... Не понимаюсь совершенно как устроена правильная семантика сайта... Воды столько, что скиллбокс нервно курит в сторонке.. (ладно, также))) )

Из полезного, узнал про container queries и validator (помогает проверять правильность верстки и подсказывает где мусорные теги)

 

[achilless]

их кто то курсы заканчивал ? есть вакансии в центре карьеры ?

 

[sonics_]

интересно, что там нового будет, очень ждем пока восстановят :(

 

[Хочу Учиться (Жека)]

Так рад был что появилось и облом(
Ждёмс

 

[Vadimaylo]

Так рад был что появилось и облом(
Ждёмс

ссылка работает, проверьте

 

[Хочу Учиться (Жека)]

ссылка работает, проверьте

да работает, спасибо

 

[DirtyRoman]

Где найти макет бородинский барбершоп?((

 

[denis9232]

Где найти макет бородинский барбершоп?((

А есть вообще ссылки хоть на какой-то макет в фигме?

 

[DirtyRoman]

А есть вообще ссылки хоть на какой-то макет в фигме?

есть,скинь облако,по возможности закину

 

[AlekseyKoll]

есть ссылки хоть на какой-то макет в фигме?

 

[v11]

Увидел ссылку на макет, в 3ем разделе видео "Графика", воспроизвёл в браузере - работает:
figma.com/file/mmkaRtdChnDxDP0rym2Bu6/HTML-1-%2F-Глейси

(18-я минута, Николай палит ссылку)

 

[sharewood2019]

Приветствую! Друзья, курс стоящий?

 

[denis9232]

проверяй

Скачал из облака по ссылке выше в комментах.
Спасибо большое.

 

[Geography]

проверяй

Все есть, спасибо большое.

 

[hardshitgiver]

Круто! Спасибо за свежий курс! Это первый курс, который скачал на сайте! ЮЮЮЮЮЮЮЮЮЮЮЮЮХХХХХХХХХХХХХХУУУУУУУУУУУУ

 

[Liberal1]

А будет слив второго уровня? Который проходит до 25 июля

 

[HuraTuB]

проверяй

большое спасибо за макеты!

 

[London_war99]

с первого взгляда курс многообещающе информативный, а учитывая помощь в комментах в нахождении макетов получается и вовсе полная картина. Итак даю себе время на прохождение данного курса примерно до ноября - а далее обязательно отпишусь о том, что мне дал курс, много ли осталось пробелов, могу ли верстать сайты без подглядок на сторонние ресурсы и т.д. время взял с запасом - поскольку есть постоянная работа и уделять курсу времени получается не особо много + ужу 32год идет - усваяемость материала уже не та)))

Я с тобой дружище))

 

[Stikgodx]

Начал проходить. Авторы сделали максимально всё для того, что бы при просмотре слитых записей появлялось желание записаться на нормальный курс. Т.к. там и все структурировано, и всё в доступе из кабинета, и кураторы и т.д. и т.п. Нооо... мне не столько денег жалко, сколько, бляхомуха, несколько месяцев курс проходить, плюс поток еще теперь ждать. Может в следующем году запишусь к ним на фулстак.

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

1. Тут нет учебника, найти я его не смог (только PHP-учебник в открытом доступе), если у ТС есть он в каком-то виде, прошу, пожалуйста, закинуть. Врядли там что-то сакрально важное, конечно, но лекторы ссылаются иногда на главы, типа "в подготовку" к лекции.

2. Часть подготовки на "тренажерах", которые бесплатны для студентов. Для всех остальных ~1800 р. за 3 месяца - собственно очень не дорого, но в идеале для прохождения курса они будут крайне полезны и желательно их купить. На шервуде есть тема со слитыми - кому надо ищите в поиске, но я купил на сайте и не жалею.

3. Нет скринкастов. Порылся у них в блоге, нашел парочку, но по большей части мимо кассы. Насколько понял, это видеоуроки от кураторов/спикеров по всяким полезностям.

Для тех кто вообще мимо крокодил в плане фронт-энда, ниразу не делал даже Hello World и т.д. - только с лекциями будет крайне тяжко.

Для тех кто более-менее хотя бы на базовом уровне знаком с html/css - можно смотреть, но я бы рекомендовал тренажёр тоже взять, он полезен, удобен и нагляден. На самом деле по нему вполне можно научться верстать без каких-либо лекций, имхо.

 

[suicidnik]

С полного нуля хочу начать изучать, может посоветуешь курсы?