Псевдоэлемент ::first-line

Сделал небольшой видеоролик, посвящённый довольно редко используемому псевдоэлементу ::first-line. Как вам такой формат рассказа о CSS? Запланировано ещё несколько подобных видео.

Справочник HTML

На сайте webref.ru обновился справочник HTML. На самом деле изменения в справочник вносятся постоянно и в какой-то момент их количество становится столь велико, что об этом можно заявить отдельно.

Итак, что стало нового.

  • Нет акцента на HTML5. Раньше такие элементы выделялись специальным значком, а в описании говорилось об их принадлежности к HTML5. Теперь все элементы между собой равны и каким-либо образом не разделяются.
  • Появилась отдельная группа с устаревшими элементами HTML. Обязательно указывается что элемент устарел, использовать его не нужно и показана современная альтернатива в виде другого элемента или CSS.
  • Обновилась таблица браузеров, где указана версия, начиная с которой идёт поддержка элемента или его атрибута.
  • Дополнены некоторые описания элементов и их атрибутов.
  • Обновлены ссылки на спецификацию HTML. W3C отказалась от поддержки HTML5 и передала эти полномочия WHATWG. Теперь у нас нет HTML 5.3, а есть просто живой стандарт.
  • Примеры это отдельная тема. Результат примера сразу же отображается в браузере и видно как этот элемент HTML будет выглядеть в действительности. Каждый пример буквально одной кнопкой можно скопировать в буфер, а затем вставить код в свой любимый редактор. Также через кнопки можно переправить код примера в популярные песочницы JSFiddle и CodePen, где, опять же, доработать под свои нужды.

Примеры

Расстановка переносов в тексте

Выравнивание текста появилось в CSS ещё в первой версии и в каком-то смысле копировало возможности текстовых редакторов.

В текстовых абзацах выравнивание по умолчанию происходит по левому краю, а правый же край остаётся неровным, в виде «лесенки». Для большинства текстов это смотрится вполне естественно, да и читать вполне комфортно (рис. 1).

Текст, выровненный по умолчанию

Рис. 1. Текст, выровненный по умолчанию

Канал Телеграма

Сделал публичный канал Телеграма, куда уже некоторое время выкладываю всякие рецепты, советы и мысли по поводу HTML, CSS и вёрстке. Так что присоединяйтесь!

Переменные CSS

Добавилось новое руководство Переменные CSS с нуля. Написал его пакистанский фронтенд-разработчик Ахмад Шадид, перевод мой.

Если не знаете, что это вообще такое и как эти переменные использовать, то читать обязательно.

htmlbook перешёл на https

Мы долго к этому шли и наконец пришли. htmlbook теперь работает по защищённому протоколу https. Никаких закладок обновлять не надо, всё настроили автоматически. Теперь идёт переход с http на https, а ещё с www на сайт без www. Адрес теперь один и это https://htmlbook.ru

Но если всё-таки заметите какие-то неполадки, пишите мне на ящик vlad@htmlbook.ru

https

Влияние ссылочной массы на позиции сайта

Реклама

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

Основы ссылочной массы

Ссылочная масса, также известная как «backlink profile», представляет собой совокупность всех внешних ссылок, которые указывают на конкретный веб-сайт. Каждая ссылка воспринимается поисковыми системами как голос за авторитетность и качество сайта. Чем больше ссылок от релевантных и авторитетных источников указывает на сайт, тем выше вероятность того, что поисковая система рассмотрит его как надёжный и ценный для пользователей.

Практика по HTML и CSS

Обновил приложение под Андроид Практика по HTML и CSS, в котором можно решать задачи на разные темы, повышать свой уровень знаний HTML и CSS на практике.

Если ещё не установили, то самое время это сделать прямо сейчас.

Практика по HTML и CSS

Как сделать простой слайдер на HTML и JavaScript

Вы сверстали сайт и сделали его красивым с помощью CSS. Осталось добавить интерактива, и можно добавлять проект в портфолио.

«Оживить» на сайте можно что угодно: меню, модальные окна, корзину, пагинацию… В этой статье мы разберём слайдер — посмотрим, как его сделать на чистом JavaScript. Слайдер пригодится для раздела с отзывами, фотографиями сотрудников, изображениями товаров или чего-нибудь ещё — всё зависит только от вашей фантазии и проекта.

Сделать слайдер

Почему пройдя курсы вы не устроитесь на работу?

Привет, это HTML Academy!

Мы уже 11 лет делаем курсы для веб-разработчиков и хотим помочь разобраться в IT всем, кому это интересно. Поэтому 28 июня в 13:00 приглашаем вас на бесплатный лайв «Где учиться программированию и не потратить время зря: вузы, курсы или самообучение».

В прямом эфире обсудим:

  • Возможно ли самостоятельно обучиться веб-разработке и сделать это основной профессией.
  • Актуально ли обучение в вузах для изучения программирования.
  • Что представляют из себя онлайн-курсы и насколько они эффективны.
  • Как можно использовать онлайн-ресурсы, сообщества программистов и форумы для обучения.
  • Как составить свой план обучения и не слиться с намеченной цели.

Всех записавшихся ждут скидки и подарки от Академии!

Записаться

До встречи на лайве

Почему пройдя курсы вы не устроитесь на работу?

Почему пройдя курсы вы не устроитесь на работу?

Мы не хотим вас напугать, просто напоминаем, что 31 мая в 13:00 пройдёт лайв с Артёмом Альтигиным. На нём узнаем, чего не хватает выпускникам курсов, чтобы найти свою первую работу. Присоединяйтесь!

Записаться на лайв

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