Реклама

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

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

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

Программа будет идти с 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, добавляя в него отсутствующие моменты. Не хватало таблиц — вот вам таблицы. Как и с остальными материалами самоучителя, это не просто текст, а ещё набор заданий для проверки знаний, плюс небольшая практика с автоматической проверкой кода. Наслаждайтесь!

Реклама

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

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

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

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

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

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

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

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

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

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

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

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

Оригинал: http://tutorialzine.com/2017/03/css-grid-vs-flexbox/
Перевод: Влад Мержевич

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

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

Но теперь у нас есть новый претендент на титул за звание «лучшей системы для вёрстки макетов HTML» (название титула ещё в процессе разработки»). Это CSS Grid и в ближайшее время эта система будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре, как я надеюсь, и в других браузерах.