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

Question

[elo-dev]

Первый раз обращаюсь на форум с таким вопросом,не ешьте с потрохами,максимум конкретики пожалуйста Сайт делал для знакомых знакомых,но возникли финансовые проблемы и верстка не дошла до финала. Дизайн придумывал сам(ни разу не было в этом опыта).Успел разместить на хостинге.

Что нужно пересмотреть,исправить ?
Какие есть критические ошибки ?
Вот вёрстка:
https://github.com/elo-dev/elo-dev.github.io?files=1
Сам сайт:
m977514q.beget.tech

Comments

[Ankhena]

Что нужно пересмотреть,исправить ?

Глаза раскрыть и посмотреть на сайт. Вы видели, что с тётьками на фото приключилось? Догадываетесь что бы они с вами сделали, если бы увидели свои растянутые или сжатые фотки?

Какие есть критические ошибки ?

Где валидатор знаете?
А спецификация?

Дизайн придумывал сам

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

[Модератор]

Первый раз обращаюсь на форум

Это - не форум. См.п.3.4.

Answer 1

[Николай Абдуллин]

Если работает — значит нормально всё

Надо знать стандарты разметки, надо много верстать и смотреть на то, как сделаны хорошие сайты.
view-source:https://www.apple.com/ru/

Comments

[Дмитрий]

большие корпоративные сайты != хорошие
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww...
https://jigsaw.w3.org/css-validator/validator?uri=...
https://jigsaw.w3.org/css-validator/validator?uri=...
и тп

[Максим Грищенко]

Дмитрий,
хорошие != валидные :)

[Дмитрий]

Максим Федоров, зачем учится делать невалидные сайты?

[lloydbanks]

Дмитрий, вы серьезно считаете "хорошими" сайты те, которые проходят сервисы с валидатором html/css?
Исправлять неадекватные рекомендации, которые он выдает - самая пустая и неблагодарная трата времени, которая только может быть и которая ни к чему абсолютно не приведет.

[Николай Абдуллин]

Да понятное дело, что всегда можно отступить и от стандартов и костылей наставить.

Ещё я тут подумал, чисто в качестве некой тренировки:

1. скачиваем какой-нибудь готовый html шаблон сайта
   
2. открываем psd или в чём там дизайн сделан
   
3. начинаем верстать и подсматриваем в готовом шаблоне как это сделали до нас
   

[Дмитрий]

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

Валидатор позволяет очень быстро оценить уровень верстки. В реальной жизни не всегда оправданно делать 100% валидный сайт, но автору вопроса посмотреть на ошибки в его верстке, почитать что они значат, сильно бы помогло
https://validator.w3.org/nu/?doc=http%3A%2F%2Fm977...

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

elo-dev конкретно по этой верстке:
почитать по srcset, научится грузить картинки правильных пропорций, почитать про сборку проектов (grunt, webpack, etc), почитать про БЭМ

[Ankhena]

lloydbanks, я вот серьезно считаю, что просить оценить качество именно верстки и не проверить ее валидатором это просто неприлично.
И одно дело, когда нужно сверстать что-то эдакое и человек сознательно идет на нарушения. А другое, когда в коде вот такое<hr align="center" width="915" size="2" />

[elo-dev]

Ankhena, я проверил валидатором,и тем самым исправил достаточно ошибок, но именно линии я не смог исправить и переверстать

[Николай Абдуллин]

elo-dev, так сделал бы див с border-bottom: 1px solid #333

да я даже не смотрел вёрстку, понятное дело, что там всё плохо. а чтоб устраиваться по этому направлению на работу, лучше сначала много потренироваться, потом постажироваться, и там уже решать, насколько нравится или не нравится это направление

[Ankhena]

elo-dev, начните с изучения смысловой (семантической) нагрузки на тег <hr>.
После этого вам придется его оттуда удалить и переверстать эти полоски псевдоэлементами.

Но вам в подарок hr

[lloydbanks]

Дмитрий, Ankhena, ребят, при всем уважении, не буду с вами спорить, просто основываясь на своем 8 летнем опыте разработчика (в основном бэкенд, но при тесном взаимодействии с верстальщиками) подгонять сайт под валидатор - это то же дрочево, что и подгонять верстку под pixel-perfect. Нужно быть полным идиотом, чтобы заниматься этой бесполезной никому не нужной ерундой, особенно если за это не доплачивают. Нормальный верстальщик не будет оставлять в своем коде дерьмо в виде <hr align="center" width="915" size="2" />. Такого кретина еще нужно найти постараться, ведь сейчас при всем желании не найти в гугле учебных материалов, которые бы обучали верстать таким образом + все современные редакторы поддерживают как минимум автозаполнение и подсветку кода, что априори при попытке впихнуть что-то критически невалидное уже не останется незамеченным (если только вы не конченое ебанько, которое верстает в виндовошном блокноте).

Посмотрите на сайт того же apple. Это бренд с мировым именем и миллиардными оборотами. Думаете они не могут себе позволить хорошего фронтенд-разработчика? Конечно могут, просто они не еб.на голову и прекрасно понимают, что 80% скуления и нытья валидатора - это кастомные атрибуты и невалидные метаданные, которые используются поисковиками для лучшей индексации сайта. Стоит ли жертвовать средствами и временем, которое вбухивается в маркетинг и сео в угоду сервиса, рекомендации которого ни на что не влияют - вопрос риторический. А доебыв*ться до кастомных атрибутов, которые используются JS для интерактивности и лучшего UX - это просто смешно.

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

spoiler

[Ankhena]

lloydbanks,

на своем 8 летнем опыте разработчика

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

[elo-dev]

Спасибо всем.Взял все на вооружение,буду дальше тренироваться

[Дмитрий]

lloydbanks, ха
>ормальный верстальщик не будет оставлять в своем коде дерьмо в виде
так вот для этого валидатор и нужен - чтоб не просматривать вручную весь код на наличие незакрытых тэгов/ошибок верстки, а проверить это автоматизированно.

>80% скуления и нытья валидатора - это кастомные атрибуты и невалидные метаданные
еще раз ха
ну вот тебе корпоративный сайт, где точно так же относятся к валидаторам.
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww...
Дубликат ID (#collapseMain) - это уже серьезный баг, если к айдишке привязан скрипт, может много непонятного происходить у клиента

>Думаете они не могут себе позволить хорошего фронтенд-разработчика? Конечно могут
конечно могут. Но. Ты работал с корпоративными клиентами? Где куча легаси кода, большие команды работают над продуктом, одна команда не знает, что делает другая, и вот это вот все?
удалять все ошибки из валидатора не нужно. Но это не значит, что пользоваться им нет смысла.

Ну и моя мысль немного не о том. Учиться лучше по тому коду, где вообще нет ошибок. Когда уже есть опыт, тогда можешь понять, какие ошибки критичны, а чем можно пренебречь

 >На что действительно стоит обращать внимание - это на показатели Google PageSpeed
еще раз ха
GPS хороший инструмент. Но точно так же, нужно уметь им пользоваться и подгонять сайт под 100 гугловских попугаев не всегда оправданно. Например вот https://www.facebook.com/notes/wordpress-speed-up/...

>просто основываясь на своем 8 летнем опыте разработчика (в основном бэкенд
>А на сколько он у вас валидный
на бэке код можно писать по стандартам. а можно не по стандартам при том, и тот и тот, будут работать одинаково производительно.
какой код будет проще и дешевле поддерживать?
а если, например, разработкой кода до этого занималась команда индусов? или, наоборот, теперь код передадут команде индусов, но нужно оставить такое же качество кода. Может все же стоит озаботится валидностью кода?

[lloydbanks]

Дмитрий,

так вот для этого валидатор и нужен - чтоб не просматривать вручную весь код на наличие незакрытых тэгов/ошибок верстки, а проверить это автоматизированно.
Дубликат ID (#collapseMain) - это уже серьезный баг

Как я писал выше подобных тупых ошибок позволяет избежать редактор еще в процессе написания кода.
Вот у меня, например, сразу загорается желтая лампочка, которая как бы мне намекает "слышь, чувак, а не х*йню ли ты тут понаписал?" и еще поясняющий текст с ошибкой для особо одаренных. В этом и есть автоматизм.

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

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

Ну, и ты снова убедил меня в моей же правоте, что 90% ошибок это пустой звон. Да, у них косяк с дублирующим ID и div внутри button. Это все критические моменты, которые я увидел пробежавшись глазами. Остальные проблемы связаны с невалидными атрибутами типо v-if, v-for и проч.вытекающими последствиями типо пустых заголовков. А удалять эти атрибуты категорически нельзя, т.к именно на них основана работа сторонней библиотеки. Вот и типичный пример вреда валидатора, ежели его пользы.

GPS хороший инструмент. Но точно так же, нужно уметь им пользоваться и подгонять сайт под 100 гугловских попугаев не всегда оправданно

Согласен, сам Google про свой сервис пишет, что не нужно относиться к нему с фанатизмом. Только в отличие от валидатора 90% его рекомендаций - это реальные практические советы, которые пойдут на пользу.