Ну например...
1) Научился верстать используя HTML и CSS - это круто.
А прочитав документацию по Bootstrap-3 сверстай тот же дизайн и будет другой взгляд на верстку.
А затем прочитай документацию по Bootstrap-4 сверстай тот же дизайн и опять же открой для себя новое, но самое главное почувствуй разницу.
А потом прочитай про SASS и сверстай вновь дизайн без Bootstrap и сравни с тем что ты верстал до получения новых знаний...
Или еще вариант...
Умеешь ты использовать PHP даже к БД подключаться можешь и данные записываешь /
считываешь - круто!
А ты возьми PHP FrameWork например CodeIgniter (прост для развертывания - тупо скачал распаковал. Без зависимостей и использования командной строки ) и сделай тот же сайт используя возможности FrameWork и поймешь насколько быстрее и проще реализовать тот же функционал.
<div class="json_to_html"></div>var file = {
"data": [
{ "song" : "mp3/cairnomount_lo.mp3"},
{ "song" : "mp3/girlwho_lo.mp3"},
{ "song" : "mp3/pipershut_lo.mp3"},
{ "song" : "mp3/tailtoddle_lo.mp3"}
]
};
$.each( file.data, function( key, value ) {
$('.json_to_html').append(value.song);
});<div class="col-sm-12">
<div class="question">
<h3 class="vopros"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> ВОПРОС</h3>
<p style="display:none;" class="otvet">ОТВЕТ</p>
</div>
</div>
<div class="col-sm-12">
<div class="question">
<h3 class="vopros"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> ВОПРОС</h3>
<p style="display:none;" class="otvet">ОТВЕТ</p>
</div>
</div>
<div class="col-sm-12">
<div class="question">
<h3 class="vopros"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> ВОПРОС</h3>
<p style="display:none;" class="otvet">ОТВЕТ</p>
</div>
</div>$('.vopros').click(function() {
$(this).next('.otvet').toggle(200);
});При отправке данных на чужой сайт, если отсутствует проверка откуда приходят данные, вы получите тот-же ответ как если бы вы сделали это в браузере.