Однако некоторые считают, что HTML и CSS не следует уважать так же, как другим языкам, потому что ни один из них не требует внутренней логики. Это потому, что HTML и CSS являются декларативными языками, которые инструктируют веб-браузер отображать веб-страницы, а не использовать вычислительный код.
Несмотря на то, что некоторые могут подумать, что для разработчиков становится все более ценным обладать глубокими знаниями и опытом работы на этих двух языках. Проверка навыков HTML и CSS не менее важна, чем владение такими языками, как Java и C ++. Несомненно, любой человек, имеющий смутные технические знания, должен иметь базовое понимание HTML и CSS.
HTML и CSS составляют основу фронтенд разработки вместе с JavaScript. Фактически, вы также найдете довольно много back-end разработчиков, которые регулярно используют эти языки. Хотя вы никогда не найдете разработчика, который использует только эти языки, HTML и CSS достаточно важны для современной разработки программного обеспечения, чтобы гарантировать, что разработчики интерфейсов могут использовать их эффективно. Хотя начать работу с ними несложно, для продвинутых приложений требуются глубокие навыки и понимание. Важно убедиться, что ваш программист понимает это.
1. Что такое HTML и CSS и для чего они используются?
1.1 Что такое HTML? HTML или язык разметки гипертекста - это стандартный язык разметки для создания веб-страниц и веб-приложений. Языки разметки отличаются от языков программирования тем, что не выполняют никакой логики. Вместо этого HTML предназначен для создания структурированного документа с использованием таких элементов, как изображения, формы, списки и т.д. Браузер должен затем интерпретировать этот документ для создания веб-страниц, которые вы в конечном итоге просматриваете (например, ту, которую вы читаете. сейчас).
1.2 Что такое CSS?
CSS или каскадные таблицы стилей предоставляют стандартное определение того, как различные элементы должны отображаться на странице. Что я имею в виду? Представьте, что вы хотите, чтобы художник покрасил ваш дом, вы можете указать ему цвет, который вы хотите для каждой отдельной стены. Это было бы похоже на предоставление инструкций только с использованием HTML. Для этого потребуется много инструкций для вашего художника и потребуется больше времени на написание.
Но если вы хотите, чтобы все стены вашего дома были одного цвета. В этом случае вы бы посоветовали своему маляру покрасить каждую стену в определенный цвет. Это все равно что давать инструкции с помощью CSS. С помощью CSS вы можете определить стандартный вид элемента на своей странице, чтобы всякий раз, когда вы создаете новый элемент, все ваши стандарты дизайна оставались неизменными. Это требует меньше инструкций и означает, что новые элементы, такие как цвета и шрифты, будут соответствовать остальной части страницы.
1.3 Для чего используются HTML и CSS?
При совместном использовании HTML и CSS являются краеугольными камнями всемирной паутины. Оба они очень популярны, а основные концепции легко усвоить. Взятые с помощью JavaScript, они являются двумя из трех основных навыков Фронтенд разработчика. Но Front-end программист должен знать больше, чем просто базовые концепции, чтобы делать хорошо работу.
2. Что важно знать ИТ-рекрутеру о навыках фронтенд-разработчика HTML и CSS?
2.1. Стандарты Консорциум World Wide Web (W3C) - это международная организация по стандартизации, которая создает стандарты HTML и CSS. Тем не менее, последняя версия HTML - это HTML5, который следует стандарту WHATWG (так называемый HTML Living Standard), а не стандарту W3C. Не существует единой версии CSS, потому что, начиная с CSS 3, он разделен на модули, и каждый модуль имеет независимую версию.
Практически каждый разработчик, не говоря уже о Front-end разработчике, должен иметь хотя бы базовое понимание HTML и CSS. Разработчик HTML или CSS редко бывает автономным. В большинстве случаев это всего лишь один из навыков Front-end разработчика, Full-stack программиста или графического / веб-дизайнера.
Стандарты меняются не очень часто. Однако новые функции появляются регулярно, поэтому разработчикам необходимо быть в курсе последних событий. В последние годы наблюдается постоянный поток новых функций и обновлений CSS. Настолько, что серверные разработчики могут даже не осознавать, насколько мощной стала эта технология.
2.2 Инструменты Каждый браузер интерпретирует CSS и HTML по-своему. Разработчик должен знать различия между браузерами и их поддержку разных версий HTML / CSS. Кроме того, разработчики должны знать, какие инструменты они могут использовать для создания кроссбраузерного HTML / CSS-контента.
Front-end разработчики, использующие JavaScript фреймворки, обычно работают с библиотеками, полными готовых к использованию компонентов. Однако создание готового к производству приложения требует адаптации стиля к дизайну продукта. Такая адаптация часто требует глубоких знаний CSS.
Чтобы упростить и ускорить работу веб-страниц, разработчики часто используют дополнительные инструменты, такие как интерфейсные фреймворки (например, Bootstrap) или язык таблиц стилей (например, LESS или SCSS).
2.3 Пользовательский опыт (UX) UX - жизненно важный компонент фронтенд разработки. Компетентный программист внешнего интерфейса должен обладать способностью просматривать веб-страницы или приложения с точки зрения пользователя. Это означает комплексную оптимизацию UX. Предлагать улучшения для приложения, такие как удаление ненужных кликов или повышение производительности за счет оптимизации скорости загрузки страницы, - это два примера оптимизации.
Адаптивный веб-дизайн (RWD) - еще одна важная техника, которую разработчики интерфейса должны учитывать для UX. Это подход, который предполагает, что дизайн и разработка должны реагировать на поведение и среду пользователя в зависимости от размера экрана, платформы и ориентации.
Наконец, a11y (это аббревиатура от термина «доступность») становится широко обсуждаемым движением в технических кругах и еще одним важным аспектом UX. Это не относится к конкретному стандарту, измерению или закону, имеющему отношение к технологии, а скорее к изменению способа создания веб-сайтов с учетом интересов людей с ограниченными возможностями. Проект направлен на то, чтобы сделать веб-страницы более удобоваримыми, актуальными и простыми для людей с ограниченными возможностями, будь то нарушение зрения или другая форма заболевания.
3. Проверка навыков Front-end разработчика в области HTML и CSS на основании резюме.
Первый намек на знание HTML и CSS Front-end разработчика у многих IT рекрутеров - это то, что написано в резюме кандидата. Помимо простых навыков HTML и CSS (которые должны быть даны любому разработчику внешнего интерфейса), очень важно увидеть, насколько хорошо кандидат осведомлен о техническом стеке внешнего интерфейса. Вот глоссарий навыков, на которые нужно обратить внимание, и краткое изложение всего, что должен знать ваш кандидат, чтобы помочь вам лучше понять, что нужно искать в его опыте программиста.
3.1 Глоссарий HTML и CSS для ит рекрутеров
Front-end фреймворки: Bootstrap, Foundation, Semantic UI, Pure, UIkit, Bulma
Препроцессоры CSS: Sass, LESS, Stylus, CSS-Crush, Myth, Rework, Compass, PostCSS
Фреймворки HTML5: Skeleton, HTML KickStart, Montage, SproutCore, Zebra,
Анимации: Адаптивный веб-дизайн (RWD)
Доступность: A11Y
Конвенции: Блок модификатор элемента
Инструменты: Модули CSS, CSS в JS
Другое / Разное: HTML5 шаблон
3.2. Стандарты HTML - типы HTML
HTML 4 - основная версия HTML, рекомендованная W3C в 1997 году.
XHTML - расширение HTML4, просто более строгая версия HTML 4. В него включены некоторые функции XML в HTML.
HTML5 - последняя версия стандарта HTML. Наиболее широко используемый.
3.3. Стандарты CSS
CSS 2 - спецификация CSS уровня 2, опубликованная W3C в 1998 г.
CSS 2.1 - CSS уровня 2, версия 1, исправленные ошибки в CSS2
CSS 3 - разделение спецификации на несколько разделов, называемых модулями, значительное изменение. CSS 3 представил множество новых функций, таких как новые селекторы, новые свойства, изменения блочной модели и многое другое.
3.4. Фреймворки HTML и CSS
Базовый HTML и CSS легко кодировать, но уровень сложности современных веб-сайтов может потребовать очень много времени для написания кода. К счастью, от разработчиков не требуется создавать все с нуля. Существуют доступные фреймворки, которые предлагают помощь с готовыми к использованию компонентами и предоставляют простой способ настройки внешнего вида страницы.
Наиболее популярные фреймворки: - Бутстрап (версия 4)
- Foundation (последняя версия 6)
3.5 Другие области HTML и CSS, о которых должен знать ваш кандидат
Поскольку основы CSS довольно легко освоить, есть некоторые области CSS, которые требуют дополнительных усилий для эффективного использования разработчиками. Это включает:
- Модель CSS Flexbox
- CSS-сетка
- Модель CSS Box
- Элементы макета с абсолютным позиционированием
- Элементы макета с поплавками
- CSS-анимации
- HTML / CSS вопросы и ответы на собеседовании4. Вопросы и ответы на собеседовании по HTML / CSS
4. Вопросы для собеседования чтобы проверить навыки Front-end разработчика - HTML и CSS
4.1. HTML вопросы и ответы на собеседовании ћ Что делает doctype? Doctype определяет, к какой версии HTML относится документ.
Чего следует опасаться при проектировании или разработке многоязычных сайтов? Ответы кандидата на этот вопрос должны продемонстрировать, есть ли у него опыт создания крупномасштабных сайтов из разных регионов мира. Ответы, которые включают следующие темы, являются хорошим показателем информированного кандидата: поддержка Unicode для кодирования, направление слева направо и справа налево, автоматизация перевода валют, дат и формы множественного числа, а также параметризация переведенных строк
Опишите разницу между <script>, <script async> и <script defer>. Ответы на этот вопрос связаны со знанием кандидатом того, как выполняется JavaScript в веб-приложении. Обычно сценарии выполняются последовательно, <script async> и <defer> - это методы загрузки сценариев в другом порядке.
Почему обычно рекомендуется размещать CSS <link> между <head> </head> и JS <script> непосредственно перед </body>? Вы знаете исключения? Ответы на этот вопрос демонстрируют высокий уровень понимания структуры HTML-документа. Ссылки CSS внутри <head> гарантируют, что любой контент на странице будет правильно структурирован с самого начала рендеринга (без временных вспышек контента). С другой стороны, загрузка JS из нижней части <body> побудит браузер выполнить JS после отображения содержимого.
Что такое прогрессивный рендеринг? Ответы продемонстрируют внимание кандидата к эффективности своих сайтов. Прогрессивный рендеринг - это метод более быстрой загрузки просматриваемых фрагментов страниц.
4.2. CSS вопросы и ответы на собеседовании
В чем особенность селектора CSS и как он работает? Этот вопрос предназначен для того, чтобы узнать, имел ли кандидат возможность создавать и / или поддерживать большие веб-сайты, на которых он мог отвечать за несколько таблиц стилей (потенциально конфликтующих). Если к определенному блоку применено много конфликтующих таблиц стилей, CSS необходимо определить, какая из них более важна.
В чем разница между «сбросом» и «нормализацией» CSS? Что бы вы выбрали и почему? Ответы покажут, есть ли у кандидата опыт устранения различий между браузерами. Сброс - это удаление стилей по умолчанию, а нормализация - унификация результатов.
Опишите поплавки и то, как они работают. Ответы определяют фундаментальные аспекты CSS. Поплавки определяют, как разместить элемент внутри контейнера .
Опишите BFC (контекст форматирования блока) и то, как он работает. Ответ определяет, понимает ли кандидат, как блоки структурируют страницу и как они могут адаптироваться друг к другу.
Какие существуют различные методы очистки и какие из них подходят для какого контекста? Ответы на этот вопрос демонстрируют фундаментальные знания CSS. Три наиболее распространенных метода: «Clear: both», свойство переполнения и псевдоселектор «: after».
Как вы подойдете к исправлению проблем со стилем, специфичных для браузера? Ответы на этот вопрос должны относиться к тому, понимает ли кандидат, как гарантировать единообразный внешний вид для пользователей на многих различных устройствах. Примером решения может быть normalize.css.
Как вы обслуживаете свои страницы в браузерах с ограниченными функциями? Ответы продемонстрируют осведомленность кандидатов о том, что некоторые пользователи могут использовать более старые версии браузеров и что функции CSS в базе кода могут не поддерживаться. Это особенно важно при создании крупномасштабных сайтов, таких как сайты публикации новостей.
Какие методы / процессы вы используете? Изящная деградация - предоставляет запасной вариант для отсутствующей функции браузера, поэтому, если что-то не поддерживается, предоставляется аналогичный UX, насколько это возможно.
Прогрессивное улучшение - фокусируется на предоставлении функций для базовых пользователей и добавлении новых функций только в том случае, если браузер поддерживает их.
Какими способами можно визуально скрыть контент (и сделать его доступным только для программ чтения с экрана)? Ответы на этот вопрос позволяют проверить, есть ли у кандидата опыт предоставления доступа к веб-сайтам (a11y), то есть обеспечения равного UX для людей с ограниченными возможностями. Этот конкретный сценарий должен происходить, когда контент визуально очевиден для зрячих пользователей, а резервная информация доступна для программ чтения с экрана для предоставления информации.
5. Техническая проверка навыков разработчиков интерфейсов HTML и CSS с помощью онлайн-теста.
Важно увидеть, знает ли разработчик основные концепции, более важно знать, могут ли они применить их к реальной работе. Это можно сделать с помощью теста кодирования или собеседования по программированию, но не все платформы для этих тестов созданы одинаковыми.
5.1 Какие тесты кодирования HTML и CSS вы должны выбрать для проверки навыков фронтенд-разработчика?
При поиске подходящего онлайн- теста на HTML и CSS вы должны убедиться, что он соответствует следующим критериям:
- Тест должен отражать реальную выполняемую работу с использованием HTML и CSS в реальных интерфейсных проектах.
- Экономия времени - максимум один-два часа.
- Отправляется автоматически и может быть доставлен куда угодно, чтобы предоставить вам и вашему кандидату гибкость.
- Не ограничивайтесь проверкой того, отображает ли код страницу, но также проверяйте эффективность кода и то, насколько хорошо он отображается на нескольких платформах.
- Будьте как можно ближе к естественной среде фронтенд-разработки и позвольте кандидату получить доступ к тем ресурсам, с которыми он обычно работает.
- Предоставьте кандидатам доступ ко всем библиотекам, фреймворкам и другим инструментам, которые они обычно использовали бы, включая наиболее важные для работы.
- Сопоставьте способности кандидата с соответствующим тестом