Ivan Bogachev

<div><span>$</span><span>25</span><sub>Monthly</sup></div>

У вас тег sub только открывается, а тег sup только закрывается, причем по всей видимости не там, где должен - что-то тут не так...

<div class="button"><button>ENROLL TODAY</button></div>

Не нашел ни одной причины почему кнопка обернута в div с классом button - почему бы не применять стили к ней самой? И почему бы не трансформировать текст к верхнему регистру с помощью text-transform: uppercase (это относится и к заголовкам)?

div.outer div.inner ul li:nth-of-type(2n)

Наверху правильно заметили - используйте только классы (.outer .inner вместо div.outer div.inner). Также стоит отметить, что селекторы с такой глубокой вложенностью - зло. Разбивайте все на меньшие компоненты и почитайте про BEM или что-то еще в этом духе.

color: #2F4F4F;
color: white;
background-color: #f5f5f6;

Определитесь как задавать цвета - верхний и нижний регистр в сочетании с переодическими вкраплениями названий цветов создает невероятную кашу. Почитайте про препроцесоры (для начала про LESS - он самый простой) и начните использовать переменные.

font-family: 'Trebuchet MS';
width: 300px;
min-height: 470px;
font-family: 'Trebuchet MS';

Повторение - мать заикания. А если серьезно - постучите дизайнеру клавиатурой по голове, чтобы не использовал платные шрифты из Windows (без них у меня под линуксом ваша карточка выглядит как...)

Набросал демку на codepen с примером использования переменных в LESS, именованием классов в соответствии с rscss и вообще всякими фишками, которые могут быть вам полезны (значения всего брал на глазок, тестировал только в Chrome, но по идее должно работать IE11+).

Есть довольно занятное сочетание browsersync + localtunnel. Первый инструмент сам по себе при верстке используется, а при необходимости показать что-то, вы в одну команду расшариваете то, что делаете и посылаете ссылку клиенту. Он смотрит, потом вы все выключаете. Из занятного - browsersync продолжает исправно работать, ваш браузер и браузер клиента получаются связанными - скролл, нажатия кнопок, все действия, которые влекут за собой добавление/удаление классов у элементов - вы видите все, что клиент смотрит и можете сами что-то показать. Может быть удобно при одновременном общении в skype/hangouts. Для всего этого не нужен ни хостинг, ни белый ip, ни нормальное железо.

такую вещь

такая вещь называется tabs. Вам стоит сходить на codepen и посмотреть примеры, там народ как только не изгаляется: и на чистом CSS, и на скриптах, и с поддержкой wai-aria, и без. В вашем случае этот элемент повернут набок вместо традиционного для него горизонтального положения.

Первая ссылка из гугла дала код из 2007, когда вышла jquery и все стали клепать снежинки и переходы между страницами:

$(document).ready(function() {
    $("body").css("display", "none");
    $("body").fadeIn(2000);

    $("a").click(function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage);
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});

Разумеется можно это сделать и на чистом js.

Можно использовать label - с его стилизацией проблем не будет, а при фокусе на input его поднимать/уменьшать/убирать.

Нужна конструктивная критика

Ну давайте покритикуем... постараюсь все аргументировать.

Начнем не с кода, а с юзабилити так сказать: есть люди, которые используют tab для перемещения по странице. Это факт. В вашем случае получается, что в верхнем меню перемещаться можно только по словам (но не по иконкам), а по остальной странице - вообще нельзя. Т.е. формально перемещение идет, но ничего не выделяется и совершенно не понятно где мы находимся. Имеет смысл добавить для focusable-елементов стили для :focus.

Второе - при уменьшении экрана в некоторых местах надписи начинают наезжать (несильно, но глаз режет) друг на друга. Возможно вам стоит почитать статью про изменение размера шрифта в зависимости от размера экрана - иногда это очень полезно.

Ну а теперь перейдем собственно к коду. Скриптов у вас немного, поэтому буду говорить про CSS. Вопрос: у вас css файл на 2606 строк - вы пишете все в нем? Если да - вам стоит посмотреть в сторону систем сборки (grunt / gulp) - имеет смысл отдельные компоненты делать в отдельных файлах, а затем это все склеивать. Так проще ориентироваться в происходящем (и те, кто будут работать с вашим кодом после вас скажут вам спасибо). Опять же префиксы для браузеров можно будет расставлять автоматически.

Дальше:

.work_pic1-part1:hover span,
.work_pic1-part1:hover:before,
.work_pic2-part1:hover span,
.work_pic2-part1:hover:before,
.work_pic3-part1:hover span,
.work_pic3-part1:hover:before,
.work_pic4-part1:hover span,
.work_pic4-part1:hover:before,
.work_pic1-part2:hover span,
.work_pic1-part2:hover:before,
.work_pic2-part2:hover span,
.work_pic2-part2:hover:before,
.work_pic3-part2:hover span,
.work_pic3-part2:hover:before
...

жуть, однако. С практической точки зрения тут лучше всем этим элементам добавить один класс и для него задавать стили, чем писать такую простыню.

К концу файла глаза довольно сильно устают. Префиксы раздражают, как и множество одинаковых (и совершенно ни о чем не говорящих) чисел. Так что префиксы лучше расставлять автопрефиксером, а в будущем посмотреть на less / sass - препроцессоры упрощают работу и имеют разные плюшки вроде переменных (например длина анимаций просто напрашивается на вынесение в переменную), наследования стилей и.т.д.

Еще по поводу размера css: есть такое понятие как critical css - стили для первого видимого экрана. Их можно выделить автоматически (см. системы сборки) и встроить прямо в html. А все остальные стили загружать уже потом. Это создаст у пользователя впечатление быстрой загрузки. У Виталия Фридмана есть занятная лекция на youtube, где он рассматривает этот и другие вопросы оптимизации загрузки на примере smashingmagazine.

Комментарии. Их нет. В большинстве случаев они и правда не нужны, но после нарезки такого рода окончаний

</div>				
                </div>
            </div>
        </div>
    </footer>
</div>

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

Да и напоследок: названия классов очень разнородные - то дефисы, то подчеркивания, то длинные, то короткие, иногда в них видится система, но эта система переодически дает сбой. Не люблю я БЭМ, но, вероятно вам стоит почитать о нем более подробно (или про аналоги, решающие те же задачи - недавно тут на тостере был вопрос о том, что делать, если бэмоподобные классы перестали нравиться - пришли к выводу, что rscss тоже неплох).

P.S.: планшета под рукой нет, поэтому про тормоза ничего сказать не могу - на слабом нетбуке все работает более-менее нормально.

Пробовал использовать DSS (если быть точнее grunt-dss, поскольку все остальное собиралось с помощью grunt). Несмотря на то, что этот проект давно не обновляется, использовать его вполне можно. Вся идея состоит в том, чтобы в css (less/sass/...) писать комментарии вида

// @name Button
// @description Button component
//
// @state -small     - Smaller button
// @state -large     - Larger button
// @state -dangerous - Indicates danderous action
// @state -ghost     - Button with transparent background
//
// @see button-group
//
// @markup
//      <a class="button" href="">button</a>

и из них генерируется стайлгайд. Инструмент очень простой и поэтому легко кастомизируется - можно дописывать свои парсеры для чего-то кастомного (например если нужна информация о js для компонента или что-то еще), шаблон для всего этого - обычный html со вставками вида {{property}}.

Хорошее руководство по SVG есть на developer.mozilla.org, особенно полезно почитать про пути - сколько я видел такие волны делают через кривые Безье. А примеры как всегда есть на codepen, например вот этот. Но стоит помнить, что в общем случае может быть проще нарисовать то, что нужно, в графическом редакторе и экспортировать, чем подбирать числа руками.

codepen.io/sfi0zy/pen/rWmNWp