Блог



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

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

Для курса Позиционирование элементов добавил 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 года:

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

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

Можно ли оборачивать ссылкой блок?

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

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

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

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

a {
  display: block;
}

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

Таблицы

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

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

Бесплатные онлайн-курсы для изучения HTML и CSS

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

Реклама

Изучить с нуля HTML и CSS легко в HTML Academy.

Инструктор Кекс станет проводником в мир вёрстки, вместе вы научитесь:

  • создавать структуру документа и подключать стили и скрипты;
  • правильно размечать документ, используя теги;
  • использовать текстовые поля, выпадающие списки, кнопки и другие элементы форм;
  • оформлять вёрстку с помощью CSS;
  • позиционировать элементы и создавать декоративные эффекты.

19 бесплатных разделов, включающих 400 интерактивных заданий и более 27 испытаний. После прохождения вы сможете сверстать свой первый сайт.

Начните свой путь к профессии мечты сейчас.

Блочные и строчные элементы

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

На webref.ru появился новый небольшой курс Блочные и строчные элементы. Рассказывается про блочные, строчные и строчно-блочные элементы с примерами их использования. В каждом уроке есть вопросы для проверки, в конце можно проверить знания через систему тестирования.

Курс не для новичков, предполагается, что вы уже знакомы с HTML и CSS.

Самоучитель HTML

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

На сайте webref.ru стал доступен самоучитель HTML. Более 50 вопросов для проверки, несколько десятков интерактивных упражнений на закрепление материала, почти два десятка практических заданий по редактированию кода.

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

Самоучитель HTML под Android

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

Сделал самоучитель HTML в виде мобильного приложения под Android. Кроме самой теории с примерами есть куча вопросов для самопроверки и небольших заданий на закрепление материала. Установить можно через Google.Play.

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

Простейший способ создания адаптивной шапки

Дэнни Марков

Оригинал: tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/
Перевод: Влад Мержевич

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

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

Страницы

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