Порядок выполнения скриптов в HTML. Тег script и атрибуты async, defer, module, nomodule и src

Рассмотрим как атрибуты тега script влияют на порядок выполнения скриптов JavaScript, а также в каких ситуациях стоит их использовать.

Обложка: Порядок выполнения скриптов в HTML. Тег script и атрибуты async, defer, module, nomodule и src

Хотел кликнуть, но не смог: как правильно настроить размер области клика

Рассматриваем несколько распространённых проблем с UX и показываем, с какой из них столкнулись сами и как её решали.

Обложка: Хотел кликнуть, но не смог: как правильно настроить размер области клика

Обучение веб-разработке на практике: пишем слайдер на JavaScript

Обучение веб-разработке даётся проще, если к теории подключена практика. Предлагаем попрактиковаться на слайдере без использования сторонних библиотек.

Обложка: Обучение веб-разработке на практике: пишем слайдер на JavaScript
Обложка: Что нужно знать, чтобы стать веб-разработчиком: интерактивная карта со ссылками на ресурсы для изучения

Что нужно знать, чтобы стать веб-разработчиком: интерактивная карта со ссылками на ресурсы для изучения

Roadmap для веб-разработчика: пригодится, чтобы организовать своё обучение или просто посмотреть полезные ресурсы. Круто оформлено. Кликабельно.

Подборка книг по веб-разработке

Подборка книг для начинающего веб-разработчика

В перечне книг вы найдёте материалы по JavaScript, Node.js, React.js, CSS, HTML, паттернах проектирования и адаптивному веб-дизайну.

Развёрнутое руководство по Sass/SCSS

Современный CSS — мощь, а в комбинации с препроцессорами — вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете…

Обложка: Развёрнутое руководство по Sass/SCSS
Обложка: Создаём простую игру на Vanilla JS

Создаём простую игру на Vanilla JS

В этой статье мы напишем простую игру с помощью HTML, CSS и чистого JavaScript — никаких фреймворков, только хардкор.

5 способов выровнять HTML-элемент горизонтально и вертикально

Устали искать способ вертикально и горизонтально выровнять HTML-элемент? В этой статье мы собрали целых 5 способов сделать это!

html

Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 4

Продолжение серии обучающих статей по работе с Anime.js. В финальной части будут описаны различные обратные вызовы (callback-функции), используемые для выполнения функций в зависимости от прогресса анимации.

Обложка: Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 4

Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 3

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

Обложка: Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 3

Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 2

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

Обложка: Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 2

Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 1

С помощью Anime.js можно анимировать свойства CSS, SVG-изображения или атрибуты DOM-дерева на веб-странице. Позволяет контролировать все аспекты анимации.

Anime.js
Обложка: Курс «HTML5 для начинающих»

Курс «HTML5 для начинающих»

Русскоязычный курс, посвященный языку разметки HTML5.

Какие метатеги использовать в вебе в 2017 году

Браузеры интерпретируют метатеги, чтобы правильно отобразить сайт, а поисковики используют их при выборке информации о странице. Стандарты взаимодействия развиваются, и теги — вместе с ними. Разбираем актуальное по теме.

метатеги 2017

Как работают псевдоклассы в CSS. Подробное объяснение с примерами и диаграммами

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

Обложка: Как работают псевдоклассы в CSS. Подробное объяснение с примерами и диаграммами
Обложка: Курс «Основы веб-разработки»

Курс «Основы веб-разработки»

Курс по веб-разработке, в котором рассматриваются базовые принципы работы веб-сайтов, а также основы написания веб-приложений с помощью фреймворка Django.

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

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

Обложка: Почему вам пригодятся знания HTML и CSS, даже если вы думаете, что это не так

В чём преимущества изучения HTML с наставником?

Если вы решили стать веб-разработчиком, то начнёте с изучения HTML и CSS. Но как именно? Вооружиться учебниками и гуглом, придумать учебный план и планку качества, а ответы ждать на форуме…

Обложка: В чём преимущества изучения HTML с наставником?

10 популярных фронтенд-элементов, для реализации которых не нужен JavaScript

JavaScript — это отличный язык, и вам однозначно стоит использовать его в своих проектах, но не нужно забывать, что большое количество функциональных элементов можно реализовать и без этой зависимости. Мы…

Обложка: 10 популярных фронтенд-элементов, для реализации которых не нужен JavaScript
Обложка: Подборка видео по оптимизации HTML/JavaScript

Подборка видео по оптимизации HTML/JavaScript

Для каждого разработчика далеко не последнюю роль играет повышение производительности сайтов и веб-приложений. Как раз для решения этой задачи будет полезна подборка ниже. В ней собраны лучшие кейсы и стратегии…

Подборка полезных инструментов и библиотек для веб-разработчиков

Здесь вы найдете подборку инструментов для работы с HTML, CSS и JavaScript, которые упрощают выполнение рутинных задач и дают свободу творчеству.

инструменты веб-разработчика

Пишем свою игру в жанре Roguelike

Рассказывает Ido Yehieli  Игры в жанре roguelike, такие как Dungeons of Dredmor, Spelunky, The Binding of Isaac и FTL, в последнее время стали очень популярны, а различные комбинации элементов этого жанра теперь добавляют многим играм…

Обложка: Пишем свою игру в жанре Roguelike
Обложка: Local Web Storage — интересная и эффективная фича HTML5, призванная заменить cookies

Local Web Storage — интересная и эффективная фича HTML5, призванная заменить cookies

Наверняка вы уже сумели заметить: HTML5 стал весьма популярен. Создаются великолепные игры с использованием холстов (canvas), медиа-контент, ориентирующийся на различные устройства. Веб-разработка проделала немалый путь от iFrames 1990-х. В этой статье поделимся…

Обложка: Современный CSS мощнее, чем вам кажется: 12 примеров, в которых вам не нужен JavaScript

Современный CSS мощнее, чем вам кажется: 12 примеров, в которых вам не нужен JavaScript

В наши дни CSS развивается очень быстрыми темпами и может полностью заменить традиционные способы реализации многих классических веб-фишек, для которых обычно использовался JavaScript. Приводим примеры некоторых из них.

Бесплатные игровые движки на HTML5 и JavaScript

HTML5 вместе с CSS3 и JavaScript дают разработчику широкие возможности создания игр с использованием 3D, анимации, Canvas, математики, цветов, звука, WebGL. Одно из наиболее очевидных преимуществ HTML5 заключается в его…

Обложка: Бесплатные игровые движки на HTML5 и JavaScript
Обложка: Target=”_blank”  — наиболее недооцененная уязвимость современности

Target=”_blank”  — наиболее недооцененная уязвимость современности

Большинство веб-разработчиков даже не догадываются: Страница, на которую мы ссылаемся с использованием target=»_blank», получает доступ к странице-источнику через объект window.opener.

Обложка: Средняя веб-страница теперь весит как игра Doom: почему всё не так плохо, как могло бы быть

Средняя веб-страница теперь весит как игра Doom: почему всё не так плохо, как могло бы быть

В июле 2015 года пользователь Twitter с ником @xbs сделал, казалось бы, абсурдное предположение: по его словам, всего через 7 месяцев средний вес сайта в интернете должен был стать равен…

Обложка: 20 лучших HTML5 сайтов начала 2016 года по версии Tproger

20 лучших HTML5 сайтов начала 2016 года по версии Tproger

Современные HTML5-сайты, как разнообразные «залипалки» и визитки, так и вполне серьезные рекламные и образовательные проекты, являются хорошим источником для вдохновения. А обладание таким сайтом в портфолио повысит ваш статус в…

Знакомимся с веб-стандартами: видеоруководство по работе с аудио от Microsoft

Как работать с аудио в вебе? Компания Microsoft решила рассказать разработчикам об этом в очень необычном формате:…

Обложка: Знакомимся с веб-стандартами: видеоруководство по работе с аудио от Microsoft

HTML5 vs. Native Apps

Business Insider (BI) Intelligence специализируется на аналитике мобильного и веб-программирования. И они задались вопросом: смогут ли веб-приложения вытеснить мобильные с рынка мобильных утилит?

Как минифицировать вашу HTML5 игру для соревнования Js13kGames

Слышали ли вы что-нибудь о соревновании под названием js13kGames? Это мероприятие ориентировано на разработчиков игр, использующих возможности HTML5. Основное требование для участия — размер игры не должен превышать 13 КБ.

HTML5 Notifications — это просто: делаем уведомления одной строкой, как в GMail

Наверняка все, кто пользовался почтой от Google, хоть раз видели уведомления вроде этого: Эти уведомления называются HTML5 Notifications, и они видны, даже если перейти в другую вкладку или вообще свернуть…

Обложка: HTML5 Notifications — это просто: делаем уведомления одной строкой, как в GMail