ТОП 5 ошибок у начинающих верстальщиков — мнение преподавателей курса фронтенд

Когда только начинаешь что-то делать, естественной составляющей жизни становится поток ошибок — глупых и не очень. Это нормально, ведь не ошибается только тот, кто ничего не делает. Но многих оплошностей можно избежать, зная об их существовании. Чтобы помочь будущим студентам курса по HTML и CSS, мы поговорили с Денисом Мещеряковым — co-founder EasyCode и Юрием Придатко — преподавателем курса по frontend, на тему того, какие наиболее распространенные оплошности допускают верстальщики на старте своего пути.

Разумеется, у всех преподавателей разный опыт, как и у студентов курса по HTML и CSS, поэтому получилось два отличающихся мнения. Денис Мещеряков, в своей версии ТОПа говорит о том, что большой проблемой новичков в верстке становится невнимательность и неумение разделять такую объемную структуру как сайт на составляющие — компоненты и модули. По версии Дениса, ТОП 5 выглядит так:

  • неумение думать о сайте, как о наборе компонентов или модулей;
  • использование тегов не по назначению;
  • большое количество медиа-запросов и «косяки» в адаптиве;
  • неправильное именование классов и дублирование стилей;
  • невнимательность к деталям макета.

Последний пункт Денис объясняет так: «Условно говоря, у тебя есть бордер с отступом в десять пикселей, а ты там поставил двадцать и поехал дальше. Нужно быть внимательным и тщательно изучать макет».

Студент курса по верстке может избежать всех перечисленных упущений, если будет выполнять работу с HTML и CSS более осмысленно — обращать внимание на детали и использовать правильные подходы. Также помогает выполнение всех домашних заданий на онлайн курсах от EasyCode, так как ментор просматривает работы будущих специалистов по верстке и отмечает все недостатки.

Вложенность элементов в верстке

Не меньшую роль играют промашки во вложенности элементов. Иногда они не заметны со стороны пользователя, но посмотрев в HTML и CSS код можно понять, что малейшие изменения приведут его в негодность. Подробнее об этом рассказал Юрий Придатко: «Мне кажется, то, с чем чаще всего возникают проблемы — это, все-таки, вложенность элементов, когда человек пишет HTML. По началу очень сложно отследить ее и правильный порядок открытия/закрытия селекторов. HTML прощает очень многое: в браузере ты видишь, вроде бы, работающий сайт, но потом оказывается, что работает он совсем не так, как нужно — это довольно распространенная вещь».

Невнимательность приводит еще и к лишним тегам, которые нарушают схемы вложенности. Оставляя лишний код, будущие специалисты по HTML и CSS захламляют файл или вовсе рушат его структуру, поэтому всегда необходимо смотреть за тем, чтобы парные теги были открыты и закрыты в правильных местах. Юрий подтвердил это: «Не закрытые или лишние закрывающие теги, из-за которых часто встречается неправильная вложенность элементов, ломают верстку. Это происходит, когда фрагменты, которые должны иметь структуру родительско-дочернего элемента, являются соседями. По моему мнению, это самые распространенные ошибки в HTML и CSS. ТОП 5 сложно определить, нужно смотреть по человеку — очень много зависит от внимательности и аккуратности, многих погрешностей можно избежать».

Неочевидные ошибки начинающих верстальщиков

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

«Бывают еще специфические, как неправильное определение position-relative, position-absolute. Это когда мы не тому контейнеру задаем relative, и, собственно, не туда делаем привязку — в итоге у нас в какой-то момент все “крашится”. Но это уже более глубокие моменты», — поделился опытом Юрий.

Насколько важен тег DOCTYPE в верстке

Также часто бывает, что начинающие верстальщики забывают указать тип страницы и браузер просто не понимает «на каком языке с ним говорят». Именно так получаются поплывшие страницы без оформления. Чтобы подобного не происходило, необходимо всегда указывать используемую версию HTML в первой строке страницы, так браузер всегда будет понимать кодировку документа.

В качестве вывода стоит отметить, что в HTML и CSS важна внимательность и аккуратность. Тщательная проверка кода и правильное расположение элементов играют огромную роль в верстке — чем сильнее будущий студент курса по HTML и CSS будет контролировать свои действия, тем лучше созданный им сайт отобразится на экранах пользователей. С этим сильно помогают менторы IT-курсов от EasyCode — они указывают на ошибки студентов курса верстки, что ускоряет их продвижение к цели.

Заметили ошибку? Выделите ее и нажмите Ctrl+Enter, чтобы сообщить нам.

22.04.2019
222
Автор: Ася Яскер