Как начать верстать?

Question

[Backmure]

Я недавно выучил HTML/CSS, начал углубляться: уже умею работать с SASS, LESS, Gulp, знаю теорию, но при этом всём я просто не понимаю как верстать. Не в смысле, что у меня некрасиво и косо получается или что-то по-типу этого. Я даже не имею понятия, что вообще нужно делать. Решил посмотреть несколько видео с вёрсткой сайтов из psd. Что ещё за адаптивность, Foundation и Bootstrap какой-то, а почему используют .container, что такое БЭМ и OOCSS. Я чувствую себя так, будто бы у меня в руках есть пистолет, который я умею заряжать, собирать и разбирать, знаю матчасть, но вообще не имею понятия, как из него стрелять. Где научиться?

Comments

[WapSter]

Я недавно выучил HTML/CSS

я их до сих пор не выучил, а верстать начал 6 лет назад) Научись разделять макет на составные части: кнопки, формы, просто текст, таблицы, логически единые блоки (превью, заголовок, короткий текст статьи) и т.д. Попробуй их верстать отдельно, потом научись складывать в единую конструкцию.

[Ankhena]

Как научиться верстать без проблем?

Answer 1

[approximate solution]

Я недавно выучил HTML/CSS, начал углубляться: уже умею работать с SASS, LESS, Gulp,

Не нужно нагружать себя лишними данными. Это тоже самое что, вы идете в автошколу - где вас должны научить правильно выжимать сцепление, а вы открываете капот, и начинаете менять фильтр с умным видом.

Что ещё за адаптивность, Foundation и Bootstrap какой-то, а почему используют .container, что такое БЭМ и OOCSS.

Всё это вы поймете, когда сверстаете своё первый макет на чистом css\html без использования кастомных сеток, дополнительного инструментария в виде сборщиков и препроцессоров. Каждый из них решает проблему - но что бы понять эту проблему, нужно её испытать на себе, сейчас же вы не пытаясь её понять, попытались перескочить, и утонули в болоте.

Где научиться?

Торент, ютуб. Ничего страшного нет, если вы не понимаете как верстать. Как и любой навык - будь то программирование, вождение, спорт - всё требует времени, и повторения одного и того же действия по 50-100 раз.

Лет 7 назад после своего сотого макета сверстанного под клиента, я любой дизайн инстинктивно делю на блоки и вижу условный код, вижу и подмечаю моменты, где дизайнер сделал не логично, допустил ошибку. Но как и вы на 1 макете - не умел ничего, и так же тупил.

webmasters.teamdev.com - ПРОЧИТАТЬ В ПЕРВУЮ ОЧЕРЕДЬ!

https://andreasbm.github.io/web-skills/ - поможет не скакать с третьего на десятое

Comments

[alekseyHunter]

Лет 7 назад после своего сотого макета сверстанного под клиента, я любой дизайн инстинктивно делю на блоки и вижу условный код

Жизненно

[Ярослав Иванов]

alekseyHunter, ставь лайк если жиза

Answer 2

[Дима Долготер]

есть многочасовые стримы как чел верстает. смотришь такие стримы, раз, два и на третий сам верстаешь и сравниваешь его код со своим. потом заливаешь свой код на бесплатный хостинг и создаешь вопрос в тостере с темой "Какая лучшая верстка в мире, моя?" и кидаешь ссылку. Потом слушаешь, смотришь и не споришь. Испраляешь ошибки в все.

То что ты типа владеешь но не знаешь как верстать это взаимоисключающее, ты просто видос какой-то посмотрел типа "сss за час" и думаешь что знаешь, но ты Джон Сноу

Answer 3

[Programiker]

https://career.habr.com/?utm_source=tm_toster&utm_...

Answer 4

[Andrey Vasilev]

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

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

Foundation и Bootstrap - фреймворки, просто прочитай что такое Framework.

За контейнер само слово говорит.

БЭМ и OOCSS

Comments

[Стас Хитрич]

С каких пор библиотека с классами и подключаемым js файлом стала фреймворком? Я про утверждение про bootstrap и Foundation. Библиотека это то что подключается к файлам проекта и дополняет их, а фреймворк это куда вставляются файлы.

[WapSter]

Стас Хитрич, забей холиварная тема. react вообще библиотека)

[Andrey Vasilev]

Стас Хитрич, ты жив?

[Andrey Vasilev]

WapSter, что называется: "каждый д*очет как он хочет"

[Стас Хитрич]

Andrey Vasilev, жив, а это беспокоит тебя?)
Я не ради срача это написал, просто мнение высказал

[Andrey Vasilev]

Стас Хитрич, спорить смысла нет - всё на офф. сайте, я в воду не ссал.. кхм..