Сергей ZSA

Давайте по пунктам постараюсь рассказать, как вообще надо работать во front-end.
1. Вы должны научиться думать блоками (блоками в потоке, выпадающими из потока, flex-блоками и тд и тп). Научиться можно только когда вы поймете как на самом деле надо верстать.
2. Начните с простой вёрстки. Возьмите макет в .psd (80% работы над каждым сайтом вы будете пользоваться PhotoShop и если вы его не знаете хотя бы на предбазовом уровне - печаль беда), импортируйте оттуда все нужные вам картинки ну и начинайте верстать шаблон поблочно, смотря где какой цвет шрифта, размер, жирность, размер блока, фон этого блока и тд и тп.
3. Зачем вы себе морочили голову gulp, sass, bootstrap когда ещё верстать даже нормально не умеете - я увы не понимаю. Вам ни один из этих инструментов не поможет пока вы не будете уметь именно верстать. На данный момент не думайте о технологиях, структуре и тд и тп. Просто сверстайте хоть какой-нибудь макет хоть как-то.
4. Общайтесь с людьми, которые вам могут помочь продвинуться в этой сфере. Таковых крайне много. Можете ко мне в скайп добавиться и узнавать некоторые вещи, можете к другим, к кому угодно фактически, наверно 60-70% верстальщиков с удовольствием поделятся с вами своим опытом
5. Пишите код аккуратно. Был тут недавно вопрос, в котором человек предоставил код, а там ни{ } нету, ни отступов нормальных нет, ну и половина ; просто потеряны, а в html теги применяются не по назначению вовсе. Нельзя так делать ни в коем случае, иначе ваш уровень не поднимется с уровня плинтуса.
6. Файловая структура: папки css images js и на уровне с этими папками лежат файлы .html либо .php всё. Если говорить о препроцессорах и сборщиках - не лезте пока в это, потом узнаете как только научитесь нормально верстать. Я думаю нет смысла объяснять что в папках тех должно лежать. Если вы считаете себя особенным - можете распределять внутри images картинки по папкам на составляющие, к примеру сделать папку отзывов, папку галерей каких-нибудь и тп, но я чаще так не делаю, не хочу чтоб дополнительные символы засоряли мне код и ухудшали читаемость.
7. Связывать между собой html и css судя по всему вы и так уже умеете и привязывать к ним js. Не знаю что вам мешает сверстать любой сайт если вы понимаете как устроены эти 3 технологии (а на них по факту всё и держится).

Итог: Забудьте про sass, gulp и прочее пока не сверстаете шаблонов 10, эти технологии вас никак не ускорят и никак вам не помогут пока вы не будете уметь просто верстать с шаблона .psd и писать нужные скрипты на js или jQuery хотя бы. Научитесь немного фотошопу и занимайтесь практикой. Найти те самые .psd вообще не проблема, их куча бесплатных в интернете.

Ужс какой-то. Не верстайте так. Сделайте по-человечески чтоб в ulбыли li а не a в ul. И для ссылок применяйте active ну и естественно фигурные скобки ставить за вас никто не будет а также ; в конце свойств.

var $gg = $(".players-percent-block");
$( '.players-percent-block' ).  зачем??? Вы переменную зачем задавали с этим классом?

Ну да ладно, по поводу вопроса - есть setTimeout функция в js. Смотрите что она делает. Проще простого функция.

js и хотя бы jQuery для более менее нормальной работы и чтоб делать что-то более сложное нужно ещё подтянуть CSS. Шаблоны "средней сложности" у всех понятие очень растяжимое как резиновая вёрстка.

По собственному опыту - в интернете делается поуши копий сайтов. Страшно представить сколько копируется каждый день. Особенно видно по Landing Page для сезонных товаров всяких. Кто-то скопировал у кого-то потом у этого тоже скопировали и тд и тп, а потом поди докажи, что ты это вообще копировал, а не сам делал. Но это относительно LP.
На счет больших и известных сайтов (скопировать хабр к примеру) - я бы не брался за такую работу если там полная копия. Почему? Это бредятина и заказчик псих, нет ни денег ни ж... поднимать не хочет чтоб своё что-то сделать, а с такими заказчиками терпеть не могу работать.
Если с основательным количеством переделок - это уже не копия, а скажем так рерайт)) За него же не сажают в тюрьму))

У вас наверно в px позиционирование сверху. Оно будет всегда неподвижным если вы так задали, потому что top всегда считается от верхней части родителя (будь то body или relative), а они будут стоять соответственно всегда на своём месте вне зависимости от окна браузера (верхняя граница на своём месте)

Коряво объяснил, поздно уже, спать охота. Мож кто может - объяснит лучше.

Если вам хочется поменять расположение элемента при меньшем окне - попробуйте использовать % вместо px в указаниях top. Если нужно менять под конкретный размер экрана - стоит посмотреть на @ media запросы в CSS. JS в вашем случае думаю не нужен совсем. К примеру при max-height: 700px делать у определенного элемента top больше/меньше ну и тп.

Если не нужна адаптивная вёрстка - просто обрезали по край нижний в центре изображения и в jpg вместе с синим фоном всё залили.
Нужна адаптивка - говорили уже доп блоки или before + after
Или если у вас скиловый дизайнер там прямо это рисовал (кого я обманываю...) то тогда он предусмотрел уже адаптивный вид для этого блока и вам можно будет (если в адаптиве тоже такой треугольник) просто при меньшем max-width в media фигачить новый background за место нынешнего (короч первый способ, просто пхаем другой фон в блок).

Да, первый способ - изврат. Можно и на svg сделать и тд и тп. Просто как вариант безгеморойный. Часто пользуюсь если сайт и хозяева его будущие не собираются звезд с неба хватать.

Сейчас никаких. Лет через 5-7 появятся.

Активно поддерживаем с командой, если нет отмашки на поддержку старых браузеров. Если есть - увеличение цены.

Как стать верстальщиком в краткие сроки? вот тут немного про адаптив писал. Bootstrap по не нужен, личное мнение.

делаю так для поддержки старых браузеров и приколов с вебкитом и прочими:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;

Это всё вместо

flex-wrap: wrap;
display: flex;
justify-content: space-between;

Быстрый ответ: 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 и ещё в довесок ссыль в начале поста.

em не лучший вариант для бордеров по-моему, но дело ваше. Сюда .main .sidebar nav li добавьте это border-left: 0.3em solid transparent; и всё прекрасно заработает.

Вах вах вах. Какой ужс. А нельзя повесить класс и тут же задать timeout строкой ниже? Или у вас этот класс в таком .div .anim имеет 3 секунды длительность анимации, а просто в .anim имеет 1 секунду?

И вообще вопрос, у вас там че анимация в несколько минут чтоль, что человек даже браузер свернуть захочет, пока она идет?

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

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

А давайте ещё и style="" ещё использовать для пущей скорости. Вы сами подумайте, что хотите сделать - огроменный файл с кодом html+css и уж 100% там будет js, а если ещё и какую-то библиотеку подключите типа jQuery тоже не через файл, а напрямую - ваш текстовый редактор может либо скопытиться, либо очень очень долго думать и тяжело отображать то, что в файле при его скролле. Более того я не завидую вам потом, потому что поддерживать такой код будет огромной головной болью (если вы его будете поддерживать, если кто-то другой - он будет готов вас сварить себе на обед).