Валерий Суворов

Быстрый ответ: habrahabr.ru/post/114256
----------------------------------------------------------
Если вы знаете основы, значит знаете определенные css правила. Скажите такую вещь, как мне правильно сверстать 3 блока, идущих в ряд горизонтально?
Варианты ответов:
1. Используя float
2. Используя inline-block
3. Используя flex-box
4. Используя table
5. Используя position 0_o (потому что можно задать relative родителю и absolute детям+top/right/bottom/left)

Правильный ответ: всё выше перечисленное (ну может быть последнее не очень верно, но ведь тоже можно сделать и сделать очень аккуратно, не повредив общей структуры сайта). Ваш вопрос как по мне просто идентичен моему по смыслу. В разных ситуациях используются совершенно разные подходы, а количество этих ситуаций измеряется количеством вашего/чьего-то воображения.
--------------------------------------------------------------------------------
Если вы работаете в команде - спросите/посмотрите какой стиль вёрстки использовался до вас и можно ли использовать свой стиль, либо верстать так, как раньше верстали (многие команды даже гайды пишут по этому поводу, к примеру csssr).
Если работаете один - можно тоже самое blog.csssr.ru/code-guide и ещё в довесок ссыль в начале поста.

Ого какой тут в комментариях собрался клуб хейтеров SEO!

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

Хотите конкретную работающую схему без "воды" и прочего? Пожалуйста - "Развивайте сайт для пользователей" (с). Нужен мгновенный результат - есть сети контекстной рекламы.

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

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

В SEO на самом деле можно встретить толпы мошенников и низкоквалифицированных оптимизаторов, но это встречается практически во всех областях деятельности человека. Чтобы снизить риск, ищите специалистов по отзывам знакомых, заводите контакты и следуйте советам самих поисковых систем на этот счет, например: ссылка на совет Google.

А вся вода из СЕО лезет только потому, что начинающих очень легко развести на бабло, тк они совершенно не понимают в раскрутке.

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

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

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

sorax канал. Где-то давно был пост с каналами для фронтендеров, уже забыл и искать влом. Через гошу найди "ютуб каналы для front-end". В короткие сроки вряд ли реально. Все тонкости только с практикой, а какие-то с глубокой практикой.
На счет бутстрапа - я забыл, когда им пользовался (обычно пишу чистый css даже без препроцессоров, но иногда с ними явно удобней)
На счет сборок - тоже редко, так как они больше для больших проектов (сорь за каламбур)
На счет адаптивной вёрстки - это тоже только практика. Сначала надо научиться верстать статичные шаблоны, а потом делать адаптив. На самом деле в media нет ничего сложного и страшного, просто мы будто бы выкидываем предыдущий файл стилей для прошлого экрана и заменяем его новым файлом стилей. Грубо говоря так, но там надо основательно всего учитывать, особенно наследование и перезапись правил.
Ну и на счет боевого проекта - готовь фотошоп, который нужно тоже так нормально знать, потому что плох тот верстальщик, который его не знает ровно как и плох тот дизайнер, который не представляет вёрстки. Идеальный вариант - уметь верстать и уметь рисовать дизайны сайтов ну и обрабатывать фотки, потому что это всё очень понадобится (всё больше встречаю криворуких дизайнеров, а о криворуких верстальщиках лучше вообще молчать).

Главное - при написании кода думайте о тех, кто будет его поддерживать, но если вы занимались бекендом - наверняка это и так знаете.

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

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

<ul class="b-pages">
    <li class="b-pages-item m-active"></li>
    <li class="b-pages-item"></li>
</ul>

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

.b-pages {  }
.b-pages-item {  }
.b-pages-item.m-active {  }
.b-pages-item:hover {  }

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

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

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

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

Я однажды видел изнутри интернет-магазин . Квартира-двушка, заставленная стеллажами, работают две бабки лет по 60-70. Одна строчит бухгалтерию на компьютере и говорит по телефону, вторая снаряжает заказы - всё на бывшей кухне. Две старые бабки и курьеры.

В первую очередь делаю сброс css-стилей.
Затем делаю вёрстку общих блоков - просто структура из div'ов с нужными ширинами, высотами согласно макету, залитых разными цветами. Стараюсь все div'ы(когда что-то в строчку) делать inline-block'ами. Получается цветная такая структура будущего сайта. Каркас готов.


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

Создаю минимальную разметку с базовыми элементами и пишу для них CSS.
Потом добавляю в разметку остальные элементы и пишу CSS.
И так далее.

Всегда использую эти( это старые брэйкпоинты bootstrap по умолчанию ):

/* Large desktops and laptops */
media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */
media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
media (max-width: 767px) {

}

/* Landscape phones and smaller */
media (max-width: 480px) {

}

По надобности дописую промежуточные разрешения, если вдруг по дизайну что то падает на 650px, тогда дописую:

media (max-width: 650) {

}

Для себя обычно беру наиболее распространенные (desktop first):
1200px
992px
768px
480px
320px