Практика, практика, а где её взять-то?

Question

[Notix]

Недавно начал изучать html и css. Упёрся в потолок от того, что базу вроде как изучил, а что дальше делать не понимаю. Казалось бы, бери да верстай по гайдам на Ютубе. Звучит легко, а на деле залетаешь на Ютуб и видишь кучу авторов, которые верстают по-своему. Один автор делает сайт одним способом, второй другим и т.д. Хабаровчане, как опытные обитатели этих глубин, каких вы можете посоветовать русскоязычных, а может и некоторых англоязычных авторов, которые показывают практику верстки и за которым можно уверенно повторять и учиться? Заранее больше спасибо

Comments

[Вадим]

html academy.

Answer 1

[alex4answ]

1. Находишь любой нормальный сайт (сверстанный семантично и грамотно)
2. Пытаешься повторить, не подглядывая в devtools
3. Сравниваешь, если что-то не получается - подглядываешь как сделано

Суть не в том чтобы перепечатывать видео уроки и тд, а в том, чтобы научиться мыслить, разделять на части шаблон, понимать взаимодействие блоков и тд, какие стили куда и как применить.

Потому все эти видео уроки не научат и не дадут тебе практику, они лишь могут дополнить знания и объяснить нюансы.

Comments

[Gohapoc]

зачем это нужно, и почему просто не учить реакт например, который востребован и важен, а заниматься обос**ной версткой? Сам повелся на эту хрень что нужно уметь семантично и адаптивно и супер круто быстро верстать , потом когда начал учить реакт после базы js , понял какой это всё бред. Только время зря потратил .

[alex4answ]

Gohapoc, да-да, а еще можно вообще не учить js, html, css и тд., а просто начать с реакта, ведь там нет ни js, ни верстки, ты ему просто говоришь "братишка, сделай красиво" и ему даже повторять не нужно, все сделает.

А потом если что-то не получается - засыпать весь тостер вопросами "как сверстать %что-то%?"

[Gohapoc]

alex4answ, ну сиди батрач верстальщиком как дебил только другим не советуй время тратить

[alex4answ]

Gohapoc, ты сначала хоть что-то выучи на приемлимом уровне (привет мистеру Данингу и мистеру Крюгеру), потом сам раздавай советы, когда устроишься не в ип «рога и копыта» "за хлеб и мандарины", тогда переосмыслишь, что верстка, js это фундамент фронтенда, а пока ты максимум react only разработчик, шаг влево-вправо = конфуз и полное непонимание что и как делать, дальше гайдов на ютубе не зайдешь

Answer 2

[approximate solution]

Казалось бы, бери да верстай по гайдам на Ютубе.

Лучше уж - бери да верстай

а на деле залетаешь на Ютуб и видишь кучу авторов, которые верстают по-своему.

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

и за которым можно уверенно повторять и учиться?

За любым. Но если вы не будете смотреть разные подходы(в том числе анализировать чужой код), рано или поздно вы искусственно будете ограничивать свое видение на хорошую\плохую верстку.

PS: как искать макеты - гуглить, если лень искать макеты - сверстайте тостер(без логики), либо любой другой сайт, не глядя в код переносите визуал, тем самым - учитесь.

Answer 3

[MamaLuyba]

Подход к верстке зависит от компании, в которой работаешь: где-то все на флексах, для поддержки старых браузеров, где-то и гридом балуются, где-то БЭМ, где-то - бутстрап, где-то стили в одном общем файле, где-то - для каждой страницы свои, где-то адаптивность, где-то - всё строго по пикселям.
Идеальной схемы нет.
Тебе просто нужно понимать, как что устроено, как ведут себя разные элементы. И тогда ты сможешь применять разные подходы одинаково успешно.
И не стоит искать какие-то идеальные варианты - только время и нервы потратишь.
Понравится флекс - делай на флексах. Грид - на гридах.
Другое дело, что зачастую грид может быть избыточен для текущей задачи - это надо понимать. Но это только с опытом придет.

Answer 4

[Виктор Путин]

Заходишь в фигму - вкладка Community - тыкаешь на любой проект который понравился - копируешь фрейм - верстаешь
Там тебе и целые сайты с несколькими страницами, отдельные элементы интерфейсов, адаптив сразу. Шик

Answer 5

[Антон Р.]

Гугли что такое pet-проект. Реальный проект для практики тебе конечно же никто не даст.

Comments

[Владимир Коротенко]

Почему нет?
Я допустим могу дать. Сугубо волонтерский. Уборка мусора и бережное отношение к природе.
Пилю потихоньку бэк.

Но дизайн это не мое (С)

[MamaLuyba]

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

Answer 6

[DaniSon]

Ну вот к примеру делай как я. Для начала представь в голове, что ты хочешь ну или если точнее, то какой сайт ты бы хотел. Начни его по тихонько реализовывать. У меня это были клановые сайт, блог, магазин и т.п.
Я до сих пор так практикуюсь.

Answer 7

[Василий Хрягин]

Валидная верстка только флексами, гриды не кроссбраузерны. Артем Исламов норм мужик, у него можно учиться. Стоит придерживаться стандартов бэм и html academy. И чтобы проще верстать было воспользуйся препроцессора и для начала подойдёт компилятор koala

Comments

[alex4answ]

Объясни, флексы кроссбраузерны, гриды нет, почему?

caniuse говорит что и то и то норм, для старых нужны префиксы и тому и другому, назначение у них разное

[G F]

95% не кроссбраузерны? -_-

[Василий Хрягин]

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