Цель заброшена

Автор не отписывался в цели 7 лет 8 месяцев 7 дней

Образование

Пройти всю програму навчання на HTML Academy

Про курс я дізнався менше місяця назад і він одразу потрапив у мій список справ, але розпочинати вивчення я не поспішав. Та от повернувшись до начання в коледжі (після канікул), в новому розкладі з'явилася пара "Веб програмування", що не могло мене не радувати. І я подумав що чудово булоб "поєднати" вивченя ВЕБ-у на парах та в HTML Academy. Тому в Академії я вчитиму нові матеріали і виконуватиму тести по програмі, а вколеджі виконуватиму лише обов'язкові завданнян (лабораторні, практичні).

Побачу, що з цього вийде. Та всеодно я впевнений, що це хороша ідея!

Ах,мало не забув! Загальна вартість мети зовсім не така. Я просто ще не знаю скільки часу у мене забере вивчення всієї програми HTML Academy, тому кожен платний курс помічаю місячною вартістю навчання. Хоча пізніше постараюся придумати як це виправити, наприклад за місяць я проходитиму по 4-6 курсів, тому вартість місячного навчання можна буде поділити на кількість курсів.

Критерий завершения

Програма засвоєна і я можу створити сайт на основі здобутих знань

Личные ресурсы

час, а також гроші на підписку по 100 грн в місяць

Экологичность цели

доведу навики створення сайтів до хорошого рівня

Знакомство

Познакомимся с интерфейсами Академии. А заодно рассмотрим базовые понятия вёрстки.
Структура HTML-документа

Создаём простейшую HTML-страницу, разбираемся из каких тегов она состоит и за что эти теги отвечают. Подключаем к странице CSS-стили и JS-скрипты.
Разметка текста

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

Научимся использовать ссылки, вставлять на страницу изображения. А в конце курса небольшой сюрприз.
1. Что такое ссылка?
2. Задаём адрес ссылки
3. Абсолютные адреса
4. Относительные адреса
5. Ссылка на файл
6. Ссылка на изображение
7. Ссылка с якорем
8. Всплывающая подсказка
9. Добавим изображение
10. Размеры изображения
11. Альтернативный текст
12. Изображение-ссылка
13. Фоторепортаж
Знакомство с таблицами

Узнаем из каких тегов состоит таблица и как управлять количеством строк и столбцов. Научимся оформлять таблицы: задавать рамки, фон строк, размеры столбцов, выравнивать текст внутри ячеек. И самое главное — разберёмся, как объединять ячейки.
1. Простейшая таблица
2. Добавляем строки
3. Добавляем столбцы
4. Задаём рамки с помощью CSS
5. Улучшаем отображение рамок
6. Горизонтальные и вертикальные рамки
7. Отступы внутри ячеек
8. Отступы между ячейками
9. Испытание: простая, но аккуратная таблица
10. Ячейки-заголовки
11. Заголовок таблицы
12. Объединяем ячейки в строках
13. Объединяем ячейки в столбцах
14. Закрепление colspan
15. Закрепление rowspan
16. Комбо: colspan + rowspan
17. Испытание: таблица посложнее
18. Выравнивание содержимого в ячейках
19. Добавим цвета
20. Раскрашиваем строки
21. Задаём размеры таблицы
22. Задаём размеры отдельных ячеек и столбцов
23. Испытание: итоговая таблица
Знакомство с формами

Разберёмся как создавать простейшие формы, попрактикуемся использовать текстовые поля, выпадающие списки, поля-галочки, кнопки и другие элементы форм.
1. Первая форма
2. Текстовое поле ввода
3. Идентификатор и значение по умолчанию
4. Подпись для поля ввода
5. Связываем подпись и поле по id
6. Добавим ещё одно поле
7. Поле для ввода пароля
8. Кнопка отправки формы
9. Многострочное поле ввода
10. Чекбокс или «галочка»
11. Испытание: форма регистрации
12. Переключатель или «радиобаттон»
13. ...
Знакомство с CSS

Посмотрим на базовые понятия CSS: селекторы, каскадность, наследование, приоритеты. Взглянем на некоторые CSS-свойства для оформления текста, создания сетки страницы и позиционирования элементов.
Селекторы, часть 1

Опробуем один из самых важнейших механизмов CSS — селекторы. Научимся пользоваться простыми и продвинутыми селекторами, псевдоклассами, а также комбинировать их.
Наследование и каскадирование

Наследование, каскадирование, специфичность: что это и как их правильно использовать?
Оформление текста, часть 1

Разберёмся с самыми распространёнными CSS-свойствами для оформления текста: жирность, курсив, размер, цвет и многое другое.
Фоны, часть 1
Блочная модель документа
Сетки
Позиционирование
Мастерская: создаём меню
Мастерская: декоративные элементы
Кексби. Разметка, оформление текста

Добавляем в разметку текстовые теги: заголовки, списки, цитаты.

Вартість = $/міс підписки
Кексби. Ссылки и изображения

Вставляем содержательные картинки и добавляем ссылки.

Вартість = $/міс підписки
1. Хедер и футер. Теги header и footer
2. Основное содержание. Тег main
3. Разделы страницы. Теги article и SECTION
4. Изображения в формате SVG
5. Навигация. Тег nav
6. Завершаем футер
7. Использование нестандартных шрифтов
8. Подробнее о шрифтах. Правило @font-face
9. Дополнительное содержание. Тег aside
10. Еще раз про article. Анонс поста
11. Завершаем главную: наполнение
12. Внутренняя страница: структура поста
13. Даты для людей и машин. Тег time
14. Картинки с подписями. Теги figure и figcaption
15. Видео. Тег video
16. Форматы и источники видео
17. Аудио. Тег audio
18. Форматы и источники звука
19. Испытание: другой вариант главной
Кексби. Знакомство

Размечаем основные блоки главной страницы магазинчика Кекса.

Вартість = $/міс підписки
Кексби. Таблицы

Создаём таблицу прайс-листа и задаём ей базовое оформление.

Вартість = $/міс підписки
Кексби. Формы

Завершаем разметку страницы формой вопросов.

Вартість = $/міс підписки
Кексби. Промежуточное испытание
Кексби. Сетки
Знакомство с HTML5
Формы и HTML5
Кексби. Разметка, оформление текста
Кексби. Ссылки и изображения
Селекторы, часть 2
Селекторы, часть 3
Рамки и фоны, часть 2
Игра теней
Линейные градиенты
Двумерные трансформации
Оформление текста, часть 2
Анимация
Плавные переходы
Мастерская: декоративные эффекты на CSS3
Таблицы на CSS
Кекстаграм: Начало. CSS-фильтры
Кекстаграм: Эпилог. JavaScript
Флексбокс, часть 1
Флексбокс, часть 2
Знакомство с LESS
Примеси в LESS
Знакомство с SVG
Оформление SVG-фигур

Базовые понятия об оформлении SVG-фигур. Заливки и обводки

2448
29 января 2017, 07:49

Этап 1

Этап 2

Этап 3

Этап 4

Этап 5

Этап 6

Этап 7

Этап 8

Этап 9

Этап 10

Этап 11

Этап 12

Этап 13

Этап 14

Этап 15

Этап 16

Этап 17

Этап 18

Этап 19

Этап 20

Этап 21

Этап 22

Этап 23

Этап 24

Этап 25

Этап 26

Этап 27

Этап 28

Этап 29

Этап 30

Этап 31

Этап 32

Этап 33

Этап 34

Этап 35

Этап 36

Этап 37

Этап 38

Этап 39

Этап 40

Этап 41

Этап 42

Этап 43

Этап 44

Этап 45

Этап 46

Юрiй Пуцан

Пройти всю програму навчання на HTML Academy

Критерий завершения

Личные ресурсы

Экологичность цели

Знакомство

Структура HTML-документа

Разметка текста

Ссылки и изображения

Знакомство с таблицами

Знакомство с формами

Знакомство с CSS

Селекторы, часть 1

Наследование и каскадирование

Оформление текста, часть 1

Фоны, часть 1

Блочная модель документа

Сетки

Позиционирование

Мастерская: создаём меню

Мастерская: декоративные элементы

Кексби. Разметка, оформление текста

Кексби. Ссылки и изображения

Кексби. Знакомство

Кексби. Таблицы

Кексби. Формы

Кексби. Промежуточное испытание

Кексби. Сетки

Знакомство с HTML5

Формы и HTML5

Кексби. Разметка, оформление текста

Кексби. Ссылки и изображения

Селекторы, часть 2

Селекторы, часть 3

Входите.
Открыто.