Книги по улучшению знаний верстки?

Question

[Umid]

Добрый день.
Занимаюсь вебом уже более года (местами интенсивно, местами нет).
И задался таким вопросом как, а знаю ли я то что знаю хорошо?
А мысль эта пришла после вчерашнего комментария под этим вопросом.
Сейчас у меня основной упор на node.js и на js в общем.
И свёрстанных проектов можете есть:
Проект №1
Проект №2
Проект №3

Какие книги можно почитать по верстке для продвинутых?
Наткнулся на книгу, стоит ли читать?

Так же очень важно ваше мнение по поводу трех сверстанных страниц - сайтов.
Заранее благодарю!

Comments

[Сергей Тутуков]

Я мельком посмотрел верстку, но могу сказать следующее:
- всегда делай универсальные селекторы и к ним уже дописывай модификаторы.
у тебя 5 section и у всех разные классы (we-are, services, ...).
- посмотри обязательные теги при использование (ul,section,article,...).
у тебя ul без li
- посмотри сколько h1 может быть на странице.
- пытайся избавиться от двойного названия main-menu, пиши просто menu, тем более у тебя лендинги.
- все очень плохо с определение назначением тегов. У тебя предполагаемые ссылки могут быть span, li , кнопки div
- половина не работает))

Для продвинутых нет книг, везде одно и тоже. Можешь посмотреть "Секреты CSS." Леа Веру, есть пару крутых фишек, о которых никто не знает.
Посмотри канал на ютубе Sorax, DevTips... Почитай доклады Paul Irish, Lea Verou, ... .

[Сергей Тутуков]

Umid, ты фрилансер?

[Umid]

Сергей Тутуков: Спасибо большое. Нет ещё не фрилансю. Учеба не позволяет. В день сплю по 4 часа.

Answer 1

[Дмитрий]

Для практики по верстки - htmlbook.ru/practical

Поправьте ошибки - https://validator.w3.org
1) https://validator.w3.org/nu/?doc=https%3A%2F%2Fmyp...
2) https://validator.w3.org/nu/?doc=https%3A%2F%2Fbus...
3) https://validator.w3.org/nu/?useragent=Validator.n...

Используйте для a, button, input - :hover, :focus, :active

Comments

[Umid]

Ого. Не знал о таком ресурсе.
Почему пользовательские псевдоклассы только для этих тегов?
Или всегда и для каждого такого тега задавать эти классы?

[Дмитрий]

ссылки должны быть ссылками

Answer 2

[sleepyKitty]

Книгу 2007 года читать не стоит. По алгоритмам/паттернам да, можно читать старые книги, они быстро не устаревают. По верстке точно нет.

Можно эту книгу полистать, изучить какие моменты не понимаете
https://www.amazon.com/CSS-Secrets-Solutions-Every...

Но лучше изучать таргетно. Например, плаваете в адаптиве? Пошли гуглить responsive design -> читаете статьи/смотрите видео/codepen, пытаетесь понять как и почему оно работает на конкретном примере, пытаетесь сделать/изменить сами. Книги по верстке слишком общую информацию дают, зачастую растянуто и на сферических примерах. Какие есть свойства и как их применять можно и на mdn посмотреть, а не листать 600 страниц не пойми чего (совсем новичков не рассматриваем).

Если хотите круто прокачать верстку, то путь один - много верстать. Изучайте препроцессоры (какой-то один), изучайте флексбокс, анимации, транзишены, svg и тд.

Практика и жопочасы единственный способ.

Comments

[Umid]

Flexbox, sass, resonsive design уже знаю.

[Umid]

Во всех трех проектах использовал эти технологии. За исключением Sass, вместо него там был использован Less.

[sleepyKitty]

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

[Umid]

sleepyKitty: Как раз такой лэндинг верстаю. Куча анимаций, слайдеры(на чистом js делаю) и других фич.

Answer 3

[Ankhena]

Наткнулся на книгу, стоит ли читать?

Что мешает начать?

В любом случае, у каждого верстальщика свой стиль. Даже, если придерживаться определенных правил, БЭМ или любых других договоренностей, все равно одну и ту же задачу разные люди решат по разному.

Какие книги можно почитать по верстке для продвинутых?

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

Читать: спецификацию. Для развития всякие css-tricks, хабры, тостеры и т.д. Не брать на веру все, что написано в комментариях.

И задался таким вопросом как, а знаю ли я то что знаю хорошо?

А и не переживайте, пока этот вопрос актуален, значит все идет по плану и развитие будет продолжаться :)

Comments

[Umid]

Благодарю.