Leaderboard

Привет. Скажу сразу -- в тексте будут опечатки так как задание писалось на планшете. Я не заморачивался поверкой текста и писал все ниже изложенное на коленке. Все написано, так скзать, на одном дыхании. Но если ты найдешь ошибку и укажешь на нее я с внесу правки. Для чего это я написал это задание? Большинство заданий тут представленных направлены на самых что ни есть новичков. Ну или тех разработчиков которые познали хотя бы азы в верстке. В итоге сверстав пару макетов новоиспеченный верстальщик идет или на фриланс или в мелкую компанию и верстает такие же по уровню сложности сайты. Как правило это хомяки, не большие промо сайты, ну или в крайнем случае что-то похожее на каталоги/интернет магазины. Имхо, рост в сфере верстальщика это сложный и тернистый путь. Он возможен только при условии когда ты берешся за работу, которая выше уровнем твоих знаний. Так вот, данное задание направленно тем, кто не знает как его реализовать -- для того что бы его выполнение подняло уровень знаний. Небольшое отступление. В кратце -- что из себя будет представлять задание. Я постараюсь изложить все в форме ТЗ но, с уточнениями по организации дерева папок, описанием работы тех или иных блоков и/или элементов, подскажу не очевидные проблемы которые могут возникнуть в будущем, и наверно много чего о чем в данный момент не вспомню. Или другими словами -- ТЗ от разработчика с рекомандициями. Да бы не превращать топик в простыню я спрячу все в спойлер.

Как-то меня впечатлило, прикольно так, нарисовала шары. http://jsfiddle.net/JcUrt/

Открываешь сайт вакансий и смотришь, какие требования предъявляются к junior программисту php. Восполняешь пробелы. Смотреть желательно прямые вакансии, а не от кадровых агентств. Тогда требования более менее адекватные будут.

http://goo.gl/e87MRU

А мне очень-очень-очень понравилась открытка №8. Я бы на нее бесконечно смотрела)))) Большое спасибо организаторам, участникам и всем, кто голосовал!!!! Всех с наступающим Новым годом!!!

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

http://stackoverflow.com/questions/17504702/adjust-jquery-knob-size-dynamically-to-the-layout

Лучше взять готовое решение и доработать перерисовку при масштабировании. http://anthonyterrien.com/knob/

Последнее время в основном через fsz0. А в исходном примере у контейнера фактическая ширина 978px, а каждый блок занимает 309 + 2*9 = 327px. Закономерно, что уместить 3 блока (981px в сумме) в строку можно лишь благодаря небольшому нахлесту, который и получается в Хроме 25+ при одновременном letter-spacing и word-spacing.

Всегда думал что в ИТ тусовке вышка не так ценится как реальные знание и опыт, разве я не прав?

border-image + JS?

http://jsfiddle.net/Hr9Ht/

использовать svg http://jsfiddle.net/2knMx/5/

обязательно ООП изучай. без него будешь просто негром

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

это не метод: http://habrahabr.ru/post/137656/

Ну дня 2 я над ним посижу как минимум. Потому что макет ололо, и с первого захода может не получиться. А мы картинку выпрямим. Кстати, посмотрел, у IE есть какие-то фильтры для matrix-трансформации. Мой вам совет: найдите в интернетах как минимум 3 самых сложных, на ваш взгляд, макета, сверстайте их и показывайте их, когда отправляете резюме (ну и предварительно тут на форуме в специальном разделе попросить окинуть вашу вёрстку взглядом и спросить что не так). Если будут говорить вам выполнить тестовое задание на вёрстку, то говорите, что вы не будете верстать целый макет с нуля, спросите в чём именно у них возник вопрос по вёрстке, попросите дать задание именно по тому моменту, где у них возник вопрос. Отказываются идти навстречу - фак офф, stupid company, найдём ту, где люди работают поадекватнее. Я тоже поначалу делал какие-то макеты тестовые, потом порядком подзадолбался и потом уже просто показывал свёрстанные макеты. Киньте в личку.

сейчас попробуй http://jsfiddle.net/SKmvZ/1/

Радиоволны Время Часы

Поучаствую, пожалуй 1.Сделать диаграмму. Условия: чтобы работало в самых свежих версиях браузеров, без картинок. Реализация http://codepen.io/Softlink/full/lDAbt 2. Сделать лоадер загрузки Условия: последние версии браузеров, зацикленная анимация, без картинок Реализация http://codepen.io/Softlink/full/mHkpq Оба решения применялись\применяются в действующем проекте. Бонус http://codepen.io/Softlink/full/Cjygm (делал просто так)

Спираль Задание: Изобразить спираль Решение http://jsbin.com/OBEpABab/1/edit 3D- трансформации Задание: Дана разметка <div class="a"> <div class="red"> red </div> <div class="orange"> orange </div> <div class="yellow"> yellow </div> <div class="green"> green </div> </div> Используя 3D - трансформации оформить ее в виде такого изображения Решение http://jsbin.com/UZodIBEt/1/edit Креативный div Задание: Дан один элемент div <div></div> Нужно оформить его таким образом символ коня ♘ Решение http://jsbin.com/aRafOciH/1/edit Аккордеон Задание: Создать аккордеон с переключающимися вкладками без использования JavaScript Решение http://jsbin.com/eyAxIha/1/edit (Для переключения вкладок используются скрытые чекбоксы. Подробнее про чекбокс-хак здесь http://tympanus.net/codrops/2012/09/13/button-switches-with-checkboxes-and-css3-fanciness/ ) Вложенные блоки Задание: Даны 5 вложенных блоков с текстом <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span> <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span> <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span> <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span> <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span> </div></div></div></div></div> Нужно оформить их таким образом Решение http://jsbin.com/agikesEc/1/edit Повернутый заголовок Задание: На основании следующей разметки <header> <h1>Blog name</h1> <h2>blog description</h2> <h3>Tel: 7-777-77-77</h3> <h4><span>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</span></h4> </header> нужно изобразить такой заголовок Решение http://jsbin.com/UyaBejU/1/edit

Галстук Раскрашенное поле Крестики-нолики Перевернутая таблица Списки Нужно оформить их следующим образом: Решение: http://jsbin.com/epAxiwe/4/edit Снеговик Форма входа Нужно оформить ее таким образом Социальные иконки: http://htmlbook.ru/files/social_icons.png Решение: http://jsbin.com/UVUzugu/1/edit Выравнивание блоков Цветок Диагональный текст Нужно выстроить текст в блоках по диагонали Решение http://jsbin.com/IJiwoJoP/1/edit

Вращающаяся рамка Задание: Сделать для изображения рамку в форме круга, которая будет вращаться при наведении курсора мыши. HTML: <a href="#" class="circle"> <img src="picture.jpg" alt=""></a>CSS: С помощью псевдоэлемента :after, свойства animation и правила @keyframes. Браузеры: Последние версии Firefox, Chrome(Opera) и IE10+ Решение: http://jsfiddle.net/96PfL/10/embedded/result/ http://jsfiddle.net/96PfL/10/

Смотрел как там зделано через <div id="bg-wrap"><img src="/wp-content/themes/skinafrika/images/bg.jpg" alt="#" />->попробовал-> неполучилось-> Сделал->body {background:url(КАРТИНКА) center top fixed no-repeat;}->неполучилось->написал сюда