Main page

Тестовое задание для верстальщика в Яндекс

Все элементы верстки должны быть очень гибкими к окружающему пространству, должны уметь располагаться на любом фоне и при желании легко менять свой «скин».

  1. Написать и свестрать небольшой текст на важную тему, связанную с профессией.

    Систематизация знаний разработчика интерфейсов

    Есть много книг/ресурсов по профессии, среди которых я бы выделил следующие:

    Все, что отдаем клиенту

    html
    css
    javascript
    графика

    общее

    инструменты

    intelliJIDEA
    • «Про вёрстку в IntelliJIDEA». Вадим Макишвили. 1,  2
    photoshop
    • «С ножом против паровоза». Вадим Макеев. 1,  2,  3,  4,  pdf

  2. Сверстать контрол оценки и показа рейтинга

  3. Сверстать прогресс-бар

    Запустить демострацию Кнопка

  4. Сверстать кнопку

    Текст на строке и Кнопка

    Отправка формы без js:

    Кнопка

    Варианты кнопки с вложенным input:

    • input {display:none} не отправит форму:    Кнопка

    • input не передаст родителю :focus и :active*:    Кнопка

      * а в webkit input и button не получат фокуса от мышки

    • input не передаст родителю webkit передает!* :) :focus и :active:    Кнопка

      * только в хроме :( Зато потомку передает и в сафари и в хроме, ниже вариант использования:

    • Варианты с оберткой

      • вариант с ‹button›

      • вариант с ‹a›

        Кнопка

  5. Сверстать список из иконок

    • chrome
      chrome
    • firefox
      firefox
    • opera
      opera
    • safari
      safari
    • internet explorer
      internet
      explorer
    • chrome
      chrome
    • firefox
      firefox
    • opera
      opera
    • safari
      safari
    • internet explorer
      internet
      explorer

  6. Сверстать текст

    Тема: «Сюжетный анапест: основные моменты»

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

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

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

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

Кроссбраузерность в заданиях

  1. Старый добрый plain old semantic html, максимальная поддержка :).

  2. Звездочки в png24 (ie7+) без фильров для ie6 (скорость), inline-block (firefox 3+, хак ie6-7).

  3. linear-gradient: IE10, Cr13, Op11, Sa5, FF7, для остальных картинка

    border-radius: IE9+, Cr1.0+, Op10.5, Sa3.0+, FF1.0+, для остальных уголки не скруглены

    box-shadow: IE9+, Cr1.0+, Op10.5, Sa3.0+, FF3.5+, для ie6-7: border. остальные TODO?

  4. ie6+ (Двойные классы ie6)

  5. png24 (ie7+), без фильров для ie6 (скорость), inline-block (firefox 3+, хак ie6-7)

  6. @font-face, IE6+, Cr2.0+, Op9.0, Sa4.0+, FF3.5+

    Кастомные маркеры списка -- там, где поддерживается :before, в ie6-7 list-style: square

Репозиторий на github