Роман

Почему бы не воспользоваться сервисом типа codepen или jsfiddle чтобы показать пример своего кода?

Начать можно и с хостингов, со временем перейдя на виртуалки. Хватать сразу "всё и побольше", не стоит, да и не нужно в начале.
Сложностей настройки с виртуалками нету. Как правило "продавец" вам предлагает выбор ОС, которые будут установлены с базовым набором софта. Не редко этого за глаза. Но если нет, то гайдов в интернете полно, а после хостинга уже будете примерно понимать что вам нужно установить и как.

Что-то я не увидел каких-то чрезвычайных сложностей. Самое сложное тут это откалибровать darg&drop, все. Остальное простые транзиции, ничего сложного. Не надо смотреть на вау-эффект разинув рот, смотри на то, что происходит с блоками. Обыкновенное изменение состояния добавлением классов.

Чем больше вы будете перекладывать процесс запоминания на сервисы, тем хуже будете запоминать информацию своей головой. Уж так мозг устроен ((

Через пару лет таких записей - вы и половины помнить не будете ну и собственно искать в своих записях "есть ли тут про это?", если нет, то потом гуглить (или еще где ковырять) в итоге трата времени))

<noindex>
    <div class="mobile-menu">
        <div class="mobile-head"></div> <!-- бургер, логотип, etc -->
        <div class="mobile-body"></div> <!-- меню, поиск, телефоны, etc -->
    </div>
</noindex>

Суть: после определенной ширины браузера, например, 1024, показываем нашу менюшку, по клику на "бургер" - меняем класс у body, например, mobile-open, через который меняем бэкграунд бургера на крестик, а также показываем само мобильное меню:

.mobile-body {
    width: 100%;
    height: 100vh;
    padding-bottom: 70px; //"волшебное число", даем отступ снизу, чтобы можно было прокручивать полностью менюшку
    background: #fff;
    position: fixed;
    top: 50px; //50px - высота mobile-head, обычно хватает для телефонов
    left: -100%;
    transition: left 0.3s;
    overflow: auto;
    display: block;
}

body.menu-open .mobile-body {
    left: 0;
}

Что выбрать и почему?

Без объяснения "для чего" нормальных ответов не будет.
Хочется потрахаться и изучить - ставь все подряд по очереди.
Хочется просто поработать... да ладно, кто в это поверит?..

Просто оставлю свой комментарий.
Сколько вы изучаете HTML и CSS? Если меньше пол года, поверьте, вы их даже на 50% не знаете.
По моему субъективному мнению, что бы именовать себя таким "громким" словом как " Frontend-разработчик"?, у вас должен быть, пусть даже не опыт, но время потраченное на:
1) HTML + CSS -> желательно от года
2)JS -> не меньше года
Так же было бы хорошо научится пользоваться многими вещами, о которых почему то многие не знают\забывают или еще что-то, имеется ввиду новички("верстальщики"):
Сборщики -> Gulp\Webpack
Препроцессоры -> Sass\Scss и т.д
Контроль версий -> Git
Инструменты разработчика -> те же девтулзы в браузере (пкм -> посмотреть код элемента) (у них много разных функций, если смотреть внимательнее)
Хотя бы минимальное знание бека -> php\node.js (отправить письмо на почту с формы по клику и тому подобное)
И только уже после всего этого, можно будет посмотреть в сторону каких либо фреймворков, ибо без всего перечисленного выше, если даже вы будете знать, может даже хорошо, что маловероятно, какой либо фреймворк, найти работу вам будет ооочень не просто.
P.S. Ходят слухи, что даже на простой верстке (почти все что после пункта 1 откидываем), можно зарабатывать приличные деньги, ибо в последнее время все чаще и чаще вижу что в духе: "У нас в студии фронт просит найти ему верстальщика" или что-то вроде того.

Дальше изучать Javascript. И только после полного овладения языком браться за фреймворки. В основах лучше знать все основные - React, Angular, Vue. В деталях тот, на который больше нанимателей.