问题遇到的现象和发生背景
学校web development 的project，teacher要求我们用html,css,javascript做一个杂志的网站，我基本上已经完成了网站的设计和代码，但是这个是用网站设计软件自动生成的，我用我自己的一点点知识修改了一点点；teacher需要我们给大部分的代码添加注释，html,css,javascript 都要加注释，所以其他程序员能够看得懂。代码有几万行，而且很多都是计算机自动生成，有没有自动生成注释的软件；而且我对CSS和javascript不是很懂，希望能够改一下CSS和javascript的Class,有没有什么好的方法和方便的工具,
我主要是使用bracket和它的拓展，其他json什么我都不是很懂，希望专家多多帮助
问题相关代码，请勿粘贴截图
比如说我的问题就是给这个section的class能让人看的懂，还有添加注释，让他更加简洁，有没有什么好的工具和方法
<section class="u-clearfix u-grey-10 u-valign-top-lg u-valign-top-xl u-valign-top-xs u-section-3" id="sec-443a">
<div class="u-expanded-width u-palette-2-dark-3 u-shape u-shape-rectangle u-shape-1"></div>
<div class="u-palette-3-base u-radius-50 u-shape u-shape-round u-shape-2" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500"></div>
<img src="images/Young-Muscular-Man-Doing-Lunges-In-Dark-Gym.jpg" alt="" class="u-image u-image-round u-radius-50 u-image-1" data-image-width="1109" data-image-height="614" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="0">
<div class="u-list u-list-1">
<div class="u-repeater u-repeater-1">
<div class="u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-1" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-direction="" data-animation-delay="500">
<div class="u-container-layout u-similar-container u-container-layout-1"><span class="u-file-icon u-icon u-text-palette-3-base u-icon-1" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"><img src="images/7998511-4.png" alt=""></span>
<p class="u-text u-text-1">BillSports makes you practice workout <span class="u-text-palette-2-base" style="font-weight: 700;">persistently</span>
</p>
</div>
</div>
<div class="u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-2" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-direction="" data-animation-delay="500">
<div class="u-container-layout u-similar-container u-container-layout-2"><span class="u-file-icon u-icon u-text-palette-3-base u-icon-2" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"><img src="images/1442912-5-26.png" alt=""></span>
<p class="u-text u-text-2">BillSports makes you practice workout <span style="font-weight: 700;" class="u-text-palette-2-base">amusingly</span>
</p>
</div>
</div>
<div class="u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-3" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-direction="" data-animation-delay="500">
<div class="u-container-layout u-similar-container u-container-layout-3"><span class="u-file-icon u-icon u-text-palette-3-base u-icon-3" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"><img src="images/1442912-5-26.png" alt=""></span>
<p class="u-text u-text-3">BillSports makes you practice workout <span class="u-text-palette-2-base" style="font-weight: 700;">breezily</span>
</p>
</div>
</div>
</div>
</div>
</section>
运行结果及报错内容
能够运行出一个挺好的网站，网址是billsports.nicepage.io，需要VPN才能上去，如果可以的话去看一下
我的解答思路和尝试过的方法
我用Bracket来解决这个问题，也用了许多bracket的拓展，但是效果不是很理想，希望专家能够提供一些方便的方法和工具（最好是bracket的），我现在只用了beautify来美化html,css和javascript的格式，希望专家能提供更方便的工具(比如自动注释，方便更改Class,加上javascript even listener的工具）
我想要达到的结果
1，HTML, CSS, Javascript 注释 (最好有自动生成的工具）
2，HTML的class，CSS的class, 改到让人类能够看的懂，我现在不是很懂CSS, 有没有快速改CSS的工具
3，我的javascript也是在nicepage的网站上自动生成的，有没有快速写javascript eventlistener 的工具？我想理解这个网站的javascript,也想自己写一点简单的javascript event handler或者listener
4，所有工具最好都是bracket有关，其他的也可以，谢谢专家了
