Общие советы по верстке

Вопросы и ответы с просторов интернета

• Какие ресурсы НЕ рекомендуется использовать для обучения верстке?
• Как найти наставника(гуру, учителья, сэнсэя) по вёрстке?
• Как вы начинаете вёрстку сайта?

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

Ресурсы, которые не рекомендуются для обучения

• Видео курсы от Евгения Попова
• Видео курсы от Дмитрия Валака
• Видер курсы от Михаила Русакова

совет от klierik на https://htmlforum.io/

Как найти наставника(гуру, учителья, сэнсэя) по вёрстке?

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

Макс пришел на форум имея минимум знаний в сфере разработки и имея большое желание учится. Он упоминает про наставника, но большинство читателей, к сожалению, трактуют данную информацию извращенно. Это не путь к руководству, это всего лишь опыт который получил автор статьи. Нужто ты думаешь, что если и у тебя будет наставник, то ты выучишь все в 2, 3, 10 раз быстрее? Или больше? Или качественнее? Более того, наставник может научить тебя плохому.

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

Зачем тебе наставник?
Что бы он говорил тебе где ты ошибся? Или как надо было сверстать тот или иной блок? Или что лучше использовать float или inline-block?
И что это тебе даёт? Набор правил и готовых решений как надо делать и как не надо! Но ведь ты знаешь что каждый сайт уникален, и везде есть нюансы. И ты хочешь каждый раз обращаться к учителю что бы тот подсказал тебе как решить задачу?...

Разве ты не хочешь научится думать и понимать чем живет вёрстка? Как она устроена, что из себя представляют слои, понимать и визуализировать и процесс разработки? Понимать "физику" работы блоков на страницы, как и почему они влияют на остальные? Предугадывать на будущее как потянется страница/блок в случае наполнении его контентом. Уметь за считанные секунды в голове разложить огромный сайт на слои? Достичь понимания вёрстки как некой сущности, которая является единым целым с тобой.

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

Ты хочешь женится на самой прекрасной девушке, но спать с ней будет твой наставник!

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

Для того что бы достичь тех же высот тебе надо повторить успех людей которые это уже сделали! Это не просто, но это реально!

Никто за тебя этого не сделает, никому кроме тебя это не надо.

Далее по списку:
1. Перед тем как открыть свою тему в поисках Наставника, пройдись по темам которые создали раньше.
2. Ты ищешь классного специалиста, который будет тебе помогать тебе, обучать, давать советы, делится опытом и знаниями. Ты этого хочешь? А ты можешь ответить на вопрос - зачем вообще кому-то это делать?

Зачем, для чего, почему кто-то должен согласится тратить на тебя время? Ведь тебе нужен не новичек как ты, а тот, у кого за плечами багаж опыта, ведь так? Так вот чем ты отличаешься от других таких же жаждущих что бы вкладывать в тебя время и делится нажитым опытом? Пойми правильно, дело то не в деньгах, тут важна идея.

ps: нет ничего невозможного, было бы желание 

 1) Ищешь бесплатные макеты - верстаешь
1.1) изучаешь основы jquery и javascript
2) Показываешь свою верстку и работаешь за копейки (20 000 рублей по МСК, оклад ниже чем у уборщицы), много работодателей готовы взять личного раба на вырост
3) Работаешь пол года или год
4) Просишь повышение ЗП или ищешь новую работу
...
50) изучаешь es5,es6,es7 react/angular/vue ищешь работу за 200 000 рублей. 😀

"Джуниор же будет выполнять работу - почему ему нельзя платить больше чем уборщице, это же сложней чем мести пол" - потому что уборщица не несет убытков и выполняет свою работу на ура, а джуниор несет убытки компании первое время. , если ты хочешь 40 000 рублей, то работодателю выгодней накинуть 10 000 и взять человека с опытом за 50 000 - 60 000 рублей, который будет нести убытки по минимуму.

Если в вакансии указано что им требуется человек с опытом за 80к - отправляй резюме.
Там будет примерно такой разговор между руководством : "давай попробуем взять, стол лишний есть, денег почти не просит, на чай больше тратим, может толковый парень, нам так и так чрез год нужно будет искать спеца нового, может этот подростет, а если нет уволим без проблем."

Самое главное показать что не залетный герой, а тебе реально инетресен веб.
Не говори что ты хочешь себя попробовать в ВЕБ, говори что у тебя есть конкретные цели и веб это твое все.)

phpuser

Как вы начинаете вёрстку сайта?

1. Создаю каталог для проекта
2. Инициализирую Bower
3. Устанавливаю нужные пакеты, например, Twitter Bootstrap, Angular, jQuery и т.д.
4. Ставлю Grunt, плагины для него и т.д.
5. Запускаю EMACS и создаю index.html
6. С помощью Emmet создаю шаблон, который уже начинаю заполнять.
7. В каталоге src создаю папки less, js и т.д.
8. Попутно пишу задачи для Grunt
9. Если в выбранном фреймворке не хватает какого-либо класса для стилизации элемента, сначала описываю стили прямо в шаблоне, в свойстве style. Затем при необходимости выношу их оттуда в LESS в виде одного или нескольких классов.
10. ??????????
11. PROFIT!!!

Максим Дунаевский

1) Захожу сюда codepen.io
2) Жмякаю New Pen
3) Создается новый пен где уже все настроено под меня (SASS/отступы/лайвапдейт и так далее).
4) Верстаю
5) ...
6) PROFIT!
Если верстка многостраничная, то один пен делаю глобальным (SASS переменные/общий JS код) и линкую его в другие пены. + можно все это дело форкать до потери пульса, и показывать ссылки заказчику (ссылки все приватные, если имеется PRO аккаунт). Особенно удобно, когда имеется несколько вариантов анимации, то просто делаю 2-3 форка и даю ссылки, а человек наглядно сравнивает все.

Nikolay Talanov 

Мой первый ответ здесь, постараюсь помочь, имею опыт верстки около 5ти лет. Все что написали выше, интересно, и безусловно полезно. Я напишу о другом. О скорости. Я пришел к выводу, что чтобы ускорить верстку, нужно по возможности работать в одной программе, и постараться минимизировать переключение между ними. Работаю на двух мониторах, и все равно такой принцип значительно помогает ускорить процесс. Работаю так:

1. Открываю макет в PS, и нарезаю его, попутно думаю как и что я буду делать, как я назову элементы.
-- У меня есть макет и набор картинок --
2. Копирую весь текст из макета в текстовый файл, и в нем делаю html. Написал строку для zen, развернул, перенес текст из файла ниже. На втором мониторе открыт макет, туда я просто смотрю.
-- У меня есть макет, набор картинок и html --
3. Копирую весь html в css, и удаляя создаю болванку для стилей. Например у меня есть такой участок:

и с этого html я делаю такую болванку:

-- У меня есть макет, набор картинок, html и файл стилей с не заполненными правилами --

4. Этот шаг самый не оптимизированный, и занимает наибольшее время. На одном мониторе у меня открыт PS на втором браузер с консолью, мне приходится работать с двумя программами, с PS и браузером, я копирую стили из макета, и вставляю в css. Попутно поправляю отступы, размеры до PixelPerfect. + пишу js.

-- работа готова --

Буду надеяться, что мой опыт будет вам полезен.

cccr85

1. Оцениваю макет, составляю для себя базовую разметку, определяюсь какие главные блоки присутствую, и что должно происходить если их нет.
2. Оценив какие блоки необходимы, и прикинув структуру сайта иду csstemplater.com/ генерирую по своей структуре HTML/CSS шаблон, если это конечно не LP
3. Создаю директорию c названием сайта в openserver, в ней создаю директорию HTML , а внутри по шаблону

• psd- что бы не потерялись, мало ли когда нужно дорисовать что то.
• css
• js
• less
• fonts
• img - для компонентов шаблона
• image - для временного наполнения (слайдеры, изображения в статьях и т.п.)
• shop/личный кабинет - иногда делю макет на интерфейсы, и раскидываю по папочкам для дельнейшей навигации

4. Закидываю скачанный шаблон по папкам, вырезаю оттуда reset-ы, так как уже имеется отредактированный и перенесенный в less
5. Создаю main_site.less - подключаю сюда все все нужные мне less файлы, template.less- прописываю сюда все структурные элементы (header, footer и т.д.), ui.less - обычно если проект не сложный сую сюда все оформление, иногда разделяю все на отдельные блоки, menu/portfolio/modal/btn/ и т.д.
6. Настраиваю компилятор Less в PHP шторме для текущего проекта, что бы компилировался только файл main_site.less в папку css
7. В основном использую getuikit.com, ну больше он мне по душе чем бутстрап, скачиваю и раскидываю файлы по папкам, правлю пути в index.html, попутно добавляю комментарии
8. Открываю и смотрю PSD шаблон сайта на наличии не стандартных шрифтов, если шрифты есть в www.google.com/fonts, то подключаю их, иначе www.fontsquirrel.com, и раскидываю файлики по папкам
9. Дальше используя Emmet создаю базовую разметку если это LP(header/footer/slider и т.д.), если нет, то начинаю с самого верха делать разметку элементов (logo/slogan/phone/login-widjets и т.д.) попутно добавляю less код в нужные из файлов.
10. Верстаю до конца все, что есть в макетах. Затем по необходимости создаю шаблон для CMS.

ЗЫ: Файлики что сделал не минимизирую, только по желанию заказчика, ибо все нормальные фремворки и CMS умеют объединять css и js файлы в 1, попутно минимизируя на лету. Заказчику отдаю все что сделал включая исходники.

Игорь Пушкарский

1. Настраиваю gulp на основные таски (конкатенация, минимизация, удаление неиспользуемого, кросс-браузерность, sass и т.д.)
2. Подключаю через bower необходимые "модули", например, normalize.css или фрэймворк
3. Выстраиваю архитектуру кода (просто независимые блоки в отдельную директорию, например, "modules", или "pages" для стилей особенностей отдельных страниц), в корне css главный файл стилей, в котором осуществляется импорт всех модулей (например, файл с переменными цветовой палитры или файл с mixin-ами).
4. Подключаю необходимые шрифты, в основном, через специальный миксин.
5. В главном файле стилей описываю основные стили для типографики, в общем всё, что связано с селекторами типа.
6. Если дизайнер предоставляет styleguide, то начинаю верстать страницу именно с него, а именно, по независимым блокам (где это возможно, от меньшего к большему) используя БЭМ методологию.
7. По ходу дописываю задачи для менеджера задач, например, для скриптов или картинок, собираю необходимый package.json, bower.json.
8. Собственно этап по-блочной верстки.
9. Собираю конструктор из готовых блоков и элементов соответственно макету.
10. Проверяю кроссбраузерность, pixel perfect.
11. Этап исправления деталей

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

Ihor Gevorkyan 

Для несложных классических сайтов:

1. Создаю HTML - каркас сайта (шапка, сайдбары, подвал итд)
2. Прорабатываю шапку и подвал. Режу картинки для шапки и подвала. На этом этапе HTML шапки и подвала готовы.
3. Быстренько выдираю названия стилей из HTML (использую сервисы типа bearcss.com , html2css итп)
4. Начинаю CSS: сброс стилей + из пункта 3
5. Быстренько выдираю CSS для шапки и подвала из PSD (использую плагин CSSHAT), остальное ручками
6. Шапка и подвал готовы! На этом этапе посути готов каркас как для главной, так и для внутренних страниц, причем очень быстро и уже можно что то показать!
7. Прорабатываю контентную часть поблочно (выполняю пункты 1-5 для каждого блочка)
8. Все иконки, декор запихиваю в спрайт, фотки и большие изображения можно прогнать через сервисы сжатия типа tinypng tinyjpg
9. Проверяю готовый макет на pixelperfect, в разных браузерх, вношу правки
10. PROFIT!

AndreyMyagkov

Разбиваю макет по модулям (элемент списка + список, шапка, навигация, форма, кнопка). Определяю пересечения модулей (например два блока на разных страницах очень похожи - для них один модуль и просто у одного из них в HTML будет указан дополнительный класс .module.module-supermodule).

Завожу несколько файлов:
app.css - только импорты для модулей.

base.css - любые базовые стили не привязанные к классам, обычно стили для тегов, никаких намеков на классы или id.

Верстаю сначала помодульно. Модуль обычно включает в себя только классы ограниченные определенным префиксом, например .nav- или .sidebar-.

Распространенные модули, которые кочуют из проекта в проект .btn-, .icon-, .form-, .nav-. Принцип организации модуля прост: внутри строго использовать классы с определенным префиксом. Искать такой модуль в списке CSS файлов очень просто - префикс и есть название файла, в верстке понять что элемент принадлежит к определенному модулю тоже достаточно просто - у всех классов этого модуля есть этот префикс. Если модуль - это список, допустим .list: в модуле сначала будет идти .list-item, а затем .list .list-item - для того чтобы можно было использовать .list-item отдельно от родителя .list, иногда бывает очень полезно.

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

Для сборки модулей в один файл использую конкатенатор, умеющий смотреть импорты и вытаскивать CSS файлы по ним. Если использовать LESS или SASS задача вообще элементарная. Я просто знаю, что люди которым я отдаю верстку не часто знакомы с LESS и SASS, чтобы отдавать стили в таком виде.

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

P.S.: Кстати, почему то все сбрасывают стили - я этого никогда не делаю. Достаточно знать особенности стандартных стилей, тщательное тестирование в разных браузерах. Получается на деле стандартные отступы заданные браузером наоборот помогают. Тем более прошли те времена, когда был ощутимый разброс в стандартных значениях. В общем странно.

Alex Maslakov 

Источники

• toster.ru
• htmlforum.io

Задачи по html/css