Реклама

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

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

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

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

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

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

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

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

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

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

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

Реклама

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. А для тех, кто уже это всё освоил и хочет научиться верстать.

Реклама

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

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

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

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

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

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

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

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

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

Реклама

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

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

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

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

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

В HTML4 ответ на этот вопрос однозначный — внутрь ссылки можно вставлять только текстовые элементы и картинки. И для простых ситуаций с этим никаких проблем нет — если нам нужно, к примеру, сделать заголовок ссылкой, то <a> мы добавляем внутрь <h1>, но никак не наоборот.

<h1><a href="1.html">Заголовок</a></h1>

При этом надо помнить, что область ссылки ограничена размером текста. <h1> элемент блочный, он занимает всю ширину области просмотра, а ссылка строчная, её размер определяется размером содержимого. Так что щелчок не по тексту, а просто по этой строке ничего не даст. Для данного примера это может и не принципиально, а вот для какого-нибудь меню, где пункты меню визуально больше текста, важно. Поэтому мы модифицируем стиль ссылки, чтобы она занимала всё пространство внутри блока.

a {
  display: block;
}

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

Постепенно расширяю самоучитель HTML на сайте webref.ru, добавляя в него отсутствующие моменты. Не хватало таблиц — вот вам таблицы. Как и с остальными материалами самоучителя, это не просто текст, а ещё набор заданий для проверки знаний, плюс небольшая практика с автоматической проверкой кода. Наслаждайтесь!