Изучаем ошибки при верстке сайтов
От автора: по итогам собеседования, кандидату на должность верстальщика было предложено сверстать несложный макет сайта, в качестве тестового задания. Получив готовую верстку и проанализировав ее, я понял, что у собеседуемого практически те же проблемы, о которых я говорил в прошлом видео. При этом, когда мы обсуждали его верстку, у меня сложилось впечатление, что он даже не понимает, почему половина его верстки содержит ошибки и достаточно грубые.
В этом видео уроке я прокомментирую ошибки, допущенные при верстке макета, и покажу, как их можно исправить. Укажу на не очевидные ошибки, покажу на примерах, почему все-таки это является грубейшей ошибкой, и покажу основные правила верстки сайтов. Расскажу, что с версткой происходит далее, и что нужно учитывать, чтобы не иметь проблем с сайтом в будущем при его реальном функционирование.
На этом видеовыпуск об основных правилах верстки сайтов окончен, надеюсь вам понравилось!
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнее
Практика HTML5 и CSS3 с нуля до результата!
Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3
Получить
Андрей, вам надо улучшать речь (паузы, э-э-э, допустим, ну да бог с ним, исходную/исправленную, скоко, это вот этот, это вот такая вот вещь получается, да?, и т.п.) — из-за этого очень тяжело воспринимать ваши мысли.
Урок необходимо сократить до 10-15 минут. Я слушаю 11 минут и очень мало реальной информации за это время.
У вас очень приятный голос, надо всего лишь поработать над речью.
исходную/исправленную — есть исходная верстка, а есть исправленная — что не понравилось? Если я говорю «вот этот блок», «данный блок», то выделяю его цветом (на мой взгляд так лучше воспринимается и быстрее пояснить можно про какой конкретно блок идет речь).
Для таких как вы специально на первых минутах обозначил, что самые интересные, неочевидные и грубые ошибки будут при рассмотрении области основного контента страницы.
А то что часовой урок можно минут в 10-15 свернуть — это даже рассмешило. Имхо можно было бы вступление минуты на 2-3 сократить.
Андрей, основной момент — это плавность речи. Пока многовато слов-паразитов, пауз и т.п. — все это сбивает слушателя с мысли. Вы должны вести своего слушателя как по рельсам, плавно, с одной скоростью, без пауз, чтобы нельзя было отрваться. Речь должна быть безупречна.
Вы, главное, не обижайтесь, цель — помочь вам взглянуть на себя со стороны. Похвалить вас и без меня похвалят
, а вам, думаю, не похвалы нужны.
Кстати, сравните с Шантариным — тот говорит, будто масло намазывает
И слово «парень» замените, ну что же это такое?
Кандидат/соискатель/интервьюируемый, но не «парень» же! 
Это выделяется, да, но вносит «деревенские» коннотации в текст.
Удачи, надеюсь, воспримите все конструктивно и без обид.
Адекватную критику мы всегда воспринимаем нормально и без обид. Поправим.
Не вёрстка, а тихий ужас… Текст прописными, повторяющиеся блоки с id, картинки положенные фоном (единственно, думаю что, логотип всё же можно положить фоном для ссылки), заданная высота блоков (вообще в дрожь бросила), div’ная лихорадка, «Пример страницы на HTML5» практически без него самого. Проще такую «вёрстку» не исправлять, а сверстать заново, быстрее получится.
Спасибо за урок было интересно.
P.S. Не могли бы вы дать ссылки на уроки о которых говорите в видео.
Поэтому я и переверстал.))
Вот урок по подсказкам в полях форм
Андрей, а есть возможность брать у вас какие-то макеты верстать, чтобы вы оценивали качество?
можно на нашем форуме выкладывать свои работы на оценку. Такое на форуме уже делали.
Ссылочка на форум:
Форум — это хорошо, а где именно?
В любой подходящей по теме ветке, например Кодинг и верстка.
Спасибо!!!
Несколько необычный и, довольно удачный формат урока. По сложившейся практике специалист дает пошаговые объяснения, которые ученик затем повторяет. Здесь сделан акцент на самостоятельную работу. Дан исходный вариант, дан конечный. Указаны ошибки. Все остальное – отдано на откуп пользователю. Кто хочет научиться. Должен творчески переработать приложенные материалы и самостоятельно добиться нужного результата. Мне, например, очень понравилось.
Отдельное спасибо тому, кто создал начальный вариант. Создать косяки – это тоже искусство. Без него не было бы этого замечательно урока.
Говорю честно, эти косяки не специально были сделаны для урока. Все ошибки допустил реальный человек в реальной ситуации.
А если еще и показывать и рассказывать до каждой мелочи, как ошибки исправить, то это урок был бы часа на 4-5. Поэтому я и выбрал такой формат. И я рад, что он оказался удачным))
А как быть с блоком товаров при резиновой верстке? Чтобы блоки не разъезжались при разном расширении монитора?
Вариантов может быть несколько. Не совсем понятно, что вы имеете ввиду когда говорите «чтобы блоки не разъезжались». В любом случае все сводится к заданию ширины и отступов в процентах. Если есть конкретный вопрос, задавайте его на нашем форуме.
Будут ли какие-нибудь курсы по профессиональной верстке?
Буквально через 14 дней, Вы получите на свой email ссылку на такой курс.
Приоткрою тайну — называться он будет «Практика резиновой верстки».
Следите за нашей рассылкой, и Вы получите всю подробную информацию.
Здравствуйте.
Вот у вас все Вордпрес , а по Джумла чЁ нить будет?
Будет! Но не совсем скоро.
Уроки у вас слишком уж длинные, лучше уж этот часовой видеоурок на несколько штук разделить, а то после 25мин уже спать реально хочется.
Не хотелось растягивать на несколько уроков. Поэтому и собрал все в один урок. А вообще можно было бы на несколько разбить и рассказывать чуть подробнее. Но нужно было в один вместиться…
начальная верстка похоже по курсу Попова делалась. А сколько стоит сверстать такой макет на бирже фриланса?
Да скорее всего по его курсу. Тот, кто верстал, точно изучал его курсы.
А почему такое отношение к Попову? он же профи и покруче Вас всех! у него больше 500 тыс подписчиков
Какое такое? Очень даже нормально отношение.
Против Попова ничего не имею. Просто личные наблюдения. Сейчас изучаю его курс по CSS — то я бы тоже верстал так как в изначальном (неправильном) варианте.
Андрей, спасибо за урок! В нем узнала себя, когда то тоже сверстала свою первую страницу без сайдбара, в мозилле все слетело, в последующих страницах исправилась). Пока не знакома с практикой создания магазинов, но смысл понятен, урок послужил очень хорошим вступлением. Вопрос, может не совсем по теме, как Вы относитесь к популярному сейчас Metro стилю (мне показалось, что по юзабилити сверстанный в уроке магазин чем-то напоминает Metro style) и в частности, к фреймворку BootMetro, хочу на нем сверстать сайт, решила посоветоваться.
Вот пока вы не сказали, я не наблюдал в данном макете Metro стиля))) Может быть что-то от Metro стиля есть в это макете, но очень не много. По фреймворку не поскажу ничего, так как его не использовал еще. Не приходилось еще делать такие сайты.
Очень неплохой урок! Спасибо!
Миллион извинений, Андрей…. Но если бы Вы говорили «вылезает», вместо «вылазит» — был бы просто замечательный!
Извините… Я понимаю, что не это главное…
Искренний поклонник Вашего мастерства.
Подскажите, а как организовать font в spane там где цифры 15% , чтобы одна цифра была меньше другой. Не могу понять.
Сергей, подобные вопросы задавайте на .
Здравствуйте, спасибо за хороший и подробный разбор ошибок на примере. По ходу просмотра урока у меня возник вопрос — зачем логотип закладывать в html-каркас? Постоянно менять его из админки нет никакой необходимости, т.к. в основном он меняется раз в пятилетку, то перезалить картинку не сервер не отнимет много времени и сил)
Здравствуйте, Андрей.
Скажу сразу, что на данный момент для меня ваш ресурс и ваши уроки являются лучшими в Сети.
Теперь конкретно по данному уроку — мне было очень интересно его смотреть, что называется — самое то. Несколько раз ловил себя на мысли, что сам бы сделал также, как и ваш тестируемый. Полезно.
Но есть такой вопрос:
.sale {
background: url(«images/sale.png») no-repeat scroll 0 0 transparent;
color: #363636;
font: 14px/1.1 Georgia;
height: 45px;
margin: 20px 20px 0 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 45px;
}
Подскажите, а зачем для одного и того же элемента дважды применять float и position? Причем последнее свойство ведь не работает в данном правиле — оно отключено!
А где, в показанном Вами коде, применяется свойство float?
И еще вопрос.
Вы картинки-баннеры (которые с девушками) — просто вырезали как есть.
Но в блоках div class=»product все-же отделили саму картинку от текста — div class=»sale.
Почему так? Ведь они фактически однотипные — следовало и все сделать также, отделив текст от картинки.
Я прав?
Исправление для первого мое поста.
Ошибка — я имел ввиду margin-top и margin-right вместо float (его там нет, поторопился).
И еще один вопрос.
Вы упомянули, что давали тестовую работу «верстальщику». А можно поинтересоваться — с какой целью? ))
А так, конечно — верстка изначально просто дикая! На что я новичок — и то в ужас пришел от такого «творчества». Я представляю, каких мук стоило «верстальщику» сделать так, чтобы шаблон хоть как-то «держался». ))
И еще один вопрос.
Вы логотип вырезали тоже как картинку, целиком.
Но по правилам, насколько я знаю, в нем текст должен быть именно текстом? А вдруг его менять придется, например, в Joomla?
Я прав?
Засыплю вопросами. )))
В панели навигации на psd-макете ясно показано, что при hover выделение должно быть цветом текста. В вашем исправленном шаблоне этого нет, там выделение через text-decoration: underline идет. ))
Здравствуйте, Валерий.
Думаю, лучше будет, если Вы зададите все эти вопросы Андрею на нашем форуме