Как стать автором
Обновить
126.6
Рейтинг
HTML Academy
Обучаем веб-разработке и меняем жизни
Сначала показывать
  • Новые
  • Лучшие

Типы значений в CSS. Абсолютные, относительные и всякие другие

Блог компании HTML Academy Веб-дизайн *Разработка веб-сайтов *CSS *HTML *

Давайте без лишних слов разберёмся, какие бывают типы значений у CSS-свойств, и определим, чем отличаются абсолютные и относительные значения (все эти em, rem, vh, vw), как задать красный цвет шестью способами, и зачем нужны CSS-директивы.

Читать далее
Всего голосов 10: ↑9 и ↓1 +8
Просмотры 1.9K
Комментарии 0

Новости

Обзор Chrome DevTools. Решаем основные задачи веб-разработчика

Блог компании HTML Academy Разработка веб-сайтов *CSS *JavaScript *Софт
Tutorial

Мы продолжаем цикл статей об инструментах разработчика — Chrome DevTools. В первых двух частях мы уже познакомились с вкладками ElementsConsole, Sources и Network и разобрались с их основными функциями.

Но возможности Chrome DevTools огромны. С их помощью можно изменять анимацию, проверять доступность, отлавливать ошибки, следить за производительностью сайта и выполнять многие другие задачи. Но на начальных этапах обучения веб-разработке не обязательно разбираться со всеми функциями. Достаточно знать набор базовых инструментов, который понадобится для решения повседневных задач.

Давайте разберёмся, какие задачи разработчика можно решить с помощью Chrome DevTools.

Читать далее
Всего голосов 15: ↑13 и ↓2 +11
Просмотры 7.5K
Комментарии 0

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

Блог компании HTML Academy Разработка веб-сайтов *Типографика *Работа с векторной графикой *Софт

Кроме редактора кода, терминала, браузера и гита веб-разработчики пользуются вагоном и маленькой тележкой маленьких инструментов, которые выполняют какую-то одну задачу, но могут пригодиться в ежедневной работе. Предлагаем вам нашу подборку — надеемся, что что-то пригодится, а по поводу чего-то вы и вовсе скажете «А что, так можно было?».

Краткое содержание: проверка кода по стандартам, проверка вёрстки и стилей, работа с кодом, работа с графикой (SVG, фавиконки, конвертеры и сжималки), работа с текстом (типографы и конвертеры всего во всё).

Дисклеймер: подборка не претендует на полноту, но в комментариях собираем другие полезные инструменты.

Читать далее
Всего голосов 27: ↑25 и ↓2 +23
Просмотры 19K
Комментарии 15

Используйте фавиконки правильно

Блог компании HTML Academy Разработка веб-сайтов *CSS *HTML *Дизайн
Tutorial

Фавиконка — это иконка, которая отображается во вкладке браузера перед названием страницы, в закладках и на рабочем столе для веб-приложений.

Фавиконки — ответственность верстальщика. Под катом рассказ о том, как подключить обязательную фавиконку и каким должен быть набор иконок, как использовать иконки в SVG, что нужно дополнительно сделать для устройств от Apple, и почему хорошо использовать webmanifest для подключения всех фавиконок к вашему сайту.

Читать далее
Всего голосов 19: ↑17 и ↓2 +15
Просмотры 7.6K
Комментарии 11

Как мы делаем курсы по вёрстке. Опыт из первых рук

Блог компании HTML Academy Разработка веб-сайтов *Учебный процесс в IT

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

Пытались ли вы посадить рядом трёх взрослых мужиков и сделать так, чтобы они договорились о том, каким должен быть код? Ведь самое сложное не написать код, а договориться о конечном варианте. И тогда происходит жара, шантаж, и торги разработческими фетишами: «Ладно, давай обернём эти поля формы в тег <p>, а за это ты сможешь ставить точки в конце альтов»

Пытались ли вы это сделать на десяти проектах подряд? Вот, то-то же. А теперь немного хронологии.

Читать далее
Всего голосов 14: ↑12 и ↓2 +10
Просмотры 2.9K
Комментарии 4

Листаю очень плохую книжку по веб-разработке

Блог компании HTML Academy Разработка веб-сайтов *HTML *Учебный процесс в IT Читальный зал

Вот она, лежит у меня на столе. Прямиком из 2008 года, ждала, чтобы я её прочитал и научился делать сайты. Самостоятельно. Самоучитель же. Триумф!

А если тут ещё и предлагают самый быстрый способ, то точно успех, смогу всему научиться, пока пишу эту статью. Смогу ведь, да?

В общем, давайте вместе полистаем старую книжку.

Полистать
Всего голосов 75: ↑47 и ↓28 +19
Просмотры 19K
Комментарии 114

Почему инлайнить стили — плохо

Блог компании HTML Academy Разработка веб-сайтов *CSS *HTML *Тестирование веб-сервисов *
Tutorial

CSS-стили можно встроить прямо в HTML, импортировать, создать с помощью JavaScript или подключить из отдельного файла. Среди разработчиков хорошим тоном считается использовать последний способ, то есть писать стили в отдельном файле и затем подключать их с помощью тега link. А вот внутренних стилей стараются избегать, хотя их применение тоже бывает оправдано.

Но в очень редких случаях. И лучше ими не вообще не пользоваться, если нет необходимости. В статье разберём, почему так, и что с этим вообще теперь делать.

Читать далее
Всего голосов 21: ↑13 и ↓8 +5
Просмотры 10K
Комментарии 8

Критерии качества вёрстки 2021

Блог компании HTML Academy Разработка веб-сайтов *CSS *HTML *Тестирование веб-сервисов *

6 лет назад мы обсуждали с сообществом критерии качества вёрстки, которые мы используем в обучении, чтобы наши выпускники радовали рынок своими умениями и подходом к работе.

С тех пор в разработке интерфейсов произошло море изменений: сначала в продакшн пришли флексы, потом подтянулись гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на наши критерии, и мы постоянно их дорабатывали.

Сейчас пришло время обсудить с сообществом обновлённые критерии.

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

Читать далее
Всего голосов 35: ↑33 и ↓2 +31
Просмотры 27K
Комментарии 22

Руководство по инструментам доступности

Блог компании HTML Academy Веб-дизайн *Разработка веб-сайтов *Accessibility *Тестирование веб-сервисов *
Перевод
Tutorial

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

Это перевод статьи Nic Chan «A Complete Guide To Accessibility Tooling» из журнала Smashing Magazine.

Читать далее
Всего голосов 17: ↑17 и ↓0 +17
Просмотры 6.5K
Комментарии 0

Как искать и выбирать npm-пакеты? Шпаргалка для начинающих

Блог компании HTML Academy Разработка веб-сайтов *JavaScript *Node.JS *
Tutorial

Что делает разработчик, если ему нужно раскрасить кнопку в красный цвет? Ищет в npm пакет, окрашивающий кнопки в красный цвет

В реестре npm — более миллиона пакетов почти для чего угодно. Например, с их помощью можно минифицировать код, удалять и переименовывать файлы, создавать спрайты, отправлять сообщения в центр уведомлений операционных систем, работать с препроцессорами Less и Sass и выполнять многие другие действия, упрощающие и автоматизирующие работу над проектом. 

Конечно, бездумно использовать менеджер пакетов не стоит: некоторые задачи можно решить и без него. Но всё же npm-пакеты полезны и постоянно применяются в веб-разработке. Поэтому важно знать, как их правильно выбрать, где искать и на что обратить внимание перед установкой.

Читать далее
Всего голосов 9: ↑7 и ↓2 +5
Просмотры 5.2K
Комментарии 7

«Лучше бы пошла в лес погуляла!», или как поменять профессию спустя 30 лет работы

Блог компании HTML Academy Разработка веб-сайтов *Программирование *Карьера в IT-индустрии Интервью

Ирина Мозес застала появление Arpanet и победу СССР над США в баскетбольном олимпийском турнире. Уже больше 30 лет она занимается программированием, но веб-разработку начала изучать только 5 лет назад. Сегодня Ирина работает ревьюером в крупной компании, а её упорству и интересу к жизни можно только позавидовать.

Читать далее
Всего голосов 13: ↑10 и ↓3 +7
Просмотры 5.3K
Комментарии 9

Заменят ли верстальщиков нейросети и конструкторы для создания сайтов?

Блог компании HTML Academy Разработка веб-сайтов *Программирование *Искусственный интеллект

Разговоры о том, останутся ли верстальщики без работы, длятся годами. Как только появляется новая программа или плагин для автоматизации вёрстки, специалистам начинают тут же пророчить бессрочный отпуск. Но стоит ли всерьёз относиться к таким разговорам?

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

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 11K
Комментарии 11

Что можно положить в тег <head>

Блог компании HTML Academy Разработка веб-сайтов *Семантика *HTML *
Перевод
Tutorial

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

meta charset — определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования

Элементы

Допустимые элементы <head> включают meta, link, title, style, script, noscript и base.

Эти элементы предоставляют информацию о том, как документ должен восприниматься и отображаться веб-технологиями, например, браузерами, поисковыми системами, ботами и так далее.

Читать далее
Всего голосов 35: ↑35 и ↓0 +35
Просмотры 15K
Комментарии 23

Используйте ссылки и кнопки правильно. Пожалуйста

Блог компании HTML Academy Разработка веб-сайтов *Программирование *HTML *Дизайн
Tutorial

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

Читать далее
Всего голосов 31: ↑30 и ↓1 +29
Просмотры 11K
Комментарии 19

Нужно ли покупать новый компьютер для вёрстки

Блог компании HTML Academy Разработка веб-сайтов *Учебный процесс в IT Компьютерное железо Старое железо

В начале какого-нибудь фитнес-курса обычно объясняют, какой понадобится реквизит: специальная палка, мячи разных размеров, резинка, пенный ролл. На курсе по вёрстке сложнее. Понятно, что нужен компьютер, там нужны программы. Чего тут ещё рассказывать? Поэтому как филолог, который раньше никогда не писал код, я даже подумать не могла, что собственный ноутбук будет мешать мне учиться верстать.

Ноутбук мне подарили ещё в 10 классе за хорошую учёбу. Я закончила школу, два университета, а он всё это время был со мной. Многое вытерпел: бесконечные загрузки всяких файлов из интернета, установки программ и расширений, сутки работы над документами, многочасовые просмотры фильмов и сериалов. Конечно, иногда его чистили, проверяли на вирусы, удаляли лишнее, но время берёт своё. И вот потихоньку он начал притормаживать. То включается долго, то ничего не грузится. Но в сложных (или, скорее, нестандартных) программах я не работала, поэтому в целом меня всё устраивало. Пока я не начала изучать вёрстку.

Мне дали ссылку на макет и инструкции. Но почти сразу что-то пошло не так.

Читать далее
Всего голосов 22: ↑16 и ↓6 +10
Просмотры 10K
Комментарии 49

Живые и неживые коллекции в JavaScript

Блог компании HTML Academy Разработка веб-сайтов *JavaScript *Программирование *

Найти несколько DOM-элементов и получить к ним доступ из JavaScript можно разными способами: querySelectorAllgetElementsByTagNamechildren и так далее. В итоге в каждом случае будет возвращена коллекция — сущность, которая похожа на массив объектов, но при этом им не является, на самом деле это набор DOM-элементов.

Но во время работы с коллекциями можно столкнуться с поведением, которое покажется странным, если не знать один нюанс — они бывают живыми (динамическими) и неживыми (статическими). То есть либо реагируют на любое изменение DOM, либо нет. Вид коллекции зависит от способа, с помощью которого она получена. Рассмотрим на примере.

Читать далее
Всего голосов 11: ↑6 и ↓5 +1
Просмотры 3.9K
Комментарии 16

Не лезьте в геймдев, он вас сожрёт (но вам понравится)

Блог компании HTML Academy Разработка веб-сайтов *Разработка игр *Дизайн игр *

Не зря говорят, что геймдев безжалостен (и особенно к новичкам).

Rovio сделали Angry Birds с какой-там-сорок-с-лишним попытки, всякие новички регулярно проваливают ответственную задачу по доделыванию своих инди пиксельных платформеров на юнити, Башурова вон вообще забанил Эпл, хотя казалось бы — целый Башуров. Короче, жуть и ужас.

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

Но пути назад нет. Я был на передовой этого безумия, видел всё и спешу рассказать, как наступить на все возможные грабли, когда, вообще-то, занимаешься обучением веб-разработке, но пытаешься сделать игру.

Читать далее
Всего голосов 18: ↑9 и ↓9 0
Просмотры 9.6K
Комментарии 5

Резюме, тестовые и прочие неприятности

Блог компании HTML Academy Учебный процесс в IT Управление персоналом *Карьера в IT-индустрии Удалённая работа

Резюме и ответ на тестовое задание — первое, что работодатель получает от кандидата. Если на этом этапе что-то пошло не так, до собеседования дело не доходит. Только кандидату не всегда сообщают, в чём конкретно проблема.

Мы попросили наших студентов, выпускников и подписчиков поделиться воспоминаниями о том, как они искали работу. Спустя месяцы кто-то так и не понял, почему его или её не пригласили на собеседование, — остались догадки и вопросы. Мы показали эти истории тем, кто нанимает разработчиков, и получился целый диалог — теперь на все неприятности с приёмом на рабоут можно посмотреть с обеих сторон. Каждый пункт прокомментировали технический директор HTML Academy Алексей Малейков и HR фронтенд-аутсорса «Лига А.» София Петлякова.

В итоге получился список советов и для соискателей, и для работодателей.

Дисклеймер: эта статья может оскорбить людей, которые считают, что в резюме можно обойтись и без фотографии.

Читать далее
Всего голосов 12: ↑10 и ↓2 +8
Просмотры 7.5K
Комментарии 0

Нестандартные шрифты: как подключить и оптимизировать

Блог компании HTML Academy Веб-дизайн *Разработка веб-сайтов *CSS *Программирование *
Tutorial

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

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

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 10K
Комментарии 4

Забудьте про div, семантика спасёт интернет

Блог компании HTML Academy Веб-дизайн *Разработка веб-сайтов *Программирование *HTML *

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном <div> и <span>) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

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

Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но <div> — не приговор, и мы не призываем от него целиком отказываться. Ну и всегда можно договориться.

Читать далее
Всего голосов 56: ↑50 и ↓6 +44
Просмотры 52K
Комментарии 55

Информация

Дата основания
Местоположение
Россия
Сайт
htmlacademy.ru
Численность
101–200 человек
Дата регистрации