HTML Academy — интерактивные онлайн-курсы по HTML и CSS


Содержание

HTML Академия — интерактивные онлайн-курсы

Сегодня про HTML Академию. Это группа ребят, которая занимается обучением нас и вас веб-разработке. Подучился там, и мне понравилось. Рассказываю.

Чему учат

Учат фронтенду, главным образом верстке. В последнее время начали двигаться в сторону веб-программирования. Если вкратце о том, что это такое, то прямо сейчас нажимаем F12 и в открышемся инструменте разработчика смотрим на код этой страницы. Так страница выглядит изнутри, такой мы ее создаем, в таком виде она отправляется в ваш гугл хром. Вот этому и учат.

Это языки HTML и CSS, а процесс создания страницы называется версткой. В каком-то смысле это похоже на верстку газет и журналов: берем контент и разбрасываем его по странице. Однако чтобы сверстать сайт, нужно написать код. Дизайнер рисует макет сайта, отправляет картинки верстальщику. Верстальщик берет эти картинки и пишет HTML и CSS так, чтобы картинки превратилась в интерактивные страницы сайта. С этого начинается интернет.

Кого учат

Учат всех. Большое внимание уделяют новичкам. Будь ты хоть айтишником, хоть проституткой, можешь прямо сейчас пойти на сайт Академии и сразу же начать учиться. Знаний о компьютерах, программировании или математике не требуется. Не требуется никаких дополнительных программ и настроек компьютера. Все с нуля.

У самого процесса верстки и у языков HTML и CSS очень низкий порог вхождения. Пишешь несколько символов и сразу же видишь результат. В дальнейшем, конечно, потребуются какие-то программы и настройки, всплывут сложности, и начнется наука. Нужна будет помощь и наставники. Но это все будет потом. А сейчас нужно сделать первый шаг, который совсем не сложный.

Как учат

Верстальщики академии встроили браузер тебе в браузер, чтобы ты мог верстать сайт внутри сайта. Выглядит это примерно так:

Дается небольшой кусок теории и соответствующее задание. Пишешь код, система проверяет, защитывает задание, переходишь к следующему. Переодически даются задания-испытания: сверстать кусок по образцу. Тут уже побольше практики.

На текущий момент в академии уже почти двадцать курсов по основам верстки. Курсы сильно раздроблены, и это очень удобно. Можно заниматься присестами и по пять минут, и по пять часов. Маленькие куски информации хорошо усваиваются.

Как мотивируют

Обучение геймифицированно. За прохождение заданий выдаются очки. Испытания можно проходить на 100%. За различные успехи студентов автоматически награждают виртуальными ачивками. Прогресс, очки, ачивки выносятся в профиль. Можно мериться писюнами с друзьями.

У Академии есть маскот — кот Кекс. Это настоящий, живой кот. Домашний питомец их вождя Александра. И вообще в процессе обучения много котиков. И енотов. Еще у них есть магазин с футболками и наклейками.

Раз в месяц шлют рассылку (добровольно, конечно) с выборкой полезных статей и новостей. Иногда пишут в блог. Завели «влог». Учавствуют в записи подкастов.

Как зарабатывают

Помимо базовых курсов предлагают еще двадцатку продвинутых курсов. Эти курсы доступны только по платной подписке.

Ограничивают количество проверок испытаний. Снимают ограничения при наличии той же платной подписки.

Регулярно проводят онлайн-интенсивы: лекции и домашки, преподаватели и наставники. Стоит отдельных денег.

Официальные документы

В 2020-ом Академия получили лицензию на образовательную деятельность. Если честно, то я не знаю на сколько это круто или не круто, но это должно стать плюсом при выборе Академии и их услуг. Посмотреть документы можно по ссылке: https://htmlacademy.ru/docs/license

Ссылки

  • Непосредственно сайт:
    https://htmlacademy.ru/?ref=170520 (ссылка реферальная)
  • Мой профиль в Академии:
    https://htmlacademy.ru/profile/ >https://vk.com/htmlacademy

Интенсивы

  • Базовый HTML и CSS:
    https://htmlacademy.ru/intensive/htmlcss
  • Продвинутый HTML и CSS:
    https://htmlacademy.ru/intensive/adaptive
  • Базовый JavaScript:
    https://htmlacademy.ru/intensive/javascript
  • Продвинутый JavaScript:
    https://htmlacademy.ru/intensive/ecmascript
  • Базовый PHP:
    https://htmlacademy.ru/intensive/php

Про интенсивы расскажу позже, а пока вот вам скидос в 800 рублей по моей партнерке: 1705204bbef

Критика

У Академии одна проблема: сапожники без сапог. Сам сайт четенько работает, но выглядит так себе. Графон не подтянут под ретину, тут и там встречаются куски бутстрапа, разные страницы исполнены в разных стилях. Лендосы последних интенсивов — полотно текста с кучей таблиц.
UPD: Академия растет и развивается. Сайт себе сделали. Собственный стиль выработали.

Code Academy

Справедливости ради, надо сказать, что идея не нова. Похоже, что первыми все-таки был загранично-буржуйский ресурс Code Academy. Расследованиями я не занимался и не буду, но можно рассказать про Code Academ`ею и кто там у кого в комментариях.

Курс HTML для начинающих

Основы вёрстки сайтов на HTML и CSS

Чему Вы научитесь при прохождении курса HTML для начинающих

После прохождения этого курса вы получите знания, с помощью которых сможете самостоятельно создавать HTML-странички. Более того, к концу курса мы даже сделаем сайт и опубликуем его в интернете!

Онлайн курс по HTML от WebShake – это возможность самостоятельно сделать первый шаг на пути освоения специальности веб-разработчика.

Отзывы учеников

Сертификат

Преимущества

Проверка домашек

К урокам есть домашние задания, которые я ежедневно проверяю. Эта привелегия доступна только для патронов проекта.

Быстрая помощь

Все ученики имеют доступ к общему Telegram-чату, в котором можно задать вопросы и получить ответ в течение 10 минут.

Бесплатно

Не, ну Вы видели эти цены на курсы в десятки тысяч рублей?
Здесь Вы получите все материалы бесплатно!

Коммьюнити

Цель данного проекта — объединять единомышленников. В нашем telegram-чате более 3000 участников!

Об авторе курса

Привет! Меня зовут Артём Ивашкевич. Я работаю веб-разработчиком более трёх лет. Сейчас я работаю в компании Зарплата.ру — это крупный проект, над которым трудятся более 50 разработчиков, его ежемесячная посещаемость более 4 млн человек.

В свободное время я обучаю программированию других людей, потому что мне это просто нравится. Если Вам интересно узнать, как я к этому пришёл, прочитайте историю как я стал программистом.

Привет! Меня зовут Артём Ивашкевич. Я работаю веб-разработчиком более двух с половиной лет. Сейчас я работаю в компании Зарплата.ру — это крупный проект, над которым трудятся более 50 разработчиков, его ежемесячная посещаемость более 4 млн человек.

В свободное время я обучаю программированию других людей, потому что мне это просто нравится. Если Вам интересно узнать, как я к этому пришёл, прочитайте историю как я стал программистом.

Программа курса

Уровень 1. Введение и основы HTML

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

  • 3. Тег doctype: указываем версию HTML
  • 4. Из чего должна состоять любая страница в HTML
  • 5. Заголовок HTML-страницы
  • 6. Кодировка HTML-страницы
  • 7. Ключевые слова (кейворды, keywords)
  • 8. Тег description: краткое описание страницы
  • 9. Комментарии в HTML
  • 10. Подключение CSS-стилей к HTML
  • 11. Подключение скриптов JavaScript в HTML
  • 12. Итог второго уровня курса по HTML

Уровень 3. Разметка текста

  • 13. Делаем абзацы в HTML
  • 14. Делаем заголовки в HTML
  • 15. Маркированные списки в HTML
  • 16. Нумерованный список в HTML: тег ol
  • 17. Делаем вложенный список в HTML
  • 18. Выделяем важное жирным шрифтом
  • 19. Курсив в HTML: теги em и i
  • 20. Переносы и разделители в HTML: теги br и hr
  • 21. Используем цитаты в HTML
  • 22. Верхние и нижние индексы: оформляем формулы
  • 23. Выводим текст как есть: тег pre

Уровень 4. Ссылки

  • 24. Учимся делать ссылки в HTML
  • 25. Что такое абсолютные и относительные ссылки
  • 26. Делаем ссылку на файл
  • 27. Ссылка с якорем
  • 28. Всплывающая подсказка для ссылок

Уровень 5. Картинки

  • 29. Как вставлять картинки в HTML

  • 30. Делаем картинку ссылкой
  • 31. Описание картинки в HTML

Уровень 6. Таблицы

  • 32. Создаём таблицу в HTML: тег table
  • 33. Делаем границы для таблицы в HTML
  • 34. Горизонтальные и вертикальные границы в таблице HTML
  • 35. Отступы в таблицах
  • 36. Название таблицы в HTML
  • 37. Ячейки-заголовки в таблице HTML
  • 38. Объединение ячеек в таблицах
  • 39. Выравниваем текст в таблице HTML
  • 40. Способы выравнивания таблицы по центру в HTML
  • 41. Учимся изменять цвет таблицы в HTML
  • 42. Изменяем размер таблицы в HTML

Уровень 7. Формы

  • 43. Учимся создавать формы в HTML
  • 44. Как задать значение по умолчанию для поля в форме
  • 45. Как правильно сделать подписи к полям ввода
  • 46. Создаём форму авторизации на HTML
  • 47. Многострочное поле ввода: тег textarea
  • 48. Поле-галочка в HTML
  • 49. Поле-переключатель в форме HTML
  • 50. Делаем раскрывающийся список в HTML
  • 51. Форма для загрузки файлов
  • 52. Используем скрытое поле в форме

Уровень 8. Создание сайта и его выкладка в Интернет

Уровень 9. Подведение итога

Что мы предлагаем

Онлайн курс по HTML представляет собой серию уроков, объединенных в несколько разделов и сопровождающихся графическими и видеоматериалами. В конце каждой темы пользователю предлагается выполнить домашнее задание, которое позволит закрепить пройденное.

Уроки сопровождаются домашними заданиями. Мы настоятельно советуем их выполнять, поскольку именно практика применения полученных знаний способствует их максимальному усвоению. Кроме того, рекомендую изучать темы именно в той последовательности, в которой они расположены на сайте. Так обеспечивается соблюдение подхода «от простого к сложному».

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

Преимущества изучения HTML

HyperText Markup Language – базовый язык программирования в web-сфере. Без знания основ HTML невозможно перейти к изучению более сложного материала. Неслучайно бесплатный курс по его освоению стоит первым в числе уроков по веб-разработке.

Язык гипертекстовой разметки легок в освоении, изучить его основы может даже новичок, ранее не сталкивавшийся с веб-разработкой. Мы предлагаем доступный и понятный онлайн курс по HTML, знакомиться с которым можно из любого места, где есть доступ к интернету. Уроки написаны простым языком и ориентированы на людей, имеющих различный уровень знаний в данной сфере.

Несомненным преимуществом бесплатного курса по HTML от WebShake является индивидуальный подход к проведению занятий. Вы осваиваете материал в любое удобное время, при необходимости возвращаясь к уже пройденным темам. Это гарантирует непрерывность процесса обучение, отсутствие «белых пятен» и пробелов в знаниях, которые неизменно возникли бы в случае проведения групповых занятий.

Красиво оформленный сайт привлекает внимание целевой аудитории и повышает количество посетителей. Именно знание HyperText Markup Language позволит придать интернет-ресурсу структурированности и логичности, сделать его простым для восприятия. По окончании курса вы освоите навыки верстки сайта и сможете реализовать их на практике и начать зарабатывать свои первые деньги в сфере веб-разработки.

Остались вопросы?

Просто напишите мне ВКонтакте — с радостью отвечу и помогу каждому!

Курс HTML / CSS

Интерактивный онлайн курс HTML и CSS программирования и верстки сайтов для начинающих — Обучение HTML с нуля

В видеокурсе Вы изучите основы языков HTML и CSS, научитесь создавать адаптивные HTML страницы Вашего сайта. В процессе обучения Вы создадите портал КиноМонстр — сайт о кино, адаптированный для работы одновременно на компьютерах и мобильных устройствах.
Изучите онлайн уроки по основам верстки и программирования Html и Css с нуля и Вы сможете эффективно создавать верстку любых собственных сайтов!

Онлайн курс HTML / CSS программирования и верстки сайтов с нуля

Поделитесь страницей с друзьями

О курсе — Чему Вы научитесь?

Посмотрите видео об онлайн курсе программирования и верстки HTML / CSS для начинающих. Вы узнаете, как эффективно построить обучение основам Html и Css и научиться самому создавать веб сайты с нуля.

В процессе обучения Вы получите знания и навыки:

  • Основы HTML и CSS
  • Полноценная верстка страниц сайтов, на примере сайта о кино
  • Работа в редакторе кода SublimeText
  • Практическое применение основных тегов HTML
  • CSS-верстка текста: цвет и размер шрифта
  • Позиционирование блоков на сайте
  • Работа с изображениями
  • Правильная HTML-разметка для SEO
  • Адаптивная верстка под мобильные устройства
  • Специальные классы для адаптивности
  • Полезные инструменты для frontend-разработчика

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

План курса

Программа обучения включает видео уроки по изучению HTML и CSS с нуля. Благодаря интерактивным тестам и заданиям, Вы сможете закрепить полученные знания по Html и Css верстке и программированию веб сайтов на практике.

Онлайн обучение Профессия
HTML верстальщик

Получите профессию за 2 месяца под руководством опытного наставника. После курса – трудоустройство в веб‑студию или работа на фрилансе.

Основатель онлайн школы WebCademy.ru,
автор обучающего блога по веб-разработке RightBlog.ru,
основатель студии WebOtdel.

  • Product designer, UI & UX дизайнер.
  • FrontEnd разработчик
  • Опыт в веб-разработке: более 10-ти лет
  • Преподавательский стаж: более 5 лет
  • Опыт работы в международных IT компаниях, из TOP 10 в своей отрасли. США, Норвегия. Делаю дизайн и фронтенд для IT продуктов.

Мне нравится делать, пожалуй, лучшие курсы по IT обучению в Рунете.

Я убежден, что при правильном подходе любой человек с желанием может стать веб-разработчиком.

Работа веб-разработчика позволяет мне работать удаленно, путешествовать и жить в любой точке мира. Позволит и Вам!)

  • Обзор редакторов кода
  • Установка и настройка редактора
    Sublime Text
  • Плагины для Sublime Text, package control
  • Тема Material Theme
  • Редактор Brackets
  • HTML теги
  • Основные HTML теги
  • Структура проекта
  • Верстка таблиц
  • CSS3 эффекты
  • Градиенты
  • Трансформации
  • Анимация
  • Хостинг и домены
  • Работа сайта
  • Покупка домена
  • Покупка хостинга
  • Настройка Домена и Хостинга
  • Автообновление страницы при верстке
  • Firefox плагин AutoReload
  • Google Chrome LivePage
  • Стартовый шаблон для верстки
  • Использование Google Fonts
  • Использование WebFont.ru

  • Генерация веб-шрифтов
  • Шрифтовые иконки
  • Карусель — подключение и настройка
  • Табы, вкладки и переключатели
  • Многоуровневая навигация
  • Галерея фотографий
  • Модальные окна
  • Сортировка и фильтрация элементов
  • Работа с Google Maps, вставка карт на сайт
  • Сетка Bootstrap
  • Подключение и использование
  • Быстрое прототипирование на Bootstrap
  • Использование и стилизация компонентов
  • Flex box верстка
  • Pixel Perfect верстка
  • CSS gr >Оптимизация верстки
  • Спрайты
  • Оптимизация работы с изображениями
  • Препроцессор LESS
  • Сниппеты Sublime Text
  • Gist заготовки кода
  • Анимация при прокрутке страницы
  • Параллакс эффекты
  • Загрузчики (эффект загрузки страницы)
  • Плавная прокрутка на сайте
  • Mobile first подход
  • Мобильная адаптивная навигация
  • Онлайн калькулятор
  • Формы обратной связи
  • Отправка писем с сайта
  • Валидация данных в формах
  • Подключение jQuery плагинов
  • Написание jQuery скриптов
  • Основы PHP
  • PHP — основы ООП
  • Основы JavaScript (предпросмотр)
  • JavaScript — модульный подход
  • JavaScript — ООП
  • jQuery — библиотека языка JS
  • ajax запросы на сервер без обновления страницы
  • Контроль версий — Git
  • Сервис GitHub
  • Установка и настройка необходимых программ.
  • Основные понятия в веб-разработке.
  • Основы разметки HTML.
  • Создаем HTML сайт.
  • HTML таблицы и формы.
  • Оформляем домен и хостинг.
  • Работа с FTP.
  • Знакомство с CSS стилями и их возможностями.
  • Основы таблицы стилей CSS.
  • CSS селекторы.
  • Основные CSS свойства.
  • Веб-Шрифты — подключение и генерация.
  • Блочная верстка — часть 1. Типы блоков. Float. Clear.
  • Блочная верстка — часть 2. Типы блоков. Block, inline, inline-block. Clearfix.
  • Абсолютное позиционирование. Псевдоклассы.
  • Стандарты верстки: Валидация CSS.
  • Разбираем темы за неделю. Ответы на вопросы.
  • Знакомство с Photoshop.
  • Работа с макетом в Photoshop.
  • Блочная верстка. Позиционирование.
  • Инструмент — Сетка, для разметки сайта.
  • Стартовый шаблон. Организация работы.
  • БЭМ-нейминг методология.
  • Разбираем темы за неделю. Ответы на вопросы.
  • Что такое фреймворк. Зачем он нужен.
  • Медиа-запросы, мобильная верстка.
  • Верстка адаптиной навигации.
  • Что такое фреймворк. Зачем он нужен.
  • Знакомство с Bootstrap.
  • Сетка, элементы, быстрое прототипирование.
  • CSS3. Градиенты.

  • Размеры текста: em, rem.
  • CSS3. Анимация, тени, переходы.
  • Библиотека Animate.css
  • Анимация при открытии страницы.
  • Препроцессор LESS.
  • Разбираем темы за неделю. Ответы на вопросы.
  • Знакомство с макетом Аполло.
  • Java Script — основы.
  • Знакомство с jQuery.
  • Bootstrap элементы.
  • Оптимизация верстки.
  • jQuery — основы
  • jQuery интерактивные элементы страницы:
    • — Карусель.
    • — Модальные окна.
    • — Табы.
    • — Галерея фотографий.
    • — Сортировка элементов.
  • Знакомство с PHP.
  • PHP — основы.
  • Форма обратной связи на сайт.
  • Фриланс.
  • Проект менеджмент.
  • Разбираем темы за неделю. Ответы на вопросы.
  • Знакомство с Ajax.
  • Критерии сдачи сайта — чек лист.
  • PHP — основы. Форма обратной связи на сайт.
  • Ajax. Ajax форма обратной связи.
  • Устройство на работу.
  • Карьера.
  • Распределение и обсуждение персональных проектов.
  • Консультации по индивидуальным проектам.
  • Большой блок: Фриланс в веб-разработке.
  • Общие задания по фрилансу и трудоустройству.
  • Прием индивидуальных дипломных проектов.
  • Индивидуальные задания фриланс или трудоустройство.
  • Мастер-майнд в группе по куочингу.
  • Большой блок: Трудоустройство в веб-разработке.
  • Мастер-майнд в группе по куочингу.
  • Пуленепробиваемая кроссбраузерная верстка. Покоряем IE. Modernizr.
  • Ускорение верстки.
  • Индивидуальные задания фриланс или трудоустройство.
  • Мастер-майнд в группе по куочингу.
  • Проект менеджмент в веб-разработке.
  • Финал. Выдача сертификатов. ВИП группа. Закрытие курса.
Илон Маск рекомендует:  Что такое код ingres_field_type

Верстаем макет начального уровня. Сайт для туристической компании «ФорестТревел» из 4-х страниц.

Учебный макет для приложения Юнит.
Мобильная верстка под планшеты и смартфоны.

Каждый студент в финале курса создает свой личный сайт портфолио со своими работами. Адаптивная верстка, скрипты, форма обратной связи с проверкой и отправкой сообщений.

Видео уроки

Для удобства изучения все темы курса записаны в видео-уроки и доступны в хорошем качестве. Смотрите уроки в удобное для вас время. Обучайтесь когда вам удобно из любой точки мира.

Домашние задания

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

Чат для общения

В чате потока участники курса общаются и помогают друг другу. Мы создаем дружественную атмосферу. Вместе учиться и достигать поставленной цели всегда легче, чем в одиночку.

Онлайн мастер-классы

Общий созвон раз в неделю, проводим мастер-класс по проектам, отвечаем на самые популярные вопросы и разбираем сложные ситуации.

Три выпускных проекта

Нет ничего лучше практики. В процессе обучения вы сверстаете несколько сайтов, и сделаете итоговый выпускной проект.

Консультации с наставником

Возникли трудности с проектом? Не беда! На индивидуальной консультации наставник подробно расскажет и объяснит что к чему.

После обучения мы продолжаем общение с выпускниками курса. Помогаем друг-другу по вопросам верстки и веб-разработки.

��‍�� Вакансии и проекты

Клуб-выпускников — чат в котором общаются все ребята, которые когда-либо у нас учились. У нас весело и полезно. Можно спросить совет, узнать мнение о своей работе, обсудить проблему и узнать о свежих и крутых вакансиях от знакомых.

Часто ко мне обращаются руководители веб-студий, чтобы я порекомендовал лучших учеников для трудоустройства.

☕ Раз в месяц встречи в Москве

Раз в месяц мы с ребятами собираемся в Москве. Время от времени мы будем устраивать живые встречи и в других городах.

Валерий Молчанов

Виктория Рустамова

Татьяна Берлова

Михаил Кушков

Сергей Галена

Дарья Воропаева

Антон Петров

Ольга Ившина

  • Полноценная верстка страниц сайта
  • Свободное владение HTML и CSS
  • HTML5 и CSS3
  • Знание Adobe Photoshop для работы с макетами
  • Кроссбраузерная верстка
  • Верстка для мобильных устройств (адаптивная и отзывчивая верстка)
  • Оптимизация под мобильные устройства
  • Оптимизация работы с изображениями
  • Умение разбираться в чужом коде
  • Понимание основ юзабилити
  • Основы JavaScript
  • Основы PHP

На курсе есть блок по трудоустройству и фрилансу. Чтобы вы смогли найти достойную работу и хорошо зарабатывать, применяя навыки и знания полученные на курсе. Примеры вакансий с сайта headhunter.ru

Оригиналы отзывов находятся в группе Вконтакте

За чем пришел на курс

За знаниями html & css.

Результат

Вход в профессию / необходимые предметные основы. Во время обучения сделал редизайн своего сайта. Хорошо прокачал свой уровень в верстке сайтов.

Отзыв

Большое спасибо за обучение! Юрий Ключевский – отличный преподаватель. Как педагог по образованию, могу от себя сказать, что созданный Юрием курс очень хорош для новичков в знаниях html & css. Методика – интенсив, плавный, верно построенный; интересный, не напрягающе-нудный, и если есть возможность и желание делать домашние задания, вы никак не останетесь по окончанию этого курса без самостоятельно сделанных и разобранных преподавателем работ-сайтов.

За чем пришел на курс

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

Результат

Самое главное, что база получена, а дальше, как говорил мой дедушка-чекист, — дело техники.

Отзыв

Если вы хотите получить знания по HTML и CSS, то я рекомендую этот курс от Юрия Ключевского! Доступно и понятно о сложных технических моментах и терминах! Если вам интересно то, что скрыто под «капотом» сайта, если вы самостоятельно хотите сделать сайт с нуля до его запуска или просто научиться этому ремеслу, то для начала советую получить знания от профи.

Огромное спасибо! Рекомендую как профессионала своего дела.

За чем пришла на курс

Я ux дизайнер, и мне было необходимо узнать и эту часть жизненного цикла веб интерфейсов. Заниматься самой требует много времени, а при плотном рабочем графике, стараешься экономить каждую минуту.

Результат

Здесь я получила самые необходимые знания, постепенно увеличивалась сложность, и поэтому казалось, что все понятно, но это конечно заслуга Юрия. Я была на курсе слушателем, но, тем не менее, теперь могу сделать простенький сайт, и понять, что написано в коде других сайтов.

Отзыв

Курс очень прикладной, практика, практика, практика. Это мне очень понравилось. Современные технологии, методологии, разные языки. Все это то, что действительно нужно для того чтобы начать работать в данной сфере. Если кто-то действительно ищет возможность для старта в мире верстки, веб программирования, фронтенда, то курс будет очень полезным.

За чем пришел на курс

Результат

Структура верстки стала понятна сама по себе, теперь, если придется, я смогу разобраться в ранее неизвестных мне приемах или функциях и подключить их в свой проект. В итоге мы научились создавать сайты, которые мой знакомый дизайнер оценил как современные и с актуальными «фишками». Самый тренд!))

Отзыв

Курс очень эффективный. Юрий излагает материал настолько понятно и структурированно, что я мог не присутствовать на ночных (в моем часовом поясе) вебинарах и всё равно делать задания. Инструменты, которыми он учит пользоваться, ускоряют верстку в несколько раз, превращая её из рутинной нудятины в нормальный творческий рабочий процесс. Почти круглосуточное сопровождение: от проверки заданий до советов по оптимизации кода. Мне кажется, что Юрий проверял работы гораздо быстрее, чем группа их создавала))

За чем пришел на курс

Я решил что-то поменять в свой жизни. Я подумал, что IT (web) — самое то.

Результат

Хорошо понял необходимые для работы основы. Для себя следующим шагом вижу — изучение JavaScript, JQuery

Отзыв

Я решил пройти курсы и о чем не жалею. Потому что: 1. Все доступно. 2. Юра помогал по тем вопросам. которые возникали в ходе выполнения заданий. 3. Достаточно много материала, который еще нужно переваривать и т.д. Всем рекомендую!

За чем пришел на курс

Решил сделать свой первый шаг в сторону web разработки.

Результат

Хорошая база, которая дает понять, в каком направлении развиваться дальше.

Отзыв

Настоятельно советую курс Юрия по верстке сайтов! Обучение систематизировано таким образом, что на протяжении всего курса ты получаешь только те знания, которые нужны новичку на данном этапе, ничего лишнего. Информативный и сбалансированный курс, опытный преподаватель, адекватная цена. Советую всем интересующимся пройти этот курс, а Юрию желаю успехов!

За чем пришел на курс

Решил найти работу, которая будет нравиться, и приносить не плохие деньги. Остановился на верстке, понравилось, но многое не получалось. Хотелось большего. Решил пройти курсы

Результат

На многое открыл глаза, многое узнал. На курсах все сжато и быстро, а когда оглядываешься назад, то понимаешь, как «высоко» ты уже в верстке, и понимаешь, куда дальше. Понял, как построить работу, с чего начинать, а что можно отложить на потом. Освоил новые программы и работу с ними. Далее можно будет и фрилансом заняться, так сказать отточить полученные навыки, а в будущем думаю на более углубленные курсы пойти.

Отзыв

На курсах ничего лишнего, занудного и скучного. Помимо теории, много практики. Причем практики с подробным объяснением каждой запятой. И даже если после этого, что-то не понятно можно поинтересоваться у сокурсников или, что самое главное, у самого лектора, который на удивление отвечает очень быстро.

За чем пришла на курс

Очень люблю Flat-дизайн, красивые минималистичные сайты — слабость моя. Поэтому давно мечтала создавать такие же, но знакомые программисты говорили, что года 2 нужно, чтоб научиться. Поэтому верстка так и оставалась у меня на уровне фантазий.

Результат

Базовый курс освоен. Начало положено. Теперь можно самостоятельно практиковаться и углублять свои знания! Теперь, закончив курс, я чувствую себя почти гениальной))

Отзыв

В ленте ВК наткнулась на набор группы на курс, зашла ради любопытства. Отзывы реальных учеников и цена были приятными, поэтому я загорелась и решила, что ничего не теряю.)

Смущала 7-часовая разница во времени. (я из Вадивостока) Но Юрий меня успокоил. Каждый вебинар я смотрела в записи, в удобное для себя время).

Тема для меня новая. Сложная. Информации много! Иногда даже мозг закипал, и я чувствовала себя глупой телкой (не без этого)) Но процесс обучения грамотно выстроен и интересен! Очень многое зависит от преподавателя! Юра классный преподаватель! Если у вас реальный интерес к созданию сайтов, то очень рекомендую, не пожалеете!

За чем пришел на курс

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

Результат

На этом курсе изучили все основные темы по верстке, а также затронули и даже попробовали более углубленные штуки, такие как PHP, JS, Ajax, WordPress.

Отзыв

Очень понравился сам процесс обучения, информации было много, но так как вебинары проходили не каждый день, было время всю ее «переварить» и усвоить.

Еще понравилась система учета домашних заданий с отметками за выполнение, что заставляло делать все задания во время и не отставать от однокурсников. Всем советую пройти этот курс, не пожалеете. Спасибо Юрию за курс, все очень профессионально сделано и организовано.

За чем пришел на курс

Устал от офисной работы и решил, что нужно менять профессию, чтобы делать работу из любого места. Решил, что стану фронт-эндером. В первую очередь, занялся азами — html/css. Зарегался на html-academy, стал проходить курс, но чем дальше уходил, тем больше понимал, что что-то не так. Я знал теги, знал свойства и атрибуты, понимал логику разметки, но что с этим знанием делать? Я будто научился ездить на велосипеде, ни разу на него не сев. Вычитал, что удобнее всего материал усваивается за личным проектом, но не знал, как вообще создать сайт. Мне было необходимо обучение на практике.

Результат

Я получил гораздо больше, чем рассчитывал, и ещё до окончания курса уже отбил его стоимость.

Сейчас я пока не работаю в сфере, хоть и выполнил пару маленьких заказов — перепрохожу курс заново, чтобы быть точно уверенным в своей компетентности. Так же здорово, что все учебные материалы со мной останутся, систематично разложенные по папкам, со всеми примерами и ответами.

Отзыв

Планирую идти дальше, углубляться в FE, после перепрохождения курса вернуться к изучению JS и его фреймворков, немного больше узнать о PHP(который, кстати, немного тоже рассматривается в рамках этого курса), Python, и софте для разработки UI/UX, вроде Adobe xd.

Цена курса невысокая, длительность — что надо, и самое главное: охватываются все необходимые темы. Очень хороший курс. Материал подаётся плавно, местами с рывками вперёд, но эти рывки необходимы, это своеобразные барьеры, которые хочется преодолеть, чтобы подсмотреть, что ждёт дальше. Курс рекомендую! Спасибо Юрию за составление такой программы обучения, профессионализм и отзывчивость!

За чем пришла на курс

Мне приходится часто ездить, и я задумалась о смене профессии на фриланс.

Результат

Теперь я разбираюсь в предмете и моя цель — накопить опыт работы в новой сфере и углублять знания!

Отзыв

С момента оформления и до начала занятий у вас будет время, чтобы ознакомиться с видео с вводным материалом и о том, как подготовить свой компьютер к работе, так что уже будет понимание самых основ. Курс очень насыщенный (см. программу на сайте), материал подается интересно и в тоже время доступно, очень много инфо и для самостоятельного развития.

Курс интересный, позволяет за короткое время и низкую стоимость освоить новую профессию, материала много и в разной форме, преподаватель и куратор курса всегда на связи и помогут, да и вообще все на курсе веселые и отзывчивые! =

За чем пришел на курс

Сам процесс онлайн обучения считал не очень привлекательным, потому что при выборе курсов опираться можно лишь на шаблонное описание программы обучения и на сайт автора. Выбирал несколько недель, кое-где оставлял заявки, но везде отказывался по разным причинам. И тут наткнулся на симпатичный сайт Юрия. Оставил заявку, списался в контакте, появились проблемы по времени, так как середина учёбы совпадала с моим отъездом, на что Юрий предложил очень увесистые доводы остаться.

Результат

Получил знания, которые пригодятся на практике.

Отзыв

Уроки построены логично, есть обратная связь со слушателями, затрагиваются моменты, которые пригодятся в будущем. В общем уверенно могу сказать, что оно того стоит. Скайп-чат с группой и пройденный материал останется у вас, и это вообще джек-пот! Юрию желаю успехов и плюсиков в чат!

За чем пришел на курс

Освоить профессию HTML-верстальщика.

Результат

После того как прошёл курс «Верстка сайтов HTML5/CSS3» я получил огромное количество полезного материала поданного в интересной форме, который пригодится в карьере веб-разработчика.

Отзыв

Благодаря тому, что автор имеет отличные навыки преподавателя, каждый урок был увлекательный и лёгкий для понимания. Юрий всегда отвечал на мои вопросы и помогал разобраться с любыми проблемами. Грамотно построенные домашние задания, при выполнении которых я укреплял знания полученные на вебинарах. Данный курс включал в себя очень актуальные темы, которые ценятся работодателями в сфере веб-разработки. Огромное спасибо Юрию за данный курс, так как это отличная возможность получить актуальную и востребованную профессию.

За чем пришла на курс

Я имела представление о HTML и CSS из различных бесплатных ресурсов, но верстать что-то более-менее серьезное не могла.

Результат

На курсе мы продвигались от простого к сложному, и это помогло мне упорядочить имеющиеся знания и приобрести новые, а также получить практический опыт верстки. Теперь я смело могу взяться за вёрстку не очень сложного шаблона с элементами Java script, и самое главное — я знаю, куда мне двигаться дальше, чтобы оттачивать свои знания.

Отзыв

Для меня данный курс оказался очень полезным и эффективным. На практике мы сверстали несколько работ, причем все непонятные моменты Юрий разъяснял очень подробно в индивидуальном порядке. Ценно и то, что помимо HTML и CSS мы рассмотрели полезные инструменты разработчика, о которых я и не догадывалась. От души благодарна Юрию за его труд, желаю творческих успехов, и надеюсь на дальнейшее общение.

За чем пришла на курс

Пришла на курс с нулевыми знаниями в области веб-дизайна, чтобы начать самой создавать веб странички грамотно и интересно.

Результат

Осталась с приятными впечатлениями, копилочкой идей, и с багажом знаний и навыков.

Отзыв

Очень благодарна Юрию за терпение, за подробные, конструктивные разъяснения. Курс великолепен и максимально наполнен всем необходимым. Конечно, курс прошёл в интенсивном режиме, зато очень эффективно. Так что всем желающим познать тайны HTML и CSS очень рекомендую. Говорят, время — деньги, потому не стоит растрачивать время на поиски тьюториалов — всё есть в одном курсе. Еще раз спасибо нашему учителю

За чем пришел на курс

Начинал курс с нулевыми знаниями в область HTML, CSS да и вообще всего, что касается разработки веб-страниц, Landing page и.т.д. На работе возникла потребность в освоение нашей фирмы интернета. Подумали , посовещались, и решили, что-то найти, подходящее для изучения

Результат

Благодаря такому интенсиву очень хорошо произошло запоминание принципов и алгоритмов верстки сайтов.

Отзыв

Главные фишки в курсе:
1. Его продуманная последовательность от самых основ, до библиотек, фишек.
2. Интенсивность курса, несмотря на очень большой объем работы.

Хотел бы порекомендовать этот курс всем — абсолютно всем — от начинающих до квалифицированных специалистов.

За чем пришел на курс

Начинал изучать верстку сам. Прошёл почти до конца онлайн тренажёр на codecademy, смотрел тюториалы на YouTube, по частицам собрал некоторые знания. Но как то все в перемешку было, хотя думал что уже достаточно много знаю. В теории вроде нормально разбирался, а на практике не очень получалось.

Результат

Курс помог структурировать уже имеющиеся знания + приобрести новые навыки. Главное понял и немного изучил сам процесс верстки.

Отзыв

Я доволен курсом и преподавателем. Хочется отметить, что Юрий всегда готов помочь, то есть в «нерабочее время».

За чем пришла на курс

Хотела изучать HTML и CSS, но не знала, с чего начать, вернее, с какой стороны подойти к такому «зверю».

Результат

Курс был отличным стартом и дал тот объем знаний, который теперь позволяет мне УВЕРЕННО погружаться в более глубокое изучение HTML и CSS. Теперь меня не пугают никакие title, div, webkit, ul, meta, bootstrap, font-weight, padding и другие неведанные мне ранее звери)))

Отзыв

Если вы новичок, то данный курс вам очень подойдет. Вы сразу окунетесь в самую суть процесса и быстро увидите результаты своих стараний — не сложные рабочие странички на вашем же сайте. Но это не всё, в процессе обучения задания будут усложняться, и углубляться, и в конечном итоге вы будете в силах создавать свои полноценные рабочие страницы с оригинальным дизайном и некоторыми забавными «примочками». Спасибо Юрию за терпение и внимание к участникам курса!

За чем пришел на курс

Нужны были чёткие знания, для начала работы в html.

Результат

Прочувствовал на своей шкуре, что такое html, css, photoshop и прочее добро. Познакомился с кучей технологий, которые облегчают жизнь и гарантируют адаптивность верстки для различных браузеров и устройств. Вообще по окончанию вышел после курса с высоко поднятой головой.

Отзыв

Курс очень интенсивный информации много, запомнить трудно все сразу, поэтому ни в коем случае нельзя халтурить, и выполнять домашние задания нужно в срок, нельзя отставать ни в коем случае. Курс отлично структурирован.

За чем пришла на курс

Были нужны знания по веб-разработке. Нужна была практика (очень много практики) + ментор, который бы направил на нужную информацию.

Результат

Разобралась в трудных моментах с версткой и теперь, не используя туториалы и уроки, могу спокойно верстать страницы используя фрэймеворки и без них. Наконец нашла человека, который бы дал хороший стартовый пинок для работы в верстке =)).

Отзыв

Этот курс хорош для совсем начинающих и для тех кто не первый раз видит HTML и CSS. Хотелось бы еще раз сказать большое спасибо за терпение и время которое Юрий потратил на объяснения одних и тех же вещей помногу раз. Помогло (и все еще помогает) это все-таки.

За чем пришла на курс

Усовершенствовать свои знания.

Результат

Знания верстки у меня уже были, но благодаря курсу я смогла узнать все тонкости, разобраться в деталях, более подробно изучить все нюансы. Сейчас я уже изучаю php и интеграцию готовой верстки на bitrix, но когда у меня возникают вопросы по верстке, я без сомнения обращаюсь к Юре, он всегда поможет и подскажет, за что я очень благодарна.

Отзыв

Хочу порекомендовать этот курс всем, кто хочет учить html и css с нуля, а также тем, кто хочет усовершенствовать свои знания.

Отмечу, что Юра отличный учитель, он очень доступно и понятно объясняет. Мне понравилось, что он очень правильно продумал структуру курса, благодаря чему курс очень легок в изучении и очень понятен. Детальное объяснение всех ошибок в д/з и видеозапись, это очень полезно и удобно. Записывайтесь на курс, не сомневайтесь, учитесь и все у Вас получится!

За чем пришел на курс

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

Результат

Сейчас после прохождения курса я имею все необходимое для того чтобы сверстать почти любую страничку, дело остаётся только в практике. Чем больше практики, тем лучше закрепляются обретенные знания.

Отзыв

Начали мы учить все с азов, и уже с первого занятия начали применять полученные знания на практике. С каждым занятием получали все больше новых знаний, все больше новых источников с сопутствующими материалами. В начале изучения у меня было около двух закладок по изучению данной профессии, сейчас у меня их более 48.

За время курса было сверстано несколько страничек, каждая из которых предоставляла возможность закрепить пройдённый материал. С первого же занятия нам прививались правильные нормы верстки: семантичность страниц, читабельность кода, и многое другое. Был рассмотрен ряд сопутствующих программ, типа Photoshop , Brackets и Sublime.

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

За чем пришел на курс

Хотел начать изучать html. До курса мои знания были на уровне «есть html, в нем есть какие-то теги, и из них получается страничка».

Результат

Сейчас, после прохождения курса, я могу сверстать практически любую страничку, при этом она будет семантична, и адекватно выглядеть на любом устройстве. Конечно, еще можно и нужно подучить всякие вещи, типа js, php, wordpress (если конечно ориентироваться на front-end разработчика широкого уровня), но благодаря курсу, и в частности Юрию, я получил достаточно мощный старт в знаниях (html5, css3, гриды, медиа-запросы, адаптивность, немного photoshop’а, и много сопутствующего), особенно в практике.

Отзыв

Прошел курс, и остался очень доволен. На занятиях, после прохождения базовых вещей, в качестве домашних задания, мы начали верстать странички по шаблонам, при том, шаблоны достаточно насыщенные — блоки, картинки, формы, меню. Сложно, сначала непонятно, но интересно. Опять же, спасибо Юрию: на любой вопрос, который возникал в процессе урока (как работает та или иная технология, или сервис), или в процессе выполнения домашнего задания, (почему какой-то блок, или меню не хочет выглядеть так, как их накодили), всегда был понятный подробный ответ, «объяснение на пальцах», почему именно так. В общем лично я остался доволен обучением, ни разу не пожалел вложенные деньги, все-таки инвестиции в себя, в свое образование и будущее.

За чем пришла на курс

Хотела начать изучение html и css. Пришла с практически нулевыми знаниями.

Результат

Получила знание и понимание, как сверстать страницу и основные моменты по созданию сайтов.

Отзыв

Понравился тренер, Юрий. Я не понимаю, откуда у него столько свободного времени?! Он был доступен практически в любой час, готов был ответить на вопросы, и в режиме он-лайн разобрать проблему — даже если это неурочное время! Рассказывал очень понятно, системно, не возникало ощущения «галопом по Европе». Все изучали, пока не будет понятно, и дз обязательно нужно было сделать и сдать. Если хотите начать изучение html и css, то советую этот курс!

Обучение в закрытой группе с наставником. Доведение до результата.

Стандарт: 04 Ноября — 28 Декабря (2 месяца)
Премиум: 04 Ноября — 31 Января (3 месяца)

Я ♥ HTML Academy

HTML Academy учит верстать крутые сайты. Там есть бесплатные курсы по HTML и CSS для начинающих и продвинутые курсы, доступные по подписке. Есть курсы вводные, курс про формы, про таблицы, про анимации.

Базовый интенсив по вёрстке

Если уже прошли курсы или если у вас есть базовые знания, но не хватает практического опыта — пройдите интенсив. За месяц вы научитесь создавать с нуля целый сайт. Интенсив состоит из онлайн-лекций, интерактивных заданий и практики, практики, практики. Вам будет помогать наставник — этакий супермен, который читает ваш код, указывает на ошибки и подсказывает, как сделать правильно.

Продвинутый интенсив

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

Базовый интенсив по Javascript

Вы научитесь программировать. Перестанете спать по ночам. Станете настоящим фронтэнд разработчиком. Научитесь делать интерактивные сайты. Вырастете из падавана в джедаи. Записывайтесь.

Промокод на скидку в HTML Academy

Используйте промо-код, чтобы получить скидку на интенсив. Просто введите его при оплате. Этот код подойдёт для любого интенсива. Код:

Я наставник

Учу студентов решать проблемы. Мотивирую кодить. Не принимаю халтуру. Заставляю переписывать код, пока он не будет прекрасен. Веду продвинутый по вёрстке и оба интенсива по JavaScript.

Если хотите попасть ко мне, напишите заранее на isqua@isqua.ru. Тест на внимательность: в теме письма укажите интенсив, на который вы хотите, например «Базовый JavaScript #394». В письме укажите ссылку на ваш профиль в Академии. Расскажите, зачем вам интенсив. Какие у вас планы во фронтенде на три месяца, полгода, год? Как интенсив вам поможет их достичь?

Пока у меня перерыв, не беру новых студентов.

Инструменты | «HTML Academy» – интерактивные онлайн-курсы по изучению вёрстки

Ека­те­ри­на Изме­стье­ва

Всего материалов: 711

«HTML Academy» – интерактивные онлайн-курсы по изучению вёрстки

Е.И.: Рас­ска­жи­те, как появи­лась идея создать такой про­ект?

А.П.: Я пре­по­да­вал в ИТМО – у меня был факуль­та­тив по инфор­ма­ци­он­ным тех­но­ло­ги­ям. Мне ска­за­ли: «Пре­по­да­вай, что хочешь». Я решил, что буду рас­ска­зы­вать на факуль­та­ти­ве про верст­ку. Взял макет, кото­рый был свер­стан когда-то, но был хоро­ший. И вот неко­то­рые ребя­та ока­за­лись хит­ры­ми – они по маке­ту нагуг­ли­ли уже гото­вый сайт и его исполь­зо­ва­ли. Понят­но, что кто-то исполь­зо­вал про­сто как базу, кто-то решил посмот­реть, как оно сде­ла­но, но полу­чи­лось, что сами они ниче­му не научи­лись, пото­му что про­сто попра­ви­ли чужой код.

Как пока­зать гото­вый макет, про­де­мон­стри­ро­вать как он себя ведет, но не откры­вать при этом код? Такая была задум­ка в нача­ле – как пока­зать пове­де­ние сай­та, не пока­зы­вая при этом его код.

Полу­ча­ет­ся так: учил-учил сту­ден­тов, натолк­нул­ся на про­бле­му, при­ду­мал реше­ние, а потом из это­го реше­ния вырос целый про­ект.

Е.И.: А дав­но вы нача­ли зани­мать­ся про­ек­том?

А.П.: В нача­ле 2011 я его при­ду­мал. Тогда я учил­ся в аспи­ран­ту­ре, писал ста­тьи на кон­фе­рен­ции. Уже в кон­це 2011 я нашел тех­но­ло­гии, кото­рые мож­но было исполь­зо­вать, что­бы реа­ли­зо­вать про­ект, и что­бы это не было очень тру­до­ем­ко. Пото­му что еще в нача­ла 2011 было не очень хоро­шо с тех­но­ло­ги­я­ми – не было редак­то­ров кода, не было бра­у­зер­ных движ­ков. Поэто­му я ждал, поти­хонь­ку искал, и вот в кон­це 2011 года нашел их. И уже мож­но было создать пер­вый про­то­тип и начать что-то делать.

С 2012 года, соб­ствен­но, про­ект и начал­ся. Пря­мо с янва­ря.

Е.И.: А какие инстру­мен­ты вы исполь­зо­ва­ли для созда­ния пер­во­го про­то­ти­па?

А.П.: Редак­тор CodeMirror назы­вал­ся, он и сей­час суще­ству­ет. Дви­жок был WebKit, а какая биб­лио­те­ка я сей­час уже не пом­ню. В общем, шту­ка, кото­рая гене­рит из кода кар­тин­ку, нуж­на была.

Е.И.: Вы, полу­ча­ет­ся, зани­ма­лись про­ек­том один?

А.П.: По боль­шей части, да. Т.е. раз­ра­бот­ка, созда­ние кур­сов – я зани­мал­ся этим сам. Мне помо­гал Алек­сей Симо­нен­ко, тех­ни­че­ский дирек­тор Serenity. Я дома что-то делал, в сту­дии что-то делал – Алек­сей мне под­ска­зы­вал и рас­ска­зы­вал, если я чего-то не знал. Еще он смот­рел кур­сы – про­ве­рял кон­тент на адек­ват­ность, что­бы ниче­го не забы­ли и не было ника­ких оши­бок. Т.е. был таким мен­то­ром.

Е.И.: И автор кур­сов – тоже вы?

А.П.: Я, пото­му что было осо­бо неко­му. Была, прав­да, попыт­ка при­влечь к это­му моих сту­ден­тов-долж­ни­ков. Я им ска­зал: «Ребя­та, пиши­те кур­сы, а я вам постав­лю бал­лы». Они кур­сов 10–12 созда­ли, но они полу­чи­лись такие страш­ные и непо­нят­ные, что в ито­ге из них как-то исполь­зо­вать полу­чи­лось толь­ко один, и то я его очень силь­но пере­де­лал.

Е.И.: А у вас не было жела­ния при­влечь в коман­ду раз­ра­бот­чи­ков или людей, кото­рые помог­ли бы с состав­ле­ни­ем кур­сов?

А.П.: Сей­час этим и зани­ма­юсь. День­ги появи­лись, мож­но людей при­вле­кать. Пока про­ект день­ги не зара­ба­ты­вал, смыс­ла не было кого-то при­вле­кать, пото­му что было понят­но, что людям нуж­но пла­тить и пла­тить доста­точ­но хоро­шо. Сей­час уже 2–3 чело­ве­ка есть, с кото­ры­ми я посто­ян­но сотруд­ни­чаю, – они кур­сы дела­ют.

Е.И.: А какое у вас соот­но­ше­ние плат­ных и бес­плат­ных кур­сов?

А.П.: Сей­час 2 плат­ных и 14 бес­плат­ных. У плат­ных кур­сов плат­ность такая, услов­ная, – 100 руб­лей в месяц.

Е.И.: На кого рас­счи­та­ны кур­сы? Кто ваша ауди­то­рия?

А.П.: Школь­ни­ки стар­ших клас­сов, сту­ден­ты тех­ни­че­ских вузов и про­сто те, кому инте­рес­на или нуж­на верст­ка. Когда у нас было 1 500 под­пис­чи­ков, мы про­ве­ли опрос на нашей стра­ни­це Вкон­так­те, и полу­чи­лось, что школь­ни­ков – 10%, сту­ден­тов – 30%, а все осталь­ные – это ни то, ни то. Т.е. 60% – не сту­ден­ты. Я поче­му-то думал, что боль­ше сту­ден­тов будет. Им боль­ше все­го то нуж­но, их застав­ля­ют это учить, вро­де как. А ока­за­лось, что все по-дру­го­му.

Е.И.: Были ли какие-то плат­фор­мы онлайн-обра­зо­ва­ния, на кото­рые вы ори­ен­ти­ро­ва­лись?

А.П.: Да нет, не осо­бо. В кон­це 2011 года появи­лась Codecademy, у них инте­рес­ная меха­ни­ка – они малень­ки­ми шаж­ка­ми все дела­ют. Мне она понра­ви­лась, я частич­но ее при­ме­нил. Но у них была рабо­та с кон­со­лью – ты в кон­со­ли что-то писал. У нас изна­чаль­но интер­фейс был немнож­ко дру­гой. Я делал что-то боль­ше похо­жее на кве­сты в Warcraft – ты что-то дела­ешь, у тебя под­све­чи­ва­ют­ся на экране пунк­ты зада­ний, что ты выпол­нил.

Я осо­бо не смот­рел по сто­ро­нам даже, про­сто делал, что нра­ви­лось. Вот Codecademy, но у них в самом нача­ле дру­гой фор­мат был – толь­ко с кон­со­лью рабо­та. На Coursera был видео­фор­мат, это тоже не наше. Более-менее похо­жи были так назы­ва­е­мые «песоч­ни­цы HTML/CSS», кото­рые тогда ста­ли появ­лять­ся. Напри­мер, JSFiddle – там в онлайне мож­но было писать код, сохра­нять его и смот­реть, что полу­ча­ет­ся. Вот боль­ше я, навер­ное, на эти «песоч­ни­цы» ори­ен­ти­ро­вал­ся, на сам прин­цип – ты пишешь код и он в режи­ме реаль­но­го вре­ме­ни отоб­ра­жа­ет­ся рядом. Но мы к это­му еще доба­ви­ли состав­ля­ю­щую, кото­рая дает зада­ния и про­ве­ря­ет их.

E.И.: А Вы сами когда-нибудь про­хо­ди­ли онлайн-кур­сы?

А.П.: Я в 2003 начал обу­чать­ся, когда таких кур­сов еще не было, Интер­нет-то не у всех был. По книж­кам и по ста­тьям учил­ся.

Е.И.: С каки­ми слож­но­стя­ми Вы столк­ну­лись во вре­мя созда­ния про­ек­та?

А.П.: Вна­ча­ле, конеч­но, были тех­ни­че­ские слож­но­сти – про­сто создать плат­фор­му, кото­рая зара­бо­та­ет и не упа­дет. Если мы дела­ем сер­вис в Интер­не­те – при­дет туда 50 чело­век, и все. Поэто­му были слож­но­сти с тем, как это заста­вить вооб­ще рабо­тать. Вот так это все выгля­де­ло в нача­ле:

Пер­вый вари­ант инте­ре­фей­са HTML Academy

Все это обнов­ля­лось в режи­ме реаль­но­го вре­ме­ни, очень силь­но тор­мо­зи­ло, но зато было инте­рес­но. Потом мы пере­де­ла­ли на суще­ству­ю­щий интер­фейс. С тех пор он и не менял­ся.

Потом еще была про­бле­ма – кур­сы писать. Пото­му что это вещь очень тру­до­ем­кая.

Е.И.: Как вы пла­ни­ру­е­те раз­ви­вать про­ект даль­ше?

А.П.: Вооб­ще, идея гло­баль­ная была, как мета­фо­ра, в том, что мы стро­им кон­вей­ер по под­го­тов­ке вер­сталь­щи­ков. Такой хоро­ший, широ­кий, мощ­ный кон­вей­ер. Потом кон­вей­ер дела­ем шире и гото­вим уже не толь­ко вер­сталь­щи­ков, но и front-end раз­ра­бот­чи­ков, про­грам­ми­стов. В общем, дела­ем кон­вей­ер по под­го­тов­ке тех­на­рей, кото­рый достав­ля­ет нович­ка до спе­ци­а­ли­ста, с каки­ми-то уже нара­бо­тан­ны­ми навы­ка­ми. И не про­сто учим, но и помо­га­ем с тру­до­устрой­ством. Т.е. вот такая гло­баль­ная кон­цеп­ция про­ек­та.

Е.И.: Сей­час вы гото­ви­те вер­сталь­щи­ков с нуля до како­го уров­ня?

А.П.: До уров­ня, когда он уже сме­ло может идти тру­до­устра­и­вать­ся. Я сам мно­го лет вер­сталь­щи­ком рабо­тал и собе­се­до­вал мно­гих. Ино­гда мы вер­сталь­щи­ка иска­ли по пол­го­да. Пото­му что люди при­хо­дят, но базо­вых вещей каких-то не зна­ют и про­бле­мы решать не уме­ют.

Поэто­му зада­ча – под­го­то­вить нович­ка хотя бы до уров­ня вер­сталь­щи­ка-ста­же­ра, кото­ро­му мож­но давать какие-то про­стые про­ек­ты и пла­тить день­ги.

Сей­час вот после интен­си­ва уро­вень доста­точ­но хоро­ший полу­ча­ет­ся.

Е.И.: Рас­ска­жи­те про интен­сив.

А.П.: Интен­сив – это фор­мат, кото­рый доста­точ­но орга­нич­но вырос из теку­щих кур­сов. Про­сто сей­час, что­бы под­го­то­вить хоро­ше­го спе­ци­а­ли­ста, кур­сов все-таки мало – нуж­но боль­ше кур­сов и боль­ше зада­ний. Это дол­го­сроч­ная пер­спек­ти­ва, мы к ней будем стре­мить­ся, а пока вот запу­сти­ли фор­мат интен­си­ва.

Он отли­ча­ет­ся от кур­сов тем, что име­ет сро­ки нача­ла и кон­ца. Во-вто­рых, там есть тео­рия и есть пре­по­да­ва­тель, кото­рый рас­ска­зы­ва­ет боль­ше, чем есть в малень­ких кусоч­ках тек­ста в кур­сах. В‑третьих, все обу­че­ние идет с настав­ни­ком, и это, навер­ное, самая важ­ная состав­ля­ю­щая интен­си­ва. Т.е. на месяц к каж­до­му чело­ве­ку при­креп­ля­ет­ся настав­ник, кото­рый явля­ет­ся опыт­ным вер­сталь­щи­ком. Фор­мат интен­си­ва боль­ше похож на обыч­ный оффлай­но­вый курс, но отли­чие в том, что мы рабо­та­ем пол­но­стью в онлайне.

Гло­баль­ная зада­ча в кон­це интен­си­ва – свер­стать макет хоро­ше­го уров­ня. Маке­ты спе­ци­аль­но зака­зы­ва­ли у дизай­не­ров – они не очень слож­ные, но они не при­ми­тив­ные. Вот к это­му зада­ча интен­си­ва и сво­дит­ся. Выпуск­ни­ком счи­та­ет­ся тот, кто успеш­но все выпол­нил.

Е.И.: Мно­го тех, кто все успеш­но выпол­нил?

А.П.: 36 участ­ни­ков в пер­вом интен­си­ве было, 22 закон­чи­ло.

Е.И.: А в целом по про­ек­ту у вас есть ста­ти­сти­ка – сколь­ко чело­век нача­ли кур­сы, сколь­ко закон­чи­ли?

А.П.: Всю ста­ти­сти­ку на теку­щий момент мож­но посмот­реть на этой стра­нич­ке. Тех, кто начал что-то делать – 12 200, кто хотя бы один курс про­шел – 7 300. Боль­ше 2 000 чело­век выпол­ни­ли 100 зада­ний, это уже доста­точ­но серьез­но. Самые суро­вые, навер­ное, – это те, у кого 20 испы­та­ний. 20 испы­та­ний – это кур­сов 10. Вот таких людей почти 500.

Сей­час, кста­ти, мы гото­вим сов­мест­ный с ИТМО про­ект. Мы запус­ка­ем на их плат­фор­ме свой базо­вый курс. Они свою MOOC-плат­фор­му дела­ют, и один из стар­то­вых кур­сов будет нашим, и ИТМО будет выда­вать сер­ти­фи­ка­ты, про­шед­шим эти кур­сы. Тем, кто про­шел, это в пер­спек­ти­ве будет засчи­ты­вать­ся либо при поступ­ле­нии, либо, если это сту­дент ИТМО, то это может быть засчи­та­но в учеб­ном про­цес­се.

Е.И.: Что вы дума­е­те о буду­щем онлайн-обра­зо­ва­ния?

А.П.: Думаю, что будет все раз­ви­вать­ся, будет боль­ше учить­ся людей. Наде­юсь, что ста­нет все более фор­маль­ным со вре­ме­нем – кур­сы будут в вузах засчи­ты­вать, при­зна­вать онлайн-обра­зо­ва­ние на госу­дар­ствен­ном уровне и дипло­мы выда­вать.

Тут мно­го тон­ко­стей есть, конеч­но. Кто курс про­шел? Кто тест сда­вал? Ты или не ты? Види­мо, будет какая-нибудь гибрид­ная схе­ма, когда ты основ­ную часть обу­че­ния про­хо­дишь онлайн, но в вуз при­ез­жа­ешь сда­вать экза­ме­ны. Т.е. под­твер­ждать, что ты дей­стви­тель­но чему-то научил­ся. Будет чем-то похо­же на заоч­ное обу­че­ние, и я думаю, это будет самым логич­ным, к чему все при­дет. Либо как-то очень хит­ро будут под­твер­ждать в онлайне, напри­мер, собе­се­до­ва­ни­ем по Skype, что­бы не было воз­мож­но­сти как-то отвер­теть­ся и вме­сто себя кого-то под­ста­вить. Вот так.

HTML Academy — отличные онлайн-курсы по HTML и CSS

Обучение веб-разработке — тема достаточно обширная, и начинать ее нужно с самых азов — HTML и CSS. Сейчас в интернете существует масса разных курсов, отсканированных книг и самоучителей для получения знаний. Однако ничего из этого не будет изучать также интересно как проект HTML Academy. Этот полезный ресурс поможет вам качественно и в короткие сроки изучить основы веб-разработки / верстки.

Ресурс сделан в формате интернет школы, с дистанционным обучением. Обучающие материалы сайта будут очень полезны для начинающих веб-разработчиков и верстальщиков и тех, кто «уже что-то знает». Весь обучающий материал поделен на курсы, которые расположены в логической последовательности.

В процессе прохождения уроков возможно двустороннее общение с другими учениками и учителями посредством оставления комментариев. После прохождения каждого урока выполняется автопроверка качества выполнения задания.

Зарегистрироваться на сайте можно как обычным способом, путем заполнения регистрационной формы, так и посредством входа через свою страничку Вконтакте или Facebook. Перейдя в личный кабинет можно видеть количество пройденных уроков и полноту их прохождения.

Большим плюсом данного сайта являются практические занятия на всех этапах обучения. Каждая порция нового материала постоянно подкрепляется практикой. Периодически надо проходить промежуточные испытания по всему изученному материалу. Это способствует качественному и быстрому усвоению уроков. Вот как выглядит один из обучающих уроков.

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

Все уроки по html и css разделены на два больших раздела «Базовые курсы» и «Продвинутые курсы». Раздел «Базовые курсы» полностью бесплатен. Пройдя его, можно получить достаточно знаний для создания веб-сайтов начального уровня.

Раздел «Продвинутые курсы» частично платный, и содержит более обширные материалы по HTML и CSS. Чтобы иметь полный доступ к нему, нужно оформить платную подписку. Также после оформления подписки Вы будите иметь доступ ко всем самым новым урокам. Стоимость подписки — 300р в месяц / 2700р в год.

Также можно записаться на так называемый «Интенсив». Это онлайновый обучающий курс профессионального уровня, который проходит посредством проведения живых лекций-вебинаров в реальном времени. Длится такой курс один месяц, состоит из 8 разделов и включает в себя персональные консультации, методические материалы. Отдельный форум и т.д. После его прохождения каждый получает подтверждающий сертификат.

В общем сервис HTML Academy отлично подойдет всем тем, кто хочет изучить основы HTML и CSS. Для базового ознакомления, в принципе, достаточно бесплатных курсов. Если же вы решите серьезно профессионально заниматься версткой, то можете смело оформлять подписку на «Продвинутые курсы» или пройти «Интенсивное обучение».

HTML Academy | Интенсивный онлайн-курс «Базовый HTML и CSS» (2020)

deadBoy

Вводная лекция про роль и место верстальщика в мире веб-технологий.

1. Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter?
—IP-адрес, сервер и веб-сервер, «виртуалхосты».
—Доменные имена, URL-aдреса и система DNS.
—Загрузка и «сборка» веб-страницы, TCP/IP, HTTP.
—Приёмы оптимизации веб-страниц.

2. Инструменты веб-разработчика и рабочий процесс на интенсиве.
—Системы контроля версий. Git и GitHub.
—Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
—Немного о браузерах, браузерных движках и различиях между ними.

Создадим HTML-разметку страниц учебного и личного проектов. Попрактикуемся использовать подходящие теги, задавать имена классов, оценивать сложность разметки.

1. Введение в HTML и CSS.
—Синтаксис HTML.
—Структура простейшего HTML-документа.
—Синтаксис CSS. Базовые CSS-селекторы.
—Наследование, каскадность и приоритеты в CSS.

2. Качественная разметка и стили кодирования.
—Простая, понятная, читабельная и логичная разметка: примеры и антипримеры.
—Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие.
—Модульность разметки или использование «пространств имён».
—Когда использовать , и

?
—Зачем нужен стиль кодирования? Обзор популярных стайлгайдов.

3. Создаём разметку главной страницы учебного проекта.

3. Фотошоп для верстальщика

Разберём всё необходимое для работы верстальщика в фотошопе. Подготовим графику для проектов.

1. Типовые задачи верстальщика в фотошопе.
—Настройка интерфейса фотошопа.
—Работа со слоями, типы слоёв.
—Получение параметров текста.
—Измерение размеров блоков, отступов, получение информации о цвете.
—Получение параметров сложных декоративных эффектов: тени и прочее.
—Экспорт графики, работа с повторяющимися паттернами.

2. Обзор форматов графики в вебе.
—PNG, JPEG, SVG, GIF.
—Как выбрать подходящий формат?

3. Разбор графических макетов проектов.

Разберёмся с блочной моделью документа. Создадим сетки страниц учебного и личного проектов.

1. Поток документа и блочная модель документа.
—Понятие сетки и потока документа.
—Блочные и строчные элементы и их особенности.
—Свойства блочной модели: размеры, рамки и отступы.
—Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.

2. Как управлять потоком и строить сетки?
—Свойство display. Управление типом элементов.
—Свойство float и его особенности.
—Построение сеток на «плавающих» элементах.
—Блочно-строчные элементы и их особенности, борьба с пробелами между блочно-строчными элементами.
—Построение сеток на блочно-строчных элементах.

3. Создаём сетку главной страницы учебного проекта, экспериментируем с «карточными» элементами интерфейса на блочно-строчных элементах.

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

1. Теория: введение во флексбоксы.
2. Практика: сетка Барбершопа на флексбоксах.

6. Декоративные элементы

Познакомимся с приёмами создания декоративных элементов. Завершим вёрстку главных страниц учебного и личного проектов.

1. Позиционирование.
—Относительное позиционирование.
—Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
—Фиксированное позиционирование.
—Управление порядком слоёв.

2. Другие важные приёмы.
—Псевдоэлементы.
—Спрайты.
—normalize.css.
—Подключение нестандартных шрифтов.

3. Завершаем вёрстку главной страницы учебного проекта.

7. Оформление контента

Завершим вёрстку внутренних страниц и подготовим проекты к публикации. Начнём готовиться к защите личного проекта.

1. Практикуемся в вёрстке элементов содержимого.
—Сверстаем текстовую страницу учебного проекта. Подготовим универсальные стили содержания, которые будут хорошо работать и при наполнении страницы из CMS.
—Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм.
—Подготовим свёрстанный учебный макет к публикации или передаче заказчику.

2. Разбираем типовые случаи переполнения и способы борьбы с ними.

3. Готовим проект к защите. Подробный разбор критериев защиты выпускных проектов.

8. Введение в JavaScript

Познакомимся с JavaScript, узнаем что такое Vanilla JS и оживим некоторые блоки вёрстки.

1. Язык программирования JavaScript.
—Роль программирования в жизни верстальщика.
—Что такое DOM и зачем нам объект document.
—Зачем нужен объект window.

2. Типовые случаи использования JavaScript.
—Как найти любой элемент на странице.
—Как реагировать на события, происходящие на странице.
—Как менять CSS-стили у элементов.
—Как использовать анимацию на странице.

3. Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта.

9. Прогрессивное улучшение

Узнаем, как использовать новые возможности HTML и CSS, не ломая работоспособность вёрстки.

1. Знакомство с прогрессивным улучшением и постепенной деградацией.
—«Житейские» примеры двух подходов.
—Этапы прогрессивного улучшения.
—Влияет ли прогрессивное улучшение на скорость и эффективность разработки?
—Как добавлять улучшения независимыми и цельными слоями.
—Прогрессивное улучшение и прокси-браузеры — друзья навсегда.

2. Вносим изменения в вёрстку учебного проекта с учётом прогрессивного улучшения.

3. Немного о минификации стилей и скриптов.

HTML Academy

Grow your team on GitHub

GitHub is home to over 40 million developers use GitHub to host and review code, manage projects, and build software together across more than 100 million repositories.

123041-nerds-26

0 Updated Nov 10, 2020

1173585-device-26

1 Updated Nov 10, 2020

1152219-gllacy-26

1 Updated Nov 10, 2020

1018805-technomart-26

0 Updated Nov 10, 2020

1170273-sedona-26

1 Updated Nov 9, 2020

225148-nerds-26

1 Updated Nov 8, 2020

1011917-sedona-26

0 Updated Nov 8, 2020

988453-technomart-26

0 Updated Nov 8, 2020

32787-nerds-26

0 Updated Nov 8, 2020

427803-sedona-26

0 Updated Nov 8, 2020

1157461-gllacy-26

1 Updated Nov 7, 2020

1155397-technomart-26

0 Updated Nov 7, 2020

629363-technomart-26

0 Updated Nov 7, 2020

560617-sedona-26

0 Updated Nov 6, 2020

662009-sedona-26

0 Updated Nov 6, 2020

1051277-sedona-26

0 Updated Nov 6, 2020

1142637-nerds-26

1 Updated Nov 6, 2020

238584-technomart-26

1 Updated Nov 6, 2020

1162111-nerds-26

1 Updated Nov 6, 2020

1146029-sedona-26

0 Updated Nov 6, 2020

207183-gllacy-26

0 Updated Nov 6, 2020

806807-sedona-26

0 Updated Nov 6, 2020

1173965-gllacy-26

0 Updated Nov 6, 2020

1026209-device-26

0 Updated Nov 6, 2020

1059081-technomart-26

0 Updated Nov 6, 2020

1104827-technomart-26

0 Updated Nov 6, 2020

693151-nerds-26

0 Updated Nov 6, 2020

1063013-device-26

0 Updated Nov 6, 2020

824325-sedona-26

0 Updated Nov 6, 2020

1114449-technomart-26

0 Updated Nov 6, 2020

Top languages

Most used topics

People

This organization has no public members. You must be a member to see who’s a part of this organization.

HTML Academy: Интерактивные онлайн-курсы по HTML и CSS

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

Интерфейс выглядит так:

Слева колонка с заданием и блоком хода выполнения. По центру редакторы HTML и CSS, в которых вы и вносите изменения. Справа результат.

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

Илон Маск рекомендует:  Gnu general public license
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL