Leaderboard

Большинство запросов на рецензию верстки, в разделе Обсуждение работ, в результате имеют одни и теже ответы. Более 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 Придерживаться или нет данных рекомендаций ложится на плечи разработчика. Если есть чем дополнить - предлагайте, так как список не окончен.

Большое спасибо)! Я исправил и все получилось)

Я за то чтобы на этом форуме не было, извините, срача, не солидно это, господа

//offtop Это как, хочу лучше погрузиться в создание лендингов, что мне надо знать в html?

Здравствуйте! Я учусь в 8 классе. В 9 классе у нас будет по ИВТ пару тем связанных с html. Меня это заинтересовало и я решил изучить html. Мне понравилось) Я начал делать страницы и пока обходился без кнопок. Но вот решил сделать "Анкета гостя сайта". Сделал всё по учебнику 9-го класса 2004 года автор: Угринович. Сделал АБСОЛЮТНО всё так, как там показано, но вместо кнопки поле, в котором написано "отправить". Вот можете сами попробовать "нажать" на эту кнопку http://normylik.cf/faq/anketa.html (все ссылки указанные на сайт не действительны, так как вместо домена .ru купил другой для сайта, который я создал месяц назад с помошью движка на пхп). Спасибо.

Я вижу, что некоторые люди с чрезмерным самомнением себя считают очень умными, и видимо очень качественными специалистами, что чувствуют себя вправе указывать другим, что те как специалисты неок и им не стоит заниматься этим делом, заодно указывая им на их место в этой жизни - вроде дворника или домохозяйки. Это выглядит очень невежливо и некрасиво. Как минимум это просто выпуск газа из одного места в окружающее пространство, лишь портящее воздух вокруг, но не несящее в себе никакого созидательного и конструктивного эффекта. Просто кому-то видимо хочется испортить настроение другим лишь потому, что у них у самих что-то не получается в этой жизни или они просто не задумываются над своими поступками. Ладно, это было лирическое отступление. Ничего не понимая в css и html почти невозможно сделать осмысленный и работающий сайт в визуальном редакторе (личный опыт. Ты что-то лепишь - один элемент к другому, но не понимаешь. как сделать даже легкую динамику или не представляешь как происходит взаимодействие с пользователем). А чтобы его этот редактор освоить на качественном уровне - есть целые книжки в тысячи страниц. И тогда возникает вопрос - а зачем осваивать редактор и читать эти 1000 страниц, когда можно читать более полезные книги о создании сайтов напрямую в обычном текстовом редакторе? Ведь усилий будет затрачено также достаточно много. Однако, если ты начнешь изучать создание сайтов по нормальным книгом - ты поймешь, что визуальный редактор по сути не нужен и он не увеличивает скорость создания сайта, а в конце все его фишки (вставить то се через меню как в фотошопе) - будут даже мешать, ведь быстрее написать ul>li*10>img+p{lorem} и развернуть за 5 секунд - чем минут 5 вставлять разные теги через панель инструментов, потом через разные поля давать им осмысленными имена итп.

Зацените, я тоже умею пользоваться нотпадом!

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

Может на одном шрифт установлен?

наверное имеется ввиду сео трафик?

Поддерживаю! Ибо: 1.1. Основной целью форума является обмен опытом между его участниками. Хоть правила форума (неплохо было бы, если бы их читали и придерживались) не запрещают "срача" в разделе флейм, но автор темы наверняка уже сам не рад, что задал вопрос на этом ресурсе. Хотя... В принципе, он уже получил довольно развернутый ответ на все свои вопросы. Но лично я считаю, что не "срач", а вежливость и взаимное уважение - неотъемлемая часть конструктивного и продуктивного диалога, в том числе и на фрилансе Upcoming, удачи! И... добро пожаловать .

Никак

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

Всего 2 отзыва, потому что потом система отзывов буквально через пару месяцев изменилась, и получить их было уже не так просто. И начинала я не с 4, а с 0$, просто искала интересные задачи за отзыв или портфолио. У меня есть реальный опыт фриланса, только в отличии от остальных, первый же серьезный заказчик после единственного выполненного задания стал давать мне новые проекты снова и снова. Меня стали находить через этот форум, фриланс-биржи, через людей, которым я делала верстку с предложениями о работе. Для меня фриланс стал вроде "стартовой площадки" для набора постоянных заказчиков, разовые подработки перерастали в постоянное сотрудничество. Потом предложили удаленку на выгодных для меня условиях в интересный проект. Главное - начать Если у меня не было опыта работы на фрилансе, это не значит, что у меня не было возможности подняться с нуля. Я не играю в компьютерные игры, не зависаю на форумах, не привыкла жаловаться на тяжёлую жизнь, а работаю, всё время учусь и получаю удовольствие от процесса. И я знала, что для перехода во фриланс потребуется некоторое время, не была уверена в том, что у меня что-то получится, поэтому переходила постепенно, имея постоянный минимальный и не связанный с ИТ-отраслью источник дохода. Ни с одним из своих заказчиков я не была знакома до работы на фрилансе. Можете считать, что мне просто повезло, но лично я так не думаю. Zverushka, ни мой возраст, ни мой опыт, ни, тем более, мой доход не имеют на этом форуме никакого значения. Вам уже намекнули об этом в другой теме, у нас так не принято. P.S. А вы не в курсе, что имена собственные и имена нарицательные пишут с большой буквы?

не 2400 ) за почасовую работу я беру 10$/час Потому что я расчитывал на то что, данную задачу сделаю за пол часа. Хоть и отводилось один день. За свой, как я считаю промах, я не возьму лишние деньги. И тем более не брошу начатую работу из за трудностей. По сути это мой косяк - взялся за работу реально не осознав сложности данного модуля(я себя универсальным специалистом считаю , поэтому отступать и просить больше денег религия не позволяет ) Собственно не жалею. опыт получил Если так судить то нужно было по хорошему часть денег вернуть первому заказчику. Так как с заданием справился очень быстро (по сути те два часа убил на поиск нужного файла во всей CMS).

Пара маленьких уточнений: 1) высота пятого айфона 1136 пикселей (экранных), 2) но в CSS-пикселях его размер считается равным 320•568 (один CSS-пиксель рисуется квадратиком 2•2 экранных, для четкости текста), 3) при этом сайт по умолчанию рисуется, как отображенный на экране шириной 980 пкс и затем отмасштабированный до 320. Это как раз можно изменить с помощью meta viewport. Очень подробно тема раскрыта здесь: http://www.quirksmode.org/mobile/viewports2.html

Задайте overflow: hidden для .main.

Я бы никому и никогда не посоветовал использовать Дримвивер. Простой редактор предлагают, просто потому что так лучше будет усваиваться материал. Это потенциально сделает вас универсальнее. Вы не растеряетесь в критической ситуации, когда срочно нужно пофиксить код, а в руках только мобильник с примитивным редактором (утрированно но все же. хотя у меня разок такое было). Я бы советовал использовать Sublime Text 2\3 или Notepad++. Пускай даже с включенным автокомплитом, но не читирить и выбирать из него, а просто подсматривать если что-то подзабыл, как ни странно, но это существенно ускоряет обучение, при правильном подходе. Все что вы изучаете это никак не слитое время в унитаз, так что все в порядке. Успехов

offtop: Я теперь и не знаю что делать, дать плюсик за бдительность или предупреждение за распространение порнографии От меня ресурсы на которые стоит подписаться: Гражданин с забавным ником Sorax (почему-то мне напоминает название средства от похмелья. Sorax, не в обиду ) Его канал на youtube: http://www.youtube.com/user/ArtSorax Его группа с vk: https://vk.com/soraxcss Поиграться шрифтами можно у товарища Softlink в его шикарном проекте http://webfont.ru/ Куда мы без СКВ: git http://githowto.com/ , svn http://svnhowto.com/ , mercurial http://mkharitonov.net/hg/help/ru/

http://htmlforum.ru/index.php?showtopic=47326

врушка зверушка по себе людей не судят Лена, будь добрее) на обмане далеко не уедешь сама себя поставила в такое положение ну да. Я об этом писал выше. А вы думали медом намазано на фрилансе? адекватный человек ищет то, что ему интересно, не "где делать меньше и получать больше" мы уже заждались на самом деле у зверушки батхерт, обусловленный одним из следующих факторов: - не удалось завалить боса в вов - пмс - не задался день я так сразу и понял: >1000 сообщений на форуме. Перестань врать сама себе) эксклюзивные разоблачения. Только на нашем канале) а закончить я бы хотел словами "возлюби ближнего своего"

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

Довольно странные рассуждения для человека, которому на почту не приходит НИ-ЧЕ-ГО. Всё-таки советую иногда прислушиваться к мнению других людей. Лично я согласна с klierik'ом: От себя добавлю - если ты готова выполнять работу за десятерых за копейки, ты и будешь её выполнять. Научитесь, в конце-концов уважать свой труд и время. Извини, конечно, но после этой цитаты твоя ценность как специалиста (лично для меня) резко уменьшается.

Охоспаде какой капец две темы, там и там бессодержательное нытьё про одно и то же, может тебе не надо этим заниматься? Вот на делай: http://htmlforum.ru/index.php?showtopic=14398 Пока не сверстаешь не возвращайся. Если хочешь рискни сверстать это в дривмивере в визуальном редакторе, тогда узнаешь ответ на свой вопрос в сабже, и вообще когда хоть что-то начнёшь делать перестанешь создавать темы с такими вопросами, а пока да 40 часов в унитаз, но я бы об этом не беспокоился.. кхм, тут стоит про жизнь вообще подумать, ну да ладно, удачи. Пожалуйста, всегда рад помочь.

Дополнен тег <i> для генерирующего содержимого, эти иконки заданные специальным шрифтом "Font Awesome", их лучше использовать, так как при масштабирование качество не ухудшается. Поэтому используется <i>, как: i: before { content: \f024; «\f024» - (код иконки) } Это правило вставки таких иконок. Спрайты затрачивают больше времени и они менее гибкие. С обертыванием списков в div соглашаюсь, Но после того как сделал эту страницу, то понял, что так делать не надо. Просмотрите в макет, я использовал пустой div, только для очистки потока в шапке, между верхом и нижним меню А так я везде использовал псевдоэлемент «:after» Почему ячейка выпадает, я сам понять не могу Спасибо за ответ!

Иди [censored] ———- 2.2. Нецензурные выражения, в том числе завуалированные.2.3. Оскорбления участников форума.Правила форума Получаешь устное предупреждение, в следующий раз РО.