Goal abandoned
The author does not write in the goal 8 years 2 months 2 days
Пройти весь курс HTML academy Part 1
Не так давно начал изучение вебом (с Августа), уже успел познакомиться с HTML и CSS, но есть пробелы в знаниях. Знакомый, который давно занимается вебом, посоветовал пройти курс HTML academy чтобы подтянуть знания. Я оформил подписку на месяц, что-то прошёл, но из-за обстоятельств подзабросил на неделю, хочу это исправить и пройти курс до конца подписки.
Goal Accomplishment Criteria
Пройден весь курс до истечения подписки
Personal resources
Время, подписка, компьютер, интернет, интересе, желание
Goal ecological compatibility
Ни один пингвин не пострадает, обещаю
-
Знакомство с таблицами
Узнаем из каких тегов состоит таблица и как управлять количеством строк и столбцов. Научимся оформлять таблицы: задавать рамки, фон строк, размеры столбцов, выравнивать текст внутри ячеек. И самое главное — разберёмся, как объединять ячейки.
-
Простейшая таблица
-
Добавляем строки
-
Добавляем столбцы
-
Задаём рамки с помощью CSS
-
Улучшаем отображение рамок
-
Горизонтальные и вертикальные рамки
-
Отступы внутри ячеек
-
Отступы между ячейками
-
Испытание: простая, но аккуратная таблица
-
Ячейки-заголовки
-
Заголовок таблицы
-
Объединяем ячейки в строках
-
Объединяем ячейки в столбцах
-
Закрепление colspan
-
Закрепление rowspan
-
Комбо: colspan + rowspan
-
Испытание: таблица посложнее
-
Выравнивание содержимого в ячейках
-
Добавим цвета
-
Раскрашиваем строки
-
Задаём размеры таблицы
-
Задаём размеры отдельных ячеек и столбцов
-
Испытание: итоговая таблица
-
-
Знакомство с формами
Разберёмся как создавать простейшие формы, попрактикуемся использовать текстовые поля, выпадающие списки, поля-галочки, кнопки и другие элементы форм.
-
Первая форма
-
Текстовое поле ввода
-
Идентификатор и значение по умолчанию
-
Подпись для поля ввода
-
Связываем подпись и поле по id
-
Добавим ещё одно поле
-
Поле для ввода пароля
-
Кнопка отправки формы
-
Многострочное поле ввода
-
Чекбокс или «галочка»
-
Испытание: форма регистрации
-
Переключатель или «радиобаттон»
-
Группа переключателей
-
Раскрывающийся список или «селект»
-
«Мультиселект»
-
Поле для загрузки файлов
-
Скрытое поле
-
Испытание: редактирование профиля
-
-
Знакомство с CSS
Посмотрим на базовые понятия CSS: селекторы, каскадность, наследование, приоритеты. Взглянем на некоторые CSS-свойства для оформления текста, создания сетки страницы и позиционирования элементов.
-
Введение в CSS
-
CSS-правила
-
Продвинутые селекторы
-
Свойства для оформления текста
-
Свойства для задания размеров и отступов
-
Позиционирование элементов
-
Создание сетки страницы
-
Декоративные свойства
-
Каскадность
-
Каскадность. Переопределение стилей
-
Каскадность и приоритеты
-
Каскадность. Коктейль из классов
-
Наследование
-
Ненаследуемые свойства
-
Испытание: макет-прототип
-
-
Селекторы, часть 1
Опробуем один из самых важнейших механизмов CSS — селекторы. Научимся пользоваться простыми и продвинутыми селекторами, псевдоклассами, а также комбинировать их.
-
Нелёгкая жизнь без селекторов
-
Селекторы по тегам
-
Селекторы по классам
-
Отрабатываем селекторы по классам
-
Контекстные селекторы
-
Соседние селекторы
-
Контекстные и соседние селекторы
-
Дочерние селекторы
-
Псевдоклассы
-
Псевдокласс :nth-child
-
:nth-child и контекстные селекторы
-
Псевдокласс :hover
-
Динамические эффекты с помощью :hover
-
Псевдоклассы :link, :visited и :active
-
Псевдокласс :focus
-
Селекторы атрибутов
-
Селектор по id
-
Испытание. Дуэль.
-
-
Наследование и каскадирование
Наследование, каскадирование, специфичность: что это и как их правильно использовать?
-
Иерархическое дерево
-
Наследование
-
Наследование «на пальцах»
-
Ещё немного про наследование
-
Наследуемые свойства
-
Ненаследуемые свойства
-
Принудительное наследование
-
Каскадирование
-
Битва за курочку
-
Битва за курочку. Раунд второй
-
Битва за курочку. Раунд третий
-
Битва за курочку. Борьба накаляется
-
Битва за курочку. Запрещённый приём
-
Ещё одна задачка на специфичность
-
Расчёт значения специфичности
-
Ещё задачка на порядок кода
-
Перекрестное наследование
-
Испытание: взломанный котопрофайл
-
-
Оформление текста, часть 1
Разберёмся с самыми распространёнными CSS-свойствами для оформления текста: жирность, курсив, размер, цвет и многое другое.
-
Главный текстовый тег — span
-
Свойство font-size: задаём размер шрифта
-
Свойство font-weight: толщина начертания
-
Свойство font-style: курсив
-
Свойство font-family: шрифт
-
Свойство color: цвет текста
-
Свойство text-decoration: подчёркивание и другие эффекты
-
Декоративное подчёркивание
-
Задаём регистр символов с помощью text-transform
-
Управляем пробелами: white-space
-
Горизонтальное выравнивание текста: text-align
-
Вертикальное выравнивание: vertical-align
-
Верхние и нижние индексы на CSS
-
Свойство line-height: управляем высотой строки
-
Вертикальный ритм текста
-
Испытание: рецепт на CSS
-
-
Фоны, часть 1
Научимся использовать фоновые изображения и задавать цвета фона. Разберёмся с популярными форматами изображений и взглянем на некоторые приёмы создания декоративных эффектов.
-
Cвойство background-color
-
Свойство background-image
-
Свойство background-repeat
-
Свойство background-position
-
Ещё немного background-position
-
Свойство background-attachment
-
Свойство background
-
Испытание: котокомикс
-
Формат JPEG
-
Формат PNG-8
-
Формат PNG-24
-
Формат GIF
-
Несколько фонов
-
Эффекты с повторяющимся фоном
-
Спрайты
-
Испытание: CAT Academy
-
-
Блочная модель документа
Научимся управлять размерами и расположением элементов, задавать отступы и рамки, а также рассмотрим типы элементов и их особенности. Это первый и самый важный шаг к созданию страниц со сложной сеткой и сложных декоративных элементов.
-
Блочные элементы
-
Строчные элементы
-
Ширина и высота
-
Внутренние отступы, свойство padding
-
Внешние отступы, свойство margin
-
Рамки
-
Стандартная блочная модель
-
Первое испытание
-
«Схлопывание» внешних отступов
-
«Выпадание» внешних отступов
-
Как отцентровать элемент?
-
Блочная модель и строчные элементы
-
Ширина 100% и ширина по умолчанию
-
Проблемы обычной блочной модели
-
Изменяем блочную модель, свойство box-sizing
-
Второе испытание
-
Управление типом элемента, свойство display
-
display: inline-block
-
display: table
-
display: table-row
-
display: table-cell
-
display: none
-
Последнее испытание
-
-
Сетки
Попробуем поймать поток документа и разобраться что это такое. Взглянем на тонкости свойства float и блочно-строчных элементов. Отработаем основные приёмы построения сеток.
-
Пробуем управлять потоком
-
Управление потоком, шаг 2
-
Управление потоком, шаг 3
-
Создадим другой поток
-
Другой поток, шаг 2
-
Другой поток, шаг 3
-
Другой поток, финал
-
Погружение в флоаты
-
float и ширина
-
float и выпадание из потока
-
Флоат рядом с флоатом
-
Когда флоатов много, а места мало
-
Испытание: пазл на флоатах
-
Свойство clear
-
Борьба с выпаданием флоатов: распорки
-
Борьба с выпаданием флоатов: псевдораспорки
-
Простейшая сетка, шаг 1
-
Простейшая сетка, шаг 2
-
Простейшая сетка, финал
-
Сетка посложнее, шаг 1
-
Сетка посложнее, шаг 2
-
Сетка посложнее, шаг 3
-
Сетка посложнее, добавляем содержание
-
Последняя сетка, шаг 1
-
Последняя сетка, шаг 2
-
Последняя сетка завершена
-
Испытание: строим сетку
-
Погружение в inline-block
-
float vs inline-block
-
Простая сетка на inline-block
-
inline-block и пробелы в коде
-
Испытание: котогалерея на inline-block
-
-
Позиционирование
Взглянем на несколько режимов позиционирования элементов: относительном, абсолютном и фиксированном. А также попрактикуемся изменять расположение элементов на странице с помощью CSS-свойств для позиционирования.
-
Поток документа
-
Относительное позиционирование
-
position: relative и свойство top
-
position: relative и свойство left
-
position: relative и свойство bottom
-
position: relative и свойство right
-
Относительное позиционирование на практике
-
Абсолютное позиционирование
-
Абсолютное позиционирование и строчные элементы
-
position: absolute и свойство left
-
position: absolute и свойство top
-
position: absolute и свойство right
-
position: absolute и свойство bottom
-
Точка отсчёта координат
-
Тренируемся задавать координаты
-
Неявная точка отсчёта
-
Абсолютное позиционирование на практике
-
Фиксированное позиционирование
-
z-index или кто кого перекроет
-
Испытание: собери слово «вечность»
-
-
Мастерская: создаём меню
Создадим с нуля несколько типовых навигационных меню: вертикальное, горизонтальное, многоуровневое и с выпадающим подменю. Это прикладной курс, в котором вы будете использовать знания и навыки, полученные в предыдущих курсах.
-
Создаём вертикальное меню
-
Добавляем ссылки
-
Сбрасываем стили списка
-
Оформляем контейнер меню
-
Оформляем пункты, простой вариант
-
Более сложное оформление пунктов
-
Добавляем разделители
-
Оформляем состояния пунктов
-
Испытание: вертикальное меню
-
Многоуровневое вертикальное меню
-
Устраняем проблемы оформления
-
Переносим рамки, задаём отступы подменю
-
Оформляем пункты подменю
-
Тестируем на большой вложенности
-
Испытание: многоуровневое меню
-
Горизонтальное меню
-
Что делать, если пункты не влезают?
-
Усложненное оформление пунктов
-
Завершаем оформление пунктов
-
Испытание: горизонтальное меню
-
Вертикальное меню с выпадающим подменю
-
Позиционируем выпадающее подменю
-
Отображаем подменю при наведении
-
Горизонтальное меню с выпадающим подменю
-
Оформляем выпадающее меню
-
Включаем механизм выпадания
-
Состояние «открытое подменю»
-
Испытание: выпадающее меню
-
-
Мастерская: декоративные элементы
Создадим с нуля различные декоративные элементы: социальные кнопки, переключатели страниц, блоки комментариев и так далее. Это прикладной курс, в котором вы будете использовать знания и навыки, полученные в предшествующих курсах.
-
Социальные кнопки, шаг 1
-
Социальные кнопки, шаг 2
-
Социальные кнопки, шаг 3
-
Переключатель страниц, шаг 1
-
Переключатель страниц, шаг 2
-
Переключатель страниц, шаг 3
-
Переключатель страниц, шаг 4
-
Переключатель страниц, тестирование
-
Испытание: карточка курса
-
Контакты, шаг 1
-
Контакты, шаг 2
-
Контакты, шаг 3
-
Комментарии, шаг 1
-
Комментарии, шаг 2
-
Комментарии, шаг 3
-
Комментарии, шаг 4
-
Комментарии, шаг 5
-
Испытание: анонс поста
-
Don't miss new posts!
Subscribe for the Goal and follow through to its completion
