Блог



Викторина по HTML

Влад Мержевич

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

Приложение содержит рекламу, её ненавистникам могу посоветовать перед запуском приложения отключить wi-fi, тогда баннер загружаться не будет и место занимать не станет.

Пишите, как вам вообще идея такого приложения, нужно оно или нет.

Интенсивный онлайн-курс «Продвинутый HTML и CSS»

Влад Мержевич

Реклама

18 сентября — 25 октября 2017

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

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

Стартуем 18 сентября, мест осталось совсем мало. Есть шанс успеть зарегистрироваться со скидкой по промокоду LEVELUP.

Сентябрьская акция в HTML Academy

Влад Мержевич

Реклама

В HTML Academy проходит акция — весь сентябрь онлайн-курс «Анимация» можно пройти бесплатно, а годовую подписку на курсы оформить со скидкой 39%.

Поволжская ИТ-конференция РИФ.Технологии. Всё, что вы хотели знать о технологиях и разработке

Влад Мержевич

30 сентября Ульяновск в третий раз соберёт самую массовую техническую конференцию Поволжья. В Ленинском Мемориале пройдёт российский форум по технологиям и разработке.

РИФ.Технологии — федеральный проект, целиком посвящённый интернет-отрасли и её развитию. Основные акценты этого года:

  • технологии для всех;
  • веб-разработка;
  • мобильная разработка;
  • проектирование и дизайн;
  • подрядчики и субподрядчики в ИТ;
  • цифровая экономика и Smart City.

Какие нужны фавиконки

Влад Мержевич

Скорее всего, вы знаете как подключить к сайту фавиконку: положить нужный файл в формате ICO в корень, и дело с концом. Это работало раньше, но как в современном вебе правильно и красиво подключить фавиконку?

Разбираемся с этой темой в новом выпуске шоу HTML Шорты.

float в теории и на практике

Влад Мержевич

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

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

Просмотр примеров

Влад Мержевич

В учебных курсах на сайте webref.ru сделал систему просмотра примеров. Теперь достаточно щёлкнуть по вкладке «Результат» и сразу можно увидеть, как этот код отображается в браузере. Со всеми картинками и стилями, конечно же.

Кроме того, у таких примеров в правом верхнем углу есть кнопка «JSFiddle», если на неё щёлкнуть, то пример целиком улетает в песочницу jsfiddle.net. А там его уже можно сохранять и править по своему желанию.

Новые задания

Влад Мержевич

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

Онлайн-интенсив «Базовый HTML и CSS»

Влад Мержевич

Реклама

7 августа стартует онлайн-интенсив «Базовый HTML и CSS».

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

Пять недель интенсивной работы: два живых вебинара в неделю, практические задания, поэтапная вёрстка двух макетов. Лекции ведут опытные преподаватели, а с практикой помогает личный наставник.

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

Интенсив длится пять недель, c 7 августа по 13 сентября. Количество мест ограничено.

Приятная скидка по промокоду HTMLBOOK (промокод действует до 6 августа 2017 года включительно). До встречи на интенсиве 7 августа!

Самостоятельная работа

Влад Мержевич

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

Эпичный курс «Великий Кексби»

Влад Мержевич

Реклама

Планируете сверстать свой первый интернет-магазин, но не знаете с чего начать? Тогда попробуйте сделать это вместе с инструктором Кексом в эпичном курсе от HTML Academy. Макет магазинчика аксессуаров для котов «The Great Keksby» вашими силами поэтапно будет превращаться в настоящую главную страницу сайта.

Теоретические знания HTML и CSS будут применяться на практике: разметка страницы, стилизация, работа с графикой, настройка Adobe Photoshop для вёрстки и построение сеток.

Разобраться как работают теги и свойства на реальном проекте не составит труда, изменяя значения и свойства в редакторе и видя результат сразу в минибраузере. Кроме этого, вас ждёт промежуточное испытание на разметку магазина кваса «Кваст», но уже без подсказок Кекса — серьёзная самостоятельная работа в текстовом редакторе.

Эпичный курс доступен по подписке, включает в себя 10 курсов и одно промежуточное испытание.

Позиционирование элементов

Влад Мержевич

Добавил новый учебный курс, посвящённый свойству position, в котором подробно рассказано о значениях static, relative, absolute, fixed и sticky, а также их комбинациям. Курс, как обычно, содержит вопросы для самопроверки, всякие задания, а в конце можно пройти проверочный тест. Впрочем, никто не запрещает пройти его и в начале.

Курс не для новичков, сперва изучите HTML и CSS. А для тех, кто уже это всё освоил и хочет научиться верстать.

Хотите начать 2018 год с новой профессией?

Влад Мержевич

Реклама

В августе стартует профессия Фронтенд-разработчик для тех, кто серьёзно настроен стать профессионалом в сжатые сроки и взять максимум от обучения!

Профессия «Фронтенд-разработчик» это:

  • три проекта в портфолио;
  • больше работы с наставниками;
  • дополнительное время для работы над проектами;
  • специальные тестовые задания на трудоустройство.

Программа будет идти с 7 августа по 27 декабря и состоит из трёх ступеней:

  • базовый HTML и CSS;
  • продвинутый HTML и CSS;
  • базовый JavaScript.

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

Структурные элементы страницы

Влад Мержевич

Набор структурных элементов HTML5 вызывает массу вопросов у начинающих верстальщиков. Чем отличается <article> и <section>? В каком случае надо писать <main>, а в каком <article>? Что ставить в <aside>? Можно ли добавлять <section> в <footer>? В общем, вместо того, чтобы облегчить работу и упростить код, эти элементы только запутали. Казалось бы, есть спецификация HTML, к ней и надо обращаться по спорным вопросам. Но беда в том, что тексты спецификации можно трактовать по разному, поэтому на форумах часто происходят словесные баталии, каждый отстаивает свою противоположную позицию.

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

  • «шапка»;
  • «подвал»;
  • навигация;
  • статья;
  • боковая панель;
  • раздел.

Изучаем флексбоксы — механизм раскладки современного верстальщика

Влад Мержевич

Реклама

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

Хотите узнать как работают флекбоксы и как их применять на практике? HTML Academy открывает доступ к платным курсам про флекбоксы для всех желающих до 28 июня 2017 года:

Пройдя эти онлайн-курсы, вы научитесь:

  • выравнивать и переносить флекс-элементы;
  • управлять их размерами и отступами;
  • применять коэффициенты растяжения и сжатия;
  • создавать «гибкие» раскладки и элементы интерфейса.

Страницы

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.