Игорь Перегудов

изначально они открыты, а js-ом скрываются
лучше сделать на css их изначально скрытыми, тогда проблем не будет

псевдоэлемент треугольник
загугли "треугольник на css"
или генератор треугольников css

Оставьте теорию - учите язык/технологию/библиотеку на реальном проекте...
Если хотите идти во фронтенд - освойте JQuery, для работы с DOM - очень удобно, затем почитайте про REST api, сделайте какой-нибудь проектик вместе с api Вконтакте, можете как на нативном JS так и на JQuery - писать, затем, поработав над реальными задачами - почитайте Флэнагана - реально расставит в голове всё по своим местам )
ну а дальше что учить - определитесь, пройдя этот путь ;)

посмотри плагин https://masonry.desandro.com/

$('.sub-menu').css('display') - так задается css для блока "$('.sub-menu').css('display': 'block)

вы делайте проще,

$('li').on('click', function () {
    if($(this).hasClass('active')){
        $(this).removeClass('active');
    }else {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    }
});

Вот тут ответ

Разница в том, что position: sticky ведет себя как position: relative относительно в пределах своего родителя, пока данное смещение порогового значения в окне просмотра.

$('a + img')?

или даже лучше $('div > a') и дальше оборачиваете

Начнешь примерно так:

for(var i = 0; i < $('.controls > div').length; i++){
    $($('.controls > div')[i]).attr('data-id', i);
}

затем вешаешь обработчик на див и и добавляешь класс к другому диву с таким же data-id

круто сделано! :) красавчик
по вопросу: тут тебе нужно определиться куда ты хочешь идти дальше? верстка или фронтенд, если верстка то продолжай в том же духе - ты всё правильно делаешь, читай скринкасты, слушай подкасты, читай сайты по твоей тематике и самое главное продолжай верстать )
если фронтенд (javascript) - прочитай в первую очередь "Подробное руководство JavaScript - Флэнаган" там в голове более менее устаканится по js и там еще больше будет ясности в голове, куда копать )

p.s. подскажи пожалуйста, как ты на главной сделал слайдер, очень понравился - интересно :)

Дэвид Флэнаган. Подробное руководство. - мастхев

Медиа выражения, как описал Sagan, а так же можешь начать с bootstrap`а
потом флекс бокс глянь

es6 и промисы? :)

Увы, но не выйдет...
Виктор верно описал сейчас процесс, пишите свой код внутри результатов полученных из запроса к апи

https://tinypng.com/
Идеальный сервис по соотношению: вес/качество

Пользуюсь вот этим - просто идеален
bootstrap-datepicker.readthedocs.io