Перейдите на сайт Plunker и отредактируйте файлы index.html и style.css, чтобы они соответствовали примерам 1 и 2. Остальные имеющиеся файлы удалите. После этого нажмите чёрную кнопку Run. Если всё сделано правильно, то вы увидите результат, похожий на рис. 1.

Рис. 1. Plunker
Для дальнейшей работы можете сохранить код или скачать его на свой компьютер в виде архива.