xmoonlight

HTML:

<div class="poster">
  <div class="info">
      Lorem ipsum...
  </div>
</div>

CSS:

.poster {
   display:inline-block;
   width:100%;
   position:relative;
}
.poster .info {
   position:absolute;
   left:0px;
   bottom:0px;
}

Без канваса - можно тоже такое сделать.
Просто поворот слоя в 3D-пространстве через CSS 3D deformation.
По линку - сделано вот на этом: www.pixijs.com

Пример 1
Пример 2
Пример 3

Искать: тут

вот пример

1. padding-bottomу контент-блока (там где слайдер) сделайте равным высоте за футера и поставьте за футер: z-index:1.
2. А при появлении меню просто меняйте padding-bottom контент-блока на высоту меню. Если не менять - меню откроется "по-верх" (как сейчас на анимации).

Начни с реального белого листа бумаги:
1. Попытайся придумать себе инструмент для решения твоей любой задачи: как бы ты хотел, чтобы он выглядел и нарисуй.
2. Затем - пытайся сделать такой же интерфейс на компьютере (сетка HTML и вёрстка).
3. Затем - "оживи" функциональность с помощью JS.
Всё идёт от твоей/поставленной задачи!

lo-th.github.io/Oimo.js/examples/test_basic.html
Сыпать нужно жёлтые цилиндры высотой в 1-2 см.

Бонусом: https://github.com/bebraw/jswiki/wiki/Physics-libraries

https://popper.js.org
https://atomiks.github.io/tippyjs/

bennettfeely.com/clippy

animejs.com/documentation/#timelineParameters
https://codepen.io/collection/XLebem/#

alertifyjs.com

https://jsfiddle.net/wjw60em3/

var a=window.prompt;
window.prompt = function (message) {
	alert('Начали!');
	return a(message,'сюда вот...');
}

alert('Вы ввели: '+prompt('Введите текст'));

https://habrahabr.ru/post/348210/ (его же публикация.)

Будьте осторожны с подключаемыми CSS файлами из внешних источников.
Данный пост написан исключительно как proof-of-concept в ознакомительных целях.

Список проектов на Github

Может это подойдёт:
1. https://mobirise.com/
2. https://bootstrapstudio.io/

ИМХО: Я бы сделал на одной из них шаблон и натянул на последнюю жумлу...

Без использования svg.

Не, ну тогда Canvas однозначно!

ЯП и веб-разработка не имеют ничего общего между собой.
ЯП - это инструмент, реализующий логику работы алгоритма через написание кода.
Веб-разработка - это применение различных наборов веб-технологий (общепринятых правил для обмена информацией в интернете), позволяющих выносить логику работы алгоритма в сеть для возможности удалённой работы с сетевым приложением, запущенном на удалённом устройстве (например, на веб-сервере).

Ничто не мешает разрабатывать интернет-сервис на том языке программирования, который Вы уже знаете. Если хотите влиться в общий поток - учите PHP.
В плане корректного отображения в браузерах на клиентских устройствах, необходимо будет изучить гипертекстовую разметку (HTML5), создание каскадных таблиц стилей (CSS) и javascript (для обработки событий DOM-структуры веб-приложения браузером).