Перейти к содержимому








Фотография
Скачать

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



  • Авторизуйтесь для ответа в теме
Сообщений в теме: 10

#1 НЛО

НЛО

    Запись опубликована анонимно ✔

  • Сливапер LVL 6
  • Сообщений: 27 996
  • Регистрация: 04.06.2018
  • Заработано: 11 646 руб.
Репутация: 14 006

Награды: 56

  
  
  
  
  
  
  
  

Отправлено 10 Май 2021 - 17:24

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

Автор: HTML Academy


Описание:
Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.
Первая неделя
Познакомимся с участниками и процессом на курсе, рассмотрим устройство веба и ваше место в профессии, подготовим инструменты для работы.
Как проходит курс.
  • Обзор личных проектов.
  • Техническое задание и критерии качества.
  • Структура курса.
  • Авторы, кураторы, наставники.
  • Работа с наставником.
  • Защита личного проекта.
Кто и как делает сайты.
  • Из чего состоит сайт в интернете: сервер, браузер, вёрстка.
  • Кто делает сайты: дизайн, вёрстка, бэкенд.
  • Ответственность верстальщика: удобство, доступность, перфоманс.
Инструменты и процесс.
  • Редакторы и инспекторы графики: 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
Финал
Поговорим о том, как прошёл курс и куда вам двигаться дальше.
Результаты курса.
  • Статистика по студентам и проектам.
  • Сложности в процессе.
Ваше место в профессии.
  • Что вы узнали в процессе.
  • Что вы уже можете делать.
  • Место на профессиональном пути.
Куда двигаться дальше.
  • Варианты развития.
  • Профессии Академии.
  • Навыки и курсы.
  • Акселератор и Лига А.

Скрытый контент:

  Для просмотра необходимо войти или зарегистрироваться


Скачать:

Скрытый контент:

  Для просмотра содержимого необходимо 609 очков репутации (вам не хватает 609)

 Скачать без ограничений   Купить этот материал за 390 руб.



🔔 Подпишись на наш канал telegram @slivup_live и бота @kurs_slivup, что бы следить за крутыми новинками форума

  • 4

#2 Kurtis Stryker

Kurtis Stryker
  • Сливапер LVL 7
  • Сообщений: 1 098
  • Регистрация: 20.08.2014
  • Заработано: 409 руб.
Репутация: 1 467

Награды: 26

  
  
  
  
  
  
  
  

Отправлено 11 Май 2021 - 13:18

НЛО, прошу обновить ссылку, а так же делаю запрос на восстановление в специальном разделе.

 

Блин, только вчера глянул, полистал видео, сохранять на облако не стал. 
Вроде бы интересные спикеры, можно посмотреть. Хотя Першина с котом-Кексом больше нет. 


Сообщение отредактировал Kurtis Stryker: 11 Май 2021 - 13:20

  • 0

#3 PhoenixFM

PhoenixFM
  • Сливапер LVL 7
  • Сообщений: 2 774
  • Регистрация: 15.12.2017
  • Заработано: 3 256 руб.
Репутация: 3 301

Награды: 28

  
  
  
  
  
  
  
  

Отправлено 12 Май 2021 - 02:19

Скрытый контент:

  Для просмотра содержимого необходимо 200 очков репутации (вам не хватает 200)

 Скачать без ограничений   Купить этот материал за 390 руб.


  • 5

#4 Kurtis Stryker

Kurtis Stryker
  • Сливапер LVL 7
  • Сообщений: 1 098
  • Регистрация: 20.08.2014
  • Заработано: 409 руб.
Репутация: 1 467

Награды: 26

  
  
  
  
  
  
  
  

Отправлено 12 Май 2021 - 18:03

Спасибо, держите вечную ссылку, когда облака зачистят.

Скрытый контент:

  Для просмотра содержимого необходимо 10 очков репутации (вам не хватает 10)

 Скачать без ограничений   Купить этот материал за 390 руб.


  • 6

#5 MrNik

MrNik
  • Platinum
  • Сообщений: 38
  • Регистрация: 10.12.2015
  • Заработано: 1 руб.
Репутация: 2

Награды: 15

  
  
  
  
  
  
  
  

Отправлено 17 Май 2021 - 22:57

Привет) А ни у кого нет их курса "Фронтенд разработчик"?


  • 0

#6 ig432

ig432
  • Сливапер LVL 1
  • Сообщений: 2
  • Регистрация: 19.05.2021
  • Заработано: 0 руб.
Репутация: 0

Награды: 3

  
  
  

Отправлено 18 Май 2021 - 21:18

MrNik, Привет, у меня есть аккаунт по Web-разработке от GB 2021 года, только я его продаю или меняю на аккаунты по js от курсов Ильи Кантора


  • 0

#7 petr1

petr1
  • Сливапер LVL 5
  • Сообщений: 736
  • Регистрация: 20.04.2014
  • Заработано: 8 руб.
Репутация: 163

Награды: 19

  
  
  
  
  
  
  
  

Отправлено 25 Август 2021 - 10:48

MrNik,

привет.

нашел ли "Фронтенд разработчик"?


  • 0

#8 petr1

petr1
  • Сливапер LVL 5
  • Сообщений: 736
  • Регистрация: 20.04.2014
  • Заработано: 8 руб.
Репутация: 163

Награды: 19

  
  
  
  
  
  
  
  

Отправлено 25 Август 2021 - 19:31


Kurtis Stryker

"Фронтенд разработчик" Вы не нашли?


  • 0

#9 MrNik

MrNik
  • Platinum
  • Сообщений: 38
  • Регистрация: 10.12.2015
  • Заработано: 1 руб.
Репутация: 2

Награды: 15

  
  
  
  
  
  
  
  

Отправлено 25 Август 2021 - 21:20

petr1, Привет! к сожалению, нет


  • 0

#10 Kurtis Stryker

Kurtis Stryker
  • Сливапер LVL 7
  • Сообщений: 1 098
  • Регистрация: 20.08.2014
  • Заработано: 409 руб.
Репутация: 1 467

Награды: 26

  
  
  
  
  
  
  
  

Отправлено 26 Август 2021 - 19:19

petr1, да я и не искал, но если это курс от HTML ACADEMY, он, рано или поздно, появится и у нас.


  • 0

#11 Panda13

Panda13
  • Platinum
  • Сообщений: 3
  • Регистрация: 30.09.2021
  • Заработано: 0 руб.
Репутация: 0

Награды: 7

  
  
  
  
  
  
  

Отправлено 21 Октябрь 2021 - 20:34

перезалейте сылку пожалуйста, не получается скачать 


  • 0



Похожие темы Collapse

  Название темы Форум Автор Статистика Последнее сообщение

Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 анонимных

×

Зарегистрируйся моментально!