испытание волшебная дверь html academy

Тестовое задание для фронтендера

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

Верстальщик — такой человек, который хорошо разбирается в HTML и CSS и немного знает JavaScript. Ну то есть понимает, как в целом всё работает, но сильно не погружается. При этом бывает непросто выбрать хорошего верстальщика, потому что всех учат по-разному.

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

На что смотреть в целом

Соответствует ли результат ТЗ? Всё работает? Всё заверстано? Джуну прощаются мелкие недочёты, но он хотя бы показывает что хотел сделать как можно лучше, просто пока не хватает практики. Если сделано спустя рукава, то это тоже видно.

Пример: сверстать «аккордеон»

Соответствие ТЗ: аккордеон завёрстан по макету, нет ошибок в HTML. JavaScript написан без onclick, код для аккордеона можно переиспользовать на других страницах и блоках.

Если аккордеон завёрстан, но при нажатии на кнопку ничего не происходит, то не работает. Для мидла это минус, джуну можно простить, если к внешнему виду и семантике не подкопаться. Джуну также прощается, если JavaScript есть, но в семантике есть ошибки или результат немного не соответствует макету (другие отступы, например, или забыл про уголки).

Предусмотрено ли переполнение? Сильно ли едет макет при добавлении или удалении элементов? Можно ли ввести 4 строки, если в дизайне нарисовано 2? Предусмотрены ли максимальные и минимальные размеры?

Мидлы обычно предусматривают ситуации, когда сайт нуждается в доработке или клиент попросит что-либо поменять. При продуманном переполнении верстка не едет.

Столько плюсов каждому по нраву

Как оформлена сборка? Есть readme? Запускаются таски из gulp? Такие мелочи показывают, есть ли у человека опыт в разработке. Обычно, когда сверстаешь пару проектов, учишься наводить порядок в файлах и умеешь работать с таск-менеджерами. В идеале нужна чистая сборка: всё разложено по папкам, комментарии убраны, лишних файлов нет.

Выделяются ли компоненты? Проект у мидла — «конструктор», где блоки можно менять местами и ничего не ломается.

Как подключаются скрипты и стили? Есть ли инлайн? Есть ли onclick=»» или style=»»? Джуну какие-то вещи простить можно, мидлу нет.

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

Как реализованы ховеры и адаптив? Это не обязательно, но будет плюсом, показывает опыт и аккуратность. Сразу видно, как человек импровизирует, так как в макете не рисуются разные состояния кнопок. Хорошая импровизация показывает, что человек может заморочиться и сделать «вау» потому что ему хочется так сделать, а не потому что так сказал босс.

Ховеры на сайте «Лиги А.»

Что с семантикой? Есть ли header/main/footer? Правильно ли построена разметка по макету?

Правильная ли вложенность? Если лишние обёртки? Здесь сразу видно опыт — у новичков бывает много лишних дивов.

Как вставлены картинки? Предусмотрены ли webp и ретина?

Как оформлены векторные элементы? Вектор это точно SVG, а не PNG? В тестовом задании мы обращаем внимание на сжатие SVG (вручную или через таск-менеджеры) и как элементы вставлены в разметку (лучше всего использовать спрайты для иконок, а не псевдоэлементы или img).

Вот что может случиться, если не подумать о графике заранее:

Как свёрстана форма? Есть ли ховеры и фокусы? Какая кликабельность у элементов?

Что сделано для обеспечения доступности? Это не обязательно в тестовом задании, но будет плюсом и хорошим знаком.

«Прибит» ли футер к низу экрана? Очень практическая штука, которая показывает опыт кандидата.

Вот здесь не прибит, например. Но мы всё равно вас любим

Как написана сетка? Используются гриды или флексы? Если сетка кривая, то или человеку всё равно, или он ещё джун.

Как подключаются шрифты? Если как-то странно, например, в каждом font-face в качестве шрифтового семейства прописаны montserrat-thin, montserrat-bold вместо montserrat и указания жирности отдельным свойством, то это джун. Используются ли новые свойства вроде font-display или unicode-range? Они не обязательны, но если есть и они действительно там нужны, это плюс.

Используются ли препроцессоры? Это необязательно в тестовом задании, но упрощает разработку.

В JavaScript-коде

Эти требования, в основном, для мидлов. Джуну достаточно знаний HTML, CSS и аккуратной сборки проекта.

Есть ли хардкод? Код можно переиспользовать? Его можно прочитать? Проверьте, нет ли «лапши» и переменных типа a или b123. Простые алгоритмы, а не когда функция вызывает функцию функции. Не должно быть названий классов, которые отвечают за стили.

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

Какая версия языка используется? Есть ли единообразие? Есть ли такое, что весь проект на ES5, а потом блок на ES6? Обычно это показатель того, что какой-то блока кода писал кто-то другой.

Как разбит код? Это один огромный модуль (плохо) или есть деление на папки и скрипты, где 1 скрипт = 1 задача (хорошо)? Также не должно быть слишком много файлов, а вызов и обработка функции происходит в одном файле, а не в нескольких.

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

Как выбрать нормальный плагин. Например, мы ищем слайдер и гугл выдал несколько вариантов:

Slick требует jQuery, у нас в проекте он не используется. Вычеркиваем.

Смотрим документацию. У glide она подробная, у swiper тоже. Если бы её не было, мы бы вычеркнули один из пунктов.

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

Оба варианты хороши. Если бы последние обновления были 2-3 года назад, мы бы вычеркнули один из пунктов.

Далее смотрим на вес. glide

140kb — значит, одно очко за glide.

Пример тестового задания

Сверстать макет (тут у каждой компании будет своя ссылка на фигму).

Учебный проект «Барбершоп» из курса «HTML и CSS. Профессиональная вёрстка сайтов»

Шапка всегда закреплена, у неё белый фон;

Фильтр должен сортировать карточки;

Кнопка «сбросить фильтр» показывается после того, как выбрали что-нибудь;

Адаптив на своё усмотрение.

Нельзя использовать jQuery;

Возможно использование плагинов JavaScript;

Использование Gulp или Webpack для сборки будет преимуществом.

С таким заданием будет гораздо проще искать фронтендера — хоть джуна, хоть мидла.

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

Источник

Приглашаем на бесплатный марафон по вёрстке

С 12 августа по 15 сентября HTML Academy проводит бесплатный марафон по вёрстке сайтов. Тут есть сразу много плюсов. Во-первых, он бесплатный. Во-вторых, вы научитесь верстать сайты. Или станете верстать их ещё лучше.

Зачем участвовать: научитесь верстать, сверстаете целый всамделишный макет и сможете выиграть бесплатное обучение на курсе «HTML и CSS. Профессиональная вёрстка сайтов».

Почему марафон: потому что длится целый месяц, с 12 августа по 15 сентября. Практически полноценный курс, только без наставника. Для тех, кто давно хотел научиться верстать или вообще понять, стоит ли доверять онлайн-курсам по программированию.

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

Как выглядит марафон глазами участника

Читаю статьи и учебник

Работаю с макетом и делаю домашки

Смотрю, как наставник в прямом эфире рассказывает, что сделано не так

Хвастаюсь скриншотами с другими ребятами в чате

Загружаю сайт в интернет

Жду подведения итогов и приза

Не пугайтесь — сейчас объясним всё подробнее.

Что за тренажёры

Тренажёр — вот такая штука, в которой вы решаете задания по вёрстке, и сразу видно всё, что вы написали. Смотрите:

То есть тут сразу код, как в редакторе, потому что технически это и есть код в редакторе. Приятная новость — для участников марафона тренажёры будут бесплатными (даже те, за которые обычно нужно заплатить).

Работа над вёрсткой макета

Мы пришлём всем участникам макет в Figma, который нужно будет разобрать на кусочки, понять, как всё устроено, и пересобрать уже в виде готовой HTML-страницы.

Одна из работ участников прошлого марафона

Сразу может быть непонятно, как всё это сделать, но мы ведь и собираемся, чтобы разобраться (no pun intended). В итоге вы узнаете, как работать с графикой в Figma, писать доступную и семантическую разметку на HTML, стилизовать страницу с помощью CSS и делать сетки страниц на флексах и гридах.

Потом получившийся сайт загрузите в интернет и сможете положить в портфолио. Будет там первая работа. Мы уже за вас рады!

Статьи и учебник

Мы поделимся с участникам хорошим набором статей по HTML и CSS. Как раз для того, чтобы непонятности в вёрстке макета исчезли, а осталось только удовольствие от работы.

Прямые эфиры с наставниками

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

Чат сообщества и поддержка

Все участники получат доступ к чату, где не страшно задавать любые, даже глупые вопросы о вёрстке. Там и более опытные коллеги помогут, можно познакомиться с другими ребятами, чтобы не было одиноко и грустно разбираться с флексами и гридами (но вам и не будет).

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

Ведь марафон — облегчённая (и бесплатная) версия курса «HTML и CSS. Профессиональная вёрстка сайтов», которая рассчитана на начинающих.

Чем же хорош главный приз и почему стоит за него побороться? Вас там ждут:

Прямые эфиры с разбором теории и практики по каждому разделу. Эфиры ведут авторы курса.

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

Несколько проектов на выбор.

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

Полноценный учебник по вёрстке, который обновляется несколько раз в год, чтобы успевать за изменениями в индустрии.

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

Источник

HTML Academy

HTML Academy запись закреплена

Запускаем 2 сезон подкаста «Да как так-то?»

В первом выпуске нового сезона мы поговорили с Женей Казаковым. Три года назад он нашёл работу в Берлине и уехал из Санкт-Петербурга. Сейчас он работает фронтенд-разработчиком в компании Arrival. Он рассказал, почему выбрал Германию, как ему удалось найти там работу и перевезти семью, и сколько времени это всё заняло.
Показать полностью.

В середине выпуска ваш ждёт конкурс!

HTML Academy запись закреплена

В первой части про инструменты разработчика мы разобрались со вкладкой Elements, а теперь продолжаем знакомить вас с другими важными частями DevTools — вкладками Console, Sources и Network.

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

HTML Academy запись закреплена

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

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

Успевайте воспользоваться этой информацией — https://tml.io/5hlcg

HTML Academy запись закреплена

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

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

HTML Academy запись закреплена

Ещё не слушали первый выпуск второго сезона нашего подкаста? Да как так-то?

Новый сезон начали с истории Жени Казакова, фронтенд-разработчика из Санкт-Петербурга, который три года назад переехал в Берлин. В выпуске вы узнаете, почему он выбрал Германию, как ему удалось найти там работу и перевезти семью, и сколько времени это всё заняло.

HTML Academy запись закреплена

Вам будут доступны все части тренажёров: флексбоксы, анимации и трансформации, плавные переходы, градиенты, новейшие возможности современных спецификаций HTML, CSS и SVG. И не просто доступны, а доступны навсегда!

Акция продлится с 28 по 30 сентября включительно.
Подробности — https://tml.io/s2cf6

HTML Academy запись закреплена

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

Как сделать анимированное дерево, узнаете в статье — https://tml.io/w55hi

HTML Academy запись закреплена

Сегодня стартует курс «React. Разработка сложных клиентских приложений».

На курсе научимся использовать React для создания современных фронтенд–приложений.

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

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

Курс продлится с 27 сентября по 28 ноября 2021.

Переходите по ссылке, чтобы узнать подробнее — https://tml.io/fulff

Учебный проект будет общим для всех, над ним вы будете работать вместе с преподавателем на лайвах. Это будет музыкальная онлайн-игра со встроенным аудиоплеером.

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

Курс продлится с 27 сентября по 28 ноября 2021.

Источник

igorilyichyov / Испытание: CAT Academy 16-16

This comment has been minimized.

Copy link Quote reply

Liofan commented Feb 26, 2017

Почти самостоятельно выполнил, ошибка была в том что я первую картинку вставил в конец кода.
Подсмотрел и нашел ошибку спасибо.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

ВОЛШЕБНЫЕ ДВЕРИ (ассоциативный тест)

Представьте, что вы находитесь в слабо освещенном и загадочном коридоре. В полумраке вы идёте вперёд в поисках выхода. И вдруг перед вами возникают двери, раскрашенные в разные цвета.

1. Первая дверь зелёного цвета. Вы открываете её, за ней комната. Вы входите внутрь. Посмотрите по сторонам. Что это за комната? Опишите как она выглядит, что находится внутри. Как вы чувствуете себя, оказавшись в этой комнате? Запомните предметы, запомните свои мысли и вернитесь обратно в коридор.

2. Вторая дверь голубого цвета. Откройте ее. Оцените комнату за ней. Размеры комнаты, обстановку. Уютно ли вам здесь. Что вы чувствуете и думаете. Запомните и возвращайтесь, продолжая свой путь.

3. Третья дверь красного цвета. Входите. Что оказалось за дверью? Какая комната? Хочется ли вам остаться здесь? Какие чувства вас посещают внутри этой комнаты?

4. Последняя дверь черного цвета. Открыв ее, вы видите четвертую комнату. Зайдите в неё. Что это за место? Что вы видите. Что вы чувствуете, находясь здесь?

Теперь возвращайтесь в реальный мир и вспоминайте по порядку и подробно все увиденное вами. Описывая комнаты, обстановку и предметы интерьера, не забывайте, что главное — это ваши чувства. В какой комнате вам было удобнее всего? Какая комната вам понравилась больше? Была более уютной и красивой? А в какой, может быть, вам стало страшно и неприятно, и захотелось выйти как можно быстрее. Какая комната была светлая, а какая темная? Где царило тепло, а где беспорядок? Отметьте для себя любые важные детали. И переходите к интерпретации ответов.

1. В психологии зеленый цвет символизирует детство. Войдя в комнату за зеленой дверью — вы оказались в своем детстве. Что вы чувствовали при этом? Если вам было приятно и уютно, то значит и ваше детство было для вас приятным и светлым временем. Если вам хотелось надолго остаться в этой комнате, то, скорее всего, вы нередко в мыслях возвращаетесь в свое детство и, возможно, вам не хватает во взрослой жизни того теплого и душевного времени, заботы и участия со стороны других людей. Любые негативные мысли и чувства, возникшие в этой комнате, свидетельствуют о нерешенных детских проблемах, которые оказывают влияние на всю вашу дальнейшую жизнь. В норме, комната должна оказаться милой и уютной, но не должна вызывать особого желания в ней остаться, потому что любопытство побывать за другими дверями, должно оказаться сильнее.

2. Вторая комната за дверью голубого цвета символизирует ваше душевное состояние в настоящий момент, в эту самую минуту, когда вы проходите данный тест. Ваши ощущения расскажут о том, как вы чувствуете себя сейчас. Удобно или неудобно в этой комнате. Устраивает вас ваша настоящая жизненная ситуация или у вас присутствует желание изменить ее. В комнате был порядок или беспорядок — характеризует вас, как собранного, организованного человека или, наоборот, хаотичного и импульсивного. Комната пустая или наполнена самыми различными предметами? И т.д.

3. Третья дверь красного цвета и находящаяся за ней комната символизирует чувственную любовь и ваше отношении к ней. Большая просторная комната — вы склонны испытывать сильные чувства. Маленькое помещение — вы скованный, робкий в проявлении чувств, человек. Светлая — ваши любовные переживания лёгкие, воздушные, романтические. Тёмная — любовные чувства заставляют вас испытывать страдания. Уютная или неуютная — расскажет о том, комфортно ли вам в любви или, может быть, вы недавно пережили в любви разочарование. Яркие или тусклые цвета в комнате. Какие предметы: повседневные, обычные или эксклюзивные произведения искусства.

4. Черная дверь и комната за ней символизирует ваше отношение к профессиональной деятельности, к работе и делам. Что это была за комната? Был там порядок и лежало все на своих местах или комната была захламлена различными ненужными вещами? Хорошо ли вы ориентировались в этой комнате или совершенно растерялись? Просторная или маленькая — расскажет о возможностях применения ваших профессиональных знаний и
умений. Если вам было комфортно в этой комнате — значит и в профессиональной жизни, вы чувствуете себя безопасно и, похоже, находитесь на своем месте.

Консультации психолога в Сыктывкаре — тел. 8-909-124-96-88, Надежда Ясинская, Центр «АФИНА», ул. Советская, 12.

Источник