Написал небольшой учебный курс, посвящённый использованию свойства 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

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

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