Сергей ZSA

Я так понял нужна полосочка которая ездит в выпадающем. Сделано оно там вообще не на after. Если проанализировать код - там есть span, который absolute относительно всего выпавшего блока relative собственно (я не запариваюсь с объяснением, для человека который понимает более менее в вёрстке всё это и так ясно, так что если что не понятно - в комментах переспрашивайте). Логика - при наведении на тот или иной элемент узнавать его высоту и его расстояние от начала родительского элемента (с помощью jquery это делается в 2 счета вообще). Дальше задача просто сдвинуть на нужное количество px ваш бегунок. С ходу как рассчитать расстояние сверху имея высоту и расстояние элемента от начала родителя - я честно формулу не придумаю, так как спать хочу. Тут самостоятельно вам подумать стоит ну или пилить все пункты меню одинаковой высоты и опускать элемент на количество px сверху + там ну 3px (количество "+ там ну" узнаете самостоятельно, просто сдвиньте ваш бегунок сначала на количество px сверху {я под этим подразумеваю расстояние от в целом всего блока, который является выпадающим до элемента, на который навели} а потом спустите с помощью инспектора на середку вашего элемента и посчитайте на сколько спустили). Логика такая. Делайте сами, это будет интересно, а я спать. Не получится - пишите. Запилю на codepen иль ещё где и скину ссыль сюда, но уже завтра или когда свободное время будет.

Ссылка на скрипт от Алексей выглядит чет очень стремно, некрасивое перетекание вообще там.

Давайте по пунктам постараюсь рассказать, как вообще надо работать во 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 нет ничего сложного и страшного, просто мы будто бы выкидываем предыдущий файл стилей для прошлого экрана и заменяем его новым файлом стилей. Грубо говоря так, но там надо основательно всего учитывать, особенно наследование и перезапись правил.
Ну и на счет боевого проекта - готовь фотошоп, который нужно тоже так нормально знать, потому что плох тот верстальщик, который его не знает ровно как и плох тот дизайнер, который не представляет вёрстки. Идеальный вариант - уметь верстать и уметь рисовать дизайны сайтов ну и обрабатывать фотки, потому что это всё очень понадобится (всё больше встречаю криворуких дизайнеров, а о криворуких верстальщиках лучше вообще молчать).

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