Пользователю должно быть удобно взаимодействовать с элементами на странице, сайт быстро загружается, дизайн отзывчивый и красивый.
Верстка удовлетворяет пожелания клиента. Она должна быть гибкой, т.е. компоненты должны быть переиспользуемыми, а код понятным, чтобы в дальнейшем было легко ее поддерживать. Стандарты соблюдены (семантическая, валидная, адаптивная, кроссбраузерная).
Хорошая верстка должна 100% совпадать с макетом.
Для него очень важно качество кода (легко читается).
Запросы не должны перегружать сервер.
2. Опишите основные особенности верстки крупных многостраничных сайтов, дизайн которых может меняться в процессе реализации и поддержки. Расскажите о своем опыте верстки подобных сайтов: какие методологии, инструменты и технологии вы применяли на практике.
Используется компонентный подход. Компоненты должны быть унифицированными и переиспользуемыми. Я придерживаюсь компонентного подхода (использую библиотеку React и СSS модули). Также есть опыт верстки по БЭМ.
Также необходимо придерживаться стандартов написания кода (именования, отступы и т.д.), принятых в команде разработки.
3. Опишите основные особенности верстки сайтов, которые должны одинаково хорошо отображаться как на любом современном компьютере, так и на смартфонах и планшетах под управлением iOS и Android. Расскажите о своем опыте верстки подобных сайтов: какие инструменты и технологии вы применяли, как проверяли результат на различных устройствах, какие именно устройства требовалось поддерживать.
Сайт должен быть адаптивным и кроссбраузерным. Чтобы он был адаптивным я пользуюсь медиа-запросами и описываю стили при разных ширинах экрана. Для проверки адаптивности я использую инструменты разработчика (функция эмуляции устройств). Для того чтобы все браузеры поддерживали используемые мной стили я использую PostCSS, а именно плагин autoprefixer. Также могу использовать @supports чтобы задавать отдельные стили под какой-то браузер. Для проверки кроссбраузерности я открываю свой сайт в каких-то конкретных браузерах, или использую сервис browsershots. Добавлю, что я стараюсь писать современный JS код, поэтому для того, чтобы он одинаково работал на всех браузерах я включаю в свой проект ts-loader (или babel).
4. Расскажите, какие инструменты помогают вам экономить время в процессе написания, проверки и отладки кода.
Экономить время мне помогает Typescript. Он вводит статическую типизацию, которая уменьшает вероятность ошибки. Также я учусь тестировать компоненты с помощью Jest. Ну и конечно же я использую инструменты разработчика в браузере.
5. Вам нужно понять, почему страница отображается некорректно в Safari на iOS и в IE на Windows. Код писали не вы, доступа к исходникам у вас нет. Ваши действия? Сталкивались ли вы с подобными проблемами на практике?
Я открою инструменты разработчика и с помощью них буду искать проблему. Сталкивался с неправильным отображением в IE11. Использовал @supports, чтобы задать стили для всех браузеров кроме IE11, а для него прописывал стили отдельно
6. Дизайнер отдал вам макет, в котором не показано, как должны выглядеть интерактивные элементы при наведении мыши. Ваши действия?
Я свяжусь с дизайнером, а пока буду ждать обратной связи, сделаю верстку без hover-эффектов и вернусь к ним позже. Главное начать решать эту проблему сразу же, а не после того, как все сверстал и остались только hover-эффекты. Если же обратной связи не будет, то я добавлю стандартные эффекты и поменяю их позже в случае ответа.
7. Какие ресурсы вы используете для развития в профессиональной сфере? Приведите несколько конкретных примеров (сайты, блоги и так далее). Какое направление развития вам более близко: JS-программирование, HTML/CSSверстка или и то, и другое? Какие ещё области знаний, кроме тех, что непосредственно относятся к работе, вам интересны?
Для развития в профессиональной сфере я использую сайты:
Мне интересно описывать логику приложения и визуализировать дизайнерские решения.
Меня зовут Дмитрий. Мне 28 лет. Я Frontend-разработчик с опытом около года. Прохожу двухлетнюю программу Skillbox по веб-разработке. Хочу построить карьеру как специалист в области разработки интерфейсов. Владею инструментами: JavaScript (ES7), Typescript, HTML5, CSS3, Sass, React, Redux, React router, Webpack, Git.
Ссылки на работы:
https://github.com/DimaDushak/aviasales_test - клиент получает случайно сгенерированные билеты от сервера и отрисовывает интерфейс согласно макету в Figma.
https://github.com/DimaDushak/future_test - React-приложение для отображения таблицы с данными.
Также учебные проекты:
https://photoviewer.xyz/ (https://github.com/DimaDushak/photoviewer.xyz) - приложение для просмотра фотографий с сервиса Unsplash
https://www.dushakdmitriy.ru/ (https://github.com/DimaDushak/dushakdmitriy.ru) - личный сайт