klierik

Большинство запросов на рецензию верстки, в разделе Обсуждение работ, в результате имеют одни и теже ответы. Более 90% будущих разработчиков на начальном этапе допускают одни и теже ошибки. Типичные ошибки Запрещено имя класса начинать с цифры, или с дефица после которого следует цифра (пруфлинк: eng рус) Рекомендации Ниже я привожу список самых распространенных ошибок. CSS Не использовать #id для описания стилей блока. Почему-то одна из самых часто встречаемых ошибок -- это использование идентификатора вместо класса, для описания силей блока. Не надо этого делать. Давай мы с тобой определимся раз и на всегда с двумя простыми решениями: .class-name -- имена класов используются для того что бы описать стили блока. В 99,9% случаев программист не будет менять установленные верстальщиком имена классов. #id -- идентификаторы используются в JavaScript для того что бы передать в скрипт элемент и использовать его. Программист имеет право изменять имя идентификатора на своё усмотрение. Возьми за правило не использовать в вёрстке #id. В 99,9% случаев ты сможешь обойтись классами. 0,01% остаётся на уникальные ситуации и вероятность того что тебе такая попадётся, сам понимаешь, очень мала. Давай человеко-понятные имена классам. Когда ты именуешь какой либо класс придерживайся простых рекомендаций: класс должен быть набран латиницей правильно: ".block-reviews" не правильно: ".блок-отзывы" имя класса должно объяснять для чего данный элемент правильно: ".link-checkout" не правильно: ".link-highlight" используй переводчик для поиска англоязычных терминов правильно: ".discount-coupon" не правильно: ".kupon-skidki" не используй сокращений. Пускай имя класса будет длинее, зато его можно прочитать правильно: ".available.in-stock", ".block-shopping-cart" не правильно: ".avail.instk", ".blk-shopCart" не начинай классы с цыфры не правильно: ".7-element" не создавай индексированные классы. Для уточнения конкретного блока используй термины. правильно: ".comment", ".comment.first", ".comment.last", ".comment.highlight" не правильно: ".comment-1", ".comment-2", ... , ".comment-N" так же данный вопрос детальнее раскрыт в этом посте не используй верхний регистр в именах классов, не используй "camelCase" правильно: ".block-layered-navigation" не правильно: ".blockLayeredNavigation" здесь я рассказываю почему не стоит использовать "camelCase". Там же присутвует альтернативная точка зрения. Не описывай стили внутри аттрибута style="". Все стили, за некоторыми редкими исключениями, которые касаются элемента должны быть описаны в CSS файле. Давать всем элементам в коде уникальные имена классов(для непосредственного описания стилей каждого элемента на странице) избыточно. Но, если тебе попался сложный проэкт, который требует такого похода, то рекомендую перед тем как приступить к работе ознакомится с методологией БЭМ и понять как, в данном случае, правильно именовать классы. не указывай размеры картинок в стилях, для этого есть атрибуты тега <img> HTML Не используй комментарии в коде (<!-- comment -->). Лучше написать чистый код и дать ему человеко-понятные классы, нежели плодить комментарии, тем более на русском языке. Не надо везде где попало использовать тег <p> -- используй <div> или <span>. Тег <p> определяет текстовый абзац, а не часть разметки. Использование тега <nav> -- если тебе надо создать одноуровневое меню, то вместо иерархии "nav>ul>li>a" достаточно (и правильнее) использовать "nav>a" Логотип и тег <h1>. Начну с того что по умолчанию не обязательно помещать логотип в заголовок. Единственное где это уместно -- на страницах без заголовка, на пример -- "Главная страница". Такие страницы, как правило не имеют заголовка и содержат только промо контент. Но надо учесть что данный вопрос, все таки, по части SEO, т.е. -- индивидуален для каждого сайта. Приёмы Если надо вывести список данных с маркером, не надо генерировать маркер на стороне сервера. Вместо того что бы выводить: <li>- Возможность уточнять вопрос;</li> <li>- Моментальная публикация;</li> <li>- Гарантия получения ответа;</li> лучше использовать псевдо-элементы. Например: li:before { display: inline-block; vertical-align: middle; content: "-"; } На заметку Не обязательно применять свойство "display: block" в паре с "float: left" и/или "position: absolute (fixed)" -- это избыточно. Подробнее в этом посте Псевдо-элементы ":before" и ":after" по умолчанию отображаются как "display: inline;" Ресурсы, на которые стоит обратить внимание В первую очередь прочитай эту тему до конца, так как другие участники любезно делятся с тобой опытом. Гражданин с забавным ником Sorax Его канал на youtube: http://www.youtube.com/user/ArtSorax Его группа с vk: https://vk.com/soraxcss Системы контроля версий: git http://githowto.com/ , svn http://svnhowto.com/ , mercurial http://mkharitonov.net/hg/help/ru/ http://webfont.ru/ -- шикарный проект со шрифтами от товарища Softlink Методологиея БЭМ -- была разработана в Яндексе. Саму методологию в полном объеме использовать есть смысл на высоконагруженных проектах с большим трафиком, но из неё можно подчерпнуть массу ценной информации и использовать в проектах средней и низкой сложности. Рекомендую ознакомится. Ресурсы, которые не рекомендуются для обучения http://evgeniypopov.com/dvd.html - видео курсы от Евгения Попова http://2develop.ru/videokurs - видео курсы от Дмитрия Валака http://srs.myrusakov.ru/list Придерживаться или нет данных рекомендаций ложится на плечи разработчика. Если есть чем дополнить - предлагайте, так как список не окончен.

во-первых, работаетпо-разному во-вторых, применения стилей через #ID - зло! Завтра программист возьмет твою верстку, впишет в неё свои #id и накроется вся твоя работа. в подписи ссылка - начни от туда

.wrapper имеет relative цвета позиционирует через absolute .content с zIndex больше чем у цветов распологается по-центру с шириной и margin:auto

имя домена можно писать по-человечески

ах вот оно как... интереснок как ты себе такое представляешь? ну допустим у слоя будет граиент, и допустим высчитать цвет получится через JS, потом заполняем SVG форму данным цветом. это более менее реально, так как цвет можно попробовывать узнать из .css() но если требуется стрелочка произвольной ширины и высоты, тогда требуется написать скрипт, который будет рисовать эту стрелочку через SVG, потом закрашивать её выше цветом, который узнали выше.

как вариант: если эта "стрелочка" есть в векторе, то можно использовать http://icomoon.io/app/#/select размером стрелочки можно будет упровлять через fz: (увеличение пропорциональное)

@npofopr, согласен полностью.

у меня при любой ширине экрана высота картинок одинаковая. что я делаю не так?

да, вполне. но у всех картинок одинаковая высота...

поясни почему? какая разница между тем что бы сбросить дефолтные стили или стили бустрапа, елси их все равно надо перезаписать? кстати, никто не запрещает взять из бустрапа только то что надо, откинув лишее

Тогда не надо заниматся этим. От работы надо получать удовольствие. Я начал диалог с того что не надо стремится и добиватся быть человеком-оркестром, так как этот путь не сделает разработчика -- специалистом. Я работаю 8-12-14 часов в сутки, порой бывает что и без выходных. Средняя з\п в Киеве для верстальщика: http://goo.gl/R9DIJH Значит, скорее всего у тебя такой период в жизни -- тяжелый. Очень надеюсь что наступивший Новый Год принесёт тебе дорогостоющие проекты, личностный и профессиональный рост

Ну так откуда нам знать где ты допустила ошибку? Читай в подписи как задать правильно вопрос, а там будем разбиратся что да как...

бери бустрап и делай.

ну смотри, ты хочешь растянуть по высоте контент. растянуть на 100% высоты можно лишь в том случае, когда родитель имеет заданую физическую высоту. то что у тебя div с diaply:table; совершенно не имеет значения. или менять подход, иди вешать на .table-oil .oil-types фиксированную высоту

У тебя были бы другие заказы и другие заказчики. Вот как. Имхо, очень не правильно и пагубно говорить о себе как о плохом верстальщике (IT-разработчике), ибо тем самым ты и притягиваешь все тоже самое что тебе не нравится сейчас. Не смотря на то что любой опыт бесценен, работу выбирает человек сам. Сейчас работу ищешь ты, но намного приятнее когда работа ищет тебя

а что если на .catalog-item.active повесить не border:, а вместо этого растянуть абсолютный :before с бордером? Задать ему z-index: 1; Ну а потом для .incut relative + z-index: 2

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

> Я совершенно уверена, что вы врете намного больше меня, когда ходите на работу, общаетесь с работодателем при трудоустройстве, рассказывая то, что он хочет услышать, а не то, что вы хотите сказать и что действительно думаете, улыбаясь начальнику, когда хочется послать его, преувеличивая свои положительные качества в резюме, высасывая их из пальца, а зачастую являющиеся просто ложью. Ммм, та нет, ты ошибаешся У меня отличный начальник, который состоит в группе разработчиков и общение с ним идет напрямую на равне. И резюме у меня нет, только аккаунт на linkedIn чего мне хватает с головой, на данный момент. Месяца 2,5 назад я ходил на собеседование (я люблю ходить на них что бы познакомится), и когда меня спросили ищу ли я работу -- я ответил что нет, не ищу. Тогда меня спросили зачем я пришел -- на что я ответил "хочу посмотреть на стул за 1000 евро на которых сидят ваши разработчики" Зачем вообще врять на собеседовании, если можно провести хорошо время и познакомится с интересными людьми? Понравилось, пришел работать, нет -- ну так найдется другой работодатель :)

На фрилансе года 3 назад. Сейчас только прямые контакты. Время, по сути, не имеет значения, так как ты сталкиваешься с не меньшим кол-вом трудностей в работе. Если 80% заказов это фидбек, значит у тебя уже есть готовое рабочее решение. Скачанный php скрипт и написанынй jQ валидатор. Мы уходим несколько от сути вопроса: если ты оркестр -- то ты как все. Ты ничем не отличаешься от своего конкурента. Только не пойми меня неправильно. Я не говорю о том что не надо знать смежных технологий! На самом деле вокруг верстки крутится огромное кол-во всего и вся, и иметь представление о них и понимание зачем они надо даёт существенное преимущество над остальными. Но профиль должен оставатся одним, имхо. Если ты верстаешь, и доростаешь до того уровня, когда 99% поставленных задач ты решаеш в уме, то очень полезно расширять знания тем же JS, adaptive, mobile и тому подоное. Каждый начинающий, я в том числе, думает что чем больше технологий он знает тем круче -- ошибочно. Тут что-то одно бы изучить и "плавать как рыба в воде" надо еще суметь. Бывает такое что разработчики мнят себя профи, а не могу расопложить 3 div'а в ряд, что бы они занимали в суме всё пространство, и при этом каждый из них резина

вот: http://jsfiddle.net/klierik/sg5gV/4/ до конца не делал, но для примера хватит. в левой колонке бордеры не обнуляются, а "закрашиваются" в цвет фона. в верушке все по аналогии. а вот на беуюй линию, в самом низу таблицы, я предлогаю забить. ее можно сделать если повесить на таблицу сплошной белый бордер справа и внизу, а потом закрасить пространство которое не требуется, но оно того не стоит.

нет, не так. Не все ячейки имеют видимую границу. Сейчас попробую на скорую руку накидать...

Я начал как фрилансер. Потом работал в офисе, потом ушел работать во фриланс, потом опять в офисе, потом опять на фрилансе. Т.е. вкусил обе стороны медали, так что компетентен в данном вопросе Я никогда не занимался PHP. Более того, единственное что я делал по jQ -- установка и настройка плагинов (что, кстати, тоже влияет на стоимость). Скрипты я не разрабатывал по одной просто причине -- я не имел никакого желания программировать. У меня и сейчас есть фриланс заказы, а заказчики приходят по рекомендациям. Но при это на сегодняшний день я все так же не пишу PHP, не занимаюсь серверной частью чем либо что с этим связанно. Моё дело -- вёрстка, ибо я верстальщик. Не берусб за то чего не знаю и сразу об этом говорю. Так что же я делаю не так?

покажи скрин макета всей таблицы повторюсь еще раз: все(!) ячейуки таблицы должны или иметь или не иметь border

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

затем что в таком случае это просто ложь. начинать свой путь со лжи как-то не совсем корректно. если это раздел Портфолио, на личном сайте, то это долно быть указанно. если же разговор идет и ситуации, когда исполнитель высылает в архиве макет (или ссылку на него) то этот момент можно вполне опустить. а не надо представлять. это не входит в рамки твоих задач, по этому ты не обязанна это выполнять. тем более в ТЗ, скорее всего, это описанно не было. вот почему новички считают что они обязанны выполнять работу за 10-ых? иметь представление о том как работает серверная сторона это не тоже самое что писать сервекрные скрипты.