Виталик

Например такие:
jsfiddle.net/9gy6qLey

Подробная статья как это сделать. Тут готовый результат статьи.
Тут есть готовые стили и пример применения реализация.

У меня такая формула:
1) Сначала гуглю возникающие вопросы на английском, потом на русском
2) Читаю книжки на английском с помощью приложения multum lingua (Параллельно можно открыть рус. и англ. версию книги, и проверять каждое предложение)
2) Балуюсь приложением Дуолинго - верю что если каждый день выполнять уроки, то какой-то толк будет.
Не знаю на сколько это эффективно, но вроде становится по лучше

уч ить сугубо разговорный английский
если вы технарь то технические слова вы уже знаете так как они почти всегда не переводимы на русский

Готового решения не подскажу, но если никто другого не посоветует — посмотрите как реализовано на сайте который мы когда-то делали, с похожей крутилкой, на jQuery. Только там без стрелочек:
lalubie.podhod.ru
(Практика показала, кстати, что не все этот элемент быстро понимают).

Вот такой вариант например.
При желании можно сделать почти любую фигуру.
Вот хорошая страница для вдохновения.

Как и везде, как любой hide/show объект.
По клику на кнопку, добавляется класс show объекту меню и слою overlay.
Если не понятно, то просто откройте дебаггер и посмотрите как это реализовано.
Ведь сложнее спросить, чем нажать ctrl+shift+i , разве нет ?

Ну и конечно, супер-пупер пример
tympanus.net/Development/OffCanvasMenuEffects
tympanus.net/Development/ElasticSVGElements

Мне на https://htmlacademy.ru/courses понравилось - все интерактивно. в игрой форме, базовые курсы бесплатные, продвинутые правда за бабки, но оно того стоит - я как раз там учился.

Посмотрите видео на ютубе https://www.youtube.com/results?search_query=%D0%B...

Подробно по пунктам описывают весь процесс. Будете знать с чего начинать и как двигаться дальше. Все остальное придет со временем)

По-моему, лучшие курсы дизайна в России ведет Бюро Горбунова. Курсы платные, но многие материалы в открытом доступе.

1. HTML4/5, CSS2/3 - определения, спецификация. Это минимальный уровень.
- Как выровнять блок/блоки по центру/слева/справа/по вертикали/по baseline?
- Сетка (grid): как реализовать, особенности, подводные камни?
- Вставить картинку на страницу: особенности, варианты, а "так, чтоб вывелась на печать"?
- Разница DOM / HTML / XHTML / SVG.
- Google CSS Guide, Github CSS Guide или любая другая договоренность о том как пишеться CSS/LESS/Stylus

Все другие вопросы сугубо project specific. И от собеседования к собеседованию могут отличаться. Зачастую те, кто собеседуют сами не знают точных ответов на свои вопросы. Тут уж ответ должен сопрягаться с "ожидаемым ответом".

2. Количество работ - залог того, что удалось столкнуться с разными проблемами.
- 0 работ - нужно просто феноменально знать спецификацию. Хорошая память и знание английского - залог пройденного собеседования.
- 2-5 работ "с нуля" достаточно, чтоб составить представление о технике написания кода
- 10 - всё равно будет рандомно просмотрено 2-5 работ
- 150 - всё равно будет просмотрено 2-5 работ. Просто 150 работ дают нехилый опыт.

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

4. Киев/Львов/Чернигов/.. - $400..$600 - это нормально для начинающего верстальщика
Будут знания JavaScript - можно претендовать на $1000...$1500

5. Рынку нужны верстальщики-рабы. Много. Люди приходят в "верстальщики" и уходят... А задачи остаются и их еще будет достаточно.
Ценят за "междисциплинарные" знания. На собеседования любят задать академические вопросы, а в работе приходится сталкиваться с реальными броузерами, реальными пользователями, и реальными отношениями в команде.

В идеале фронтенд должен идеально представлять как работает броузер, как взаимодействут с сервером, разбираться в сетевых вопросах, знать об ограницениях "по спецификации" и особенноятх релизации в ПО... и тогда его зовут как Frontend Archetechtor или Senior Practice Frontend Lead. Но даже люди на этих должностях имеют ограниченные знания. Поэтому на рынке востребованы разные люди с разными знаниями.

Дерзайте! Удачи!

Я из Омска. Постоянный верстальщик нужен в крупных компаниях, мои знания HTML CSS, + знания работы PHP движков, умение использовать различные слайдеры, и прочие элементы, которые есть в каждом дизайне, не обязательно знать код, главное умение брать готовые решения, и изменять их под себя, больше от Вас ничего не нужно. Взяли на работу только после верски лендинга, сейчас же дают на переработку проекты на WordPress, делаю админки для сайтов, чтобы было удобно клиенту всё менять, и прочее, работы много!

Живу не в Москве, образование школа+ПТУ, устроился на работу верстальщиком, не имея в портфолио ни одной работы и умея верстать лишь самые простые странички.
Просто разослал по всем веб-студиям своего города письмо, в котором написал, что хочу работать у них верстальщиком и первый месяц-два готов работать за небольшую сумму в обмен на знания. Из 20 студий ответили 4. Одни позвали на собеседование, другие дали тестовое задание. Выполнив 2 тестовых задания (несложные странички) я при собеседовании их же и показал. В итоге работаю верстальщиком уже третий месяц. Не жалею, что пошел в офис - если что, старшие товарищи все рассказывают и объясняют.
За 2 месяца научился многому, сейчас уже в JS начал вникать потихоньку.
Я бы рекомендовал действовать примерно по моему сценарию, если возьмут на обучение, то очень быстро научишься всему, что необходимо для работы. Хотя по началу будет тяжеловато.

Тут можно посмотреть, как верстает Роберт Харитонов из ОК
tohtml.it/post/74511047203/markup-process

Тут, Юрий Артюх
https://www.youtube.com/watch?v=teEwo5ynLyI