Начал изучать 3 месяца назад с нуля html+css, 2 месяца ушло на html+css, научился делать простые лендинги, даже бургер-меню на checkbox вместе с адаптацией, сейчас с января получилось изучить js до 6kata(то что сам решить могу) на codewars, дальше 6 ката не могу идти, две недели бился об них и практически безрезультатно, решил не тратить настолько много времени на задачи и перейти к практике с dom, но здесь мои размышления расходятся, а именно в том, что такое по-настоящему интеграция js в свои проекты, верстку? На codewars передо мной стояла точно заданная задача, которую надо решить, а здесь какой-то тупик. Как можно дальше развиваться? Что можно учить? На протяжении месяца пока учил js к вёрстке не прикасался, основная не укладка в моей голове в том, как эти две вещи совместить воедино
SQLpodavan228, к практике нужно переходить как можно раньше. Не нужно думать, что вы сначала выучите всю теорию и потом начнете писать идеальные сайты. Писать, писать, потом переписывать, с учетом новых полученных знаний. И так итерациями двигаться к цели.
а то я изначально думал, что нужно дойти до 5 kata хотя бы и выучить алгоритмы для продолжения
Алгоритмы на пустом месте вы забудете буквально через неделю, алгоритм примененный в живом проекте запомнится если не навсегда, то на достаточно большое время, чтобы считаться заученным.
Конечно очень сильно зависит от вас, но на вопрос "основная не укладка в моей голове в том, как эти две вещи совместить воедино", можно ответить просто - начните изучать React или Vue. У первого порог входа наверно немного больше, нежели у второго. Второй сейчас чуть более популярен. Именно они решают вопрос соединения JS и "верстки".
SQLpodavan228, тут ведь какое дело, на нативном js, css, html сейчас мало кто пишет. Если вы хотите развиваться профессионально, вы рано или поздно придёте к фреймворку. Попробуйте, будет сложно, непонятно, значит вам пока рано.
Автору вопроса: JS помогает управлять поведением элементов, помогая решать нужную вам хотелку / задачу. Он не интегрируется в вёрстку, словно отдельный продукт, это скриптовый язык, который нужен, чтобы вы могли управлять свёрстанными вами элементами на странице: их реакцией на нажатия по ним кнопки мыши или клавиатуры и на прочие события, можно управлять их html-атрибутами, создавать программно собственные элементы и вставлять в нужное вам место на странице и т.д. Для этого существуют браузерные API, которые помогают во взаимодействии с элементами на странице, запросами данных и многим другим.
По ссылке вам уже дали хорошие источники - например, учебник и документация на doka или MZDN используйте их последовательно переходя от темы к теме.
В качестве дополнительных тренировок, сначала идите от задачи: что хотите сделать какое приложение, пусть самое простецкое - дальше задавайте вопрос наставнику / Интернету / нейронке с просьбой объяснить ответ. И пытайтесь понять решение, как и почему оно работает так, как работает, пытайтесь повторить, только не копипастой, а честно переписывая ответ строку за строкой - это важно, так мозг волей-неволей будет пропускать решение через себя, что даст вам бонус в долгосрочной перспективе.
Если ты не понимаешь как взаимодействует js с дом деревом - то попробуй например переписать свой бургер с чекбокса на button, чтобы по клику показывалось меню (обычно эти вещи так и делаются, а не через чекбокс). Как сделаешь бургер, делай выпадающее меню(не используя тег details), и так далее ты пойдешь кар работать с дом деревом и эти вопросы у тебя отпадут.
P.S. Если у тебя щас есть такие вопросы значит - смотреть в сторону фреймворков тебе ещё рано, изучи нормально основы js и только потом приступай к изучению фреймворков, имхо.