1

Step 1

Знакомство

2

Step 2

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

3

Step 3

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

4

Step 4

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

5

Step 5

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

6

Step 6

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

7

Step 7

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

8

Step 8

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

9

Step 9

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

10

Step 10

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

11

Step 11

Фоны, часть 1

12

Step 12

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

13

Step 13

Сетки

14

Step 14

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

15

Step 15

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

16

Step 16

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

17

Step 17

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

18

Step 18

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

19

Step 19

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

20

Step 20

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

21

Step 21

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

22

Step 22

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

23

Step 23

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

24

Step 24

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

25

Step 25

Формы и HTML5

26

Step 26

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

27

Step 27

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

28

Step 28

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

29

Step 29

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

30

Step 30

Рамки и фоны, часть 2

31

Step 31

Игра теней

32

Step 32

Линейные градиенты

33

Step 33

Двумерные трансформации

34

Step 34

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

35

Step 35

Анимация

36

Step 36

Плавные переходы

37

Step 37

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

38

Step 38

Таблицы на CSS

39

Step 39

Кекстаграм: Начало. CSS-фильтры

40

Step 40

Кекстаграм: Эпилог. JavaScript

41

Step 41

Флексбокс, часть 1

42

Step 42

Флексбокс, часть 2

43

Step 43

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

44

Step 44

Примеси в LESS

45

Step 45

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

46

Step 46

Оформление SVG-фигур

1

Step 1

Знакомство

2

Step 2

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

3

Step 3

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

4

Step 4

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

5

Step 5

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

6

Step 6

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

7

Step 7

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

8

Step 8

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

9

Step 9

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

10

Step 10

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

11

Step 11

Фоны, часть 1

12

Step 12

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

13

Step 13

Сетки

14

Step 14

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

15

Step 15

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

16

Step 16

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

17

Step 17

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

18

Step 18

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

19

Step 19

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

20

Step 20

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

21

Step 21

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

22

Step 22

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

23

Step 23

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

24

Step 24

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

25

Step 25

Формы и HTML5

26

Step 26

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

27

Step 27

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

28

Step 28

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

29

Step 29

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

30

Step 30

Рамки и фоны, часть 2

31

Step 31

Игра теней

32

Step 32

Линейные градиенты

33

Step 33

Двумерные трансформации

34

Step 34

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

35

Step 35

Анимация

36

Step 36

Плавные переходы

37

Step 37

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

38

Step 38

Таблицы на CSS

39

Step 39

Кекстаграм: Начало. CSS-фильтры

40

Step 40

Кекстаграм: Эпилог. JavaScript

41

Step 41

Флексбокс, часть 1

42

Step 42

Флексбокс, часть 2

43

Step 43

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

44

Step 44

Примеси в LESS

45

Step 45

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

46

Step 46

Оформление SVG-фигур

29 January 2017 31 May 2017
The goal is overdue by 2732 days
Details Briefly

Goal abandoned

The author does not write in the goal 7 years 7 months 6 days

Goal author

Юрiй Пуцан

Ukraine, Львов

25 years old

Send message

Add to friends

Education

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

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

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

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

 Goal Accomplishment Criteria

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

 Personal resources

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

 Goal ecological compatibility

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

  1. Знакомство

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

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

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

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

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

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

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

    1. Что такое ссылка?

    2. Задаём адрес ссылки

    3. Абсолютные адреса

    4. Относительные адреса

    5. Ссылка на файл

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

    7. Ссылка с якорем

    8. Всплывающая подсказка

    9. Добавим изображение

    10. Размеры изображения

    11. Альтернативный текст

    12. Изображение-ссылка

    13. Фоторепортаж

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

    Узнаем из каких тегов состоит таблица и как управлять количеством строк и столбцов. Научимся оформлять таблицы: задавать рамки, фон строк, размеры столбцов, выравнивать текст внутри ячеек. И самое главное — разберёмся, как объединять ячейки.

    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. Испытание: итоговая таблица

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

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

    1. Первая форма

    2. Текстовое поле ввода

    3. Идентификатор и значение по умолчанию

    4. Подпись для поля ввода

    5. Связываем подпись и поле по id

    6. Добавим ещё одно поле

    7. Поле для ввода пароля

    8. Кнопка отправки формы

    9. Многострочное поле ввода

    10. Чекбокс или «галочка»

    11. Испытание: форма регистрации

    12. Переключатель или «радиобаттон»

    13. ...

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

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

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

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

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

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

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

    Разберёмся с самыми распространёнными CSS-свойствами для оформления текста: жирность, курсив, размер, цвет и многое другое.

  11. Фоны, часть 1

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

  13. Сетки

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

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

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

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

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

    Вартість = $/міс підписки

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

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

    Вартість = $/міс підписки

    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. Испытание: другой вариант главной

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

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

    Вартість = $/міс підписки

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

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

    Вартість = $/міс підписки

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

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

    Вартість = $/міс підписки

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

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

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

  25. Формы и HTML5

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

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

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

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

  30. Рамки и фоны, часть 2

  31. Игра теней

  32. Линейные градиенты

  33. Двумерные трансформации

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

  35. Анимация

  36. Плавные переходы

  37. Мастерская: декоративные эффекты на CSS3

  38. Таблицы на CSS

  39. Кекстаграм: Начало. CSS-фильтры

  40. Кекстаграм: Эпилог. JavaScript

  41. Флексбокс, часть 1

  42. Флексбокс, часть 2

  43. Знакомство с LESS

  44. Примеси в LESS

  45. Знакомство с SVG

  46. Оформление SVG-фигур

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

  • 2389
  • 29 January 2017, 07:49

Similar goals

Sign up

Signup

Уже зарегистрированы?
Quick sign-up through social networks.
Sign in

Sign in.
Allowed.

Not registered yet?
 
Log in through social networks
Forgot your password?
Settings

Widget for your goal

Big (450×150 px)

Small (250×100 px)

To insert a widget on your website or blog, copy the code and embed it in the original html-code to your blog/site.

For PRO only

You can buy a PRO account, or get it for free by inviting 3 friends to SmartProgress

Invite friends

Team
goal

Buy PRO-account

Email for any cases

  • Maxim Malikov

    founder

  • Sergey Zakharov

    founder