Мета закинута
Автор не відписував в цілі 7 років 6 месяців 21 день
Пройти всю програму навчання на HTML Academy
Про курс я дізнався менше місяця назад і він одразу потрапив у мій список справ, але розпочинати вивчення я не поспішав. Та от повернувшись до начання в коледжі (після канікул), в новому розкладі з'явилася пара "Веб програмування", що не могло мене не радувати. І я подумав що чудово булоб "поєднати" вивченя ВЕБ-у на парах та в HTML Academy. Тому в Академії я вчитиму нові матеріали і виконуватиму тести по програмі, а вколеджі виконуватиму лише обов'язкові завданнян (лабораторні, практичні).
Побачу, що з цього вийде. Та всеодно я впевнений, що це хороша ідея!
Ах,мало не забув! Загальна вартість мети зовсім не така. Я просто ще не знаю скільки часу у мене забере вивчення всієї програми HTML Academy, тому кожен платний курс помічаю місячною вартістю навчання. Хоча пізніше постараюся придумати як це виправити, наприклад за місяць я проходитиму по 4-6 курсів, тому вартість місячного навчання можна буде поділити на кількість курсів.
Критерій завершення
Програма засвоєна і я можу створити сайт на основі здобутих знань
Особисті ресурси
час, а також гроші на підписку по 100 грн в місяць
Екологічність мети
доведу навики створення сайтів до хорошого рівня
-
Знакомство
Познакомимся с интерфейсами Академии. А заодно рассмотрим базовые понятия вёрстки.
-
Структура HTML-документа
Создаём простейшую HTML-страницу, разбираемся из каких тегов она состоит и за что эти теги отвечают. Подключаем к странице CSS-стили и JS-скрипты.
-
Разметка текста
Научимся добавлять на простейшую HTML-страницу текстовое содержание и правильно размечать его: абзацы, заголовки, подзаголовки, списки и многое другое.
-
Ссылки и изображения
Научимся использовать ссылки, вставлять на страницу изображения. А в конце курса небольшой сюрприз.
-
Что такое ссылка?
-
Задаём адрес ссылки
-
Абсолютные адреса
-
Относительные адреса
-
Ссылка на файл
-
Ссылка на изображение
-
Ссылка с якорем
-
Всплывающая подсказка
-
Добавим изображение
-
Размеры изображения
-
Альтернативный текст
-
Изображение-ссылка
-
Фоторепортаж
-
-
Знакомство с таблицами
Узнаем из каких тегов состоит таблица и как управлять количеством строк и столбцов. Научимся оформлять таблицы: задавать рамки, фон строк, размеры столбцов, выравнивать текст внутри ячеек. И самое главное — разберёмся, как объединять ячейки.
-
Простейшая таблица
-
Добавляем строки
-
Добавляем столбцы
-
Задаём рамки с помощью CSS
-
Улучшаем отображение рамок
-
Горизонтальные и вертикальные рамки
-
Отступы внутри ячеек
-
Отступы между ячейками
-
Испытание: простая, но аккуратная таблица
-
Ячейки-заголовки
-
Заголовок таблицы
-
Объединяем ячейки в строках
-
Объединяем ячейки в столбцах
-
Закрепление colspan
-
Закрепление rowspan
-
Комбо: colspan + rowspan
-
Испытание: таблица посложнее
-
Выравнивание содержимого в ячейках
-
Добавим цвета
-
Раскрашиваем строки
-
Задаём размеры таблицы
-
Задаём размеры отдельных ячеек и столбцов
-
Испытание: итоговая таблица
-
-
Знакомство с формами
Разберёмся как создавать простейшие формы, попрактикуемся использовать текстовые поля, выпадающие списки, поля-галочки, кнопки и другие элементы форм.
-
Первая форма
-
Текстовое поле ввода
-
Идентификатор и значение по умолчанию
-
Подпись для поля ввода
-
Связываем подпись и поле по id
-
Добавим ещё одно поле
-
Поле для ввода пароля
-
Кнопка отправки формы
-
Многострочное поле ввода
-
Чекбокс или «галочка»
-
Испытание: форма регистрации
-
Переключатель или «радиобаттон»
-
...
-
-
Знакомство с CSS
Посмотрим на базовые понятия CSS: селекторы, каскадность, наследование, приоритеты. Взглянем на некоторые CSS-свойства для оформления текста, создания сетки страницы и позиционирования элементов.
-
Селекторы, часть 1
Опробуем один из самых важнейших механизмов CSS — селекторы. Научимся пользоваться простыми и продвинутыми селекторами, псевдоклассами, а также комбинировать их.
-
Наследование и каскадирование
Наследование, каскадирование, специфичность: что это и как их правильно использовать?
-
Оформление текста, часть 1
Разберёмся с самыми распространёнными CSS-свойствами для оформления текста: жирность, курсив, размер, цвет и многое другое.
-
Фоны, часть 1
-
Блочная модель документа
-
Сетки
-
Позиционирование
-
Мастерская: создаём меню
-
Мастерская: декоративные элементы
-
Кексби. Разметка, оформление текста
Добавляем в разметку текстовые теги: заголовки, списки, цитаты.
Вартість = $/міс підписки
-
Кексби. Ссылки и изображения
Вставляем содержательные картинки и добавляем ссылки.
Вартість = $/міс підписки
-
Хедер и футер. Теги header и footer
-
Основное содержание. Тег main
-
Разделы страницы. Теги article и SECTION
-
Изображения в формате SVG
-
Навигация. Тег nav
-
Завершаем футер
-
Использование нестандартных шрифтов
-
Подробнее о шрифтах. Правило @font-face
-
Дополнительное содержание. Тег aside
-
Еще раз про article. Анонс поста
-
Завершаем главную: наполнение
-
Внутренняя страница: структура поста
-
Даты для людей и машин. Тег time
-
Картинки с подписями. Теги figure и figcaption
-
Видео. Тег video
-
Форматы и источники видео
-
Аудио. Тег audio
-
Форматы и источники звука
-
Испытание: другой вариант главной
-
-
Кексби. Знакомство
Размечаем основные блоки главной страницы магазинчика Кекса.
Вартість = $/міс підписки
-
Кексби. Таблицы
Создаём таблицу прайс-листа и задаём ей базовое оформление.
Вартість = $/міс підписки
-
Кексби. Формы
Завершаем разметку страницы формой вопросов.
Вартість = $/міс підписки
-
Кексби. Промежуточное испытание
-
Кексби. Сетки
-
Знакомство с HTML5
-
Формы и HTML5
-
Кексби. Разметка, оформление текста
-
Кексби. Ссылки и изображения
-
Селекторы, часть 2
-
Селекторы, часть 3
-
Рамки и фоны, часть 2
-
Игра теней
-
Линейные градиенты
-
Двумерные трансформации
-
Оформление текста, часть 2
-
Анимация
-
Плавные переходы
-
Мастерская: декоративные эффекты на CSS3
-
Таблицы на CSS
-
Кекстаграм: Начало. CSS-фильтры
-
Кекстаграм: Эпилог. JavaScript
-
Флексбокс, часть 1
-
Флексбокс, часть 2
-
Знакомство с LESS
-
Примеси в LESS
-
Знакомство с SVG
-
Оформление SVG-фигур
Базовые понятия об оформлении SVG-фигур. Заливки и обводки
Не пропустіть нові записи!
Підпишіться на ціль і стежте за її досягненням
