smiros

Если Вы устраивайтесь верстальщиком, то логично, что прежде, чем брать человека на постоянку, нужно понимать: что он умеет делать.
1. Обговорите заранее, как Вы планируете демонстрировать выполненную тестовую работу.
2. Верстайте и показывайте на виртуалке так, чтобы они могли посмотреть результат, но не могли посмотреть/зарипить код вёрстки.
----
Про 12 колонок: лучше сделать на чистом CSS. 100% делим на 12 и получаем одноколоночный класс шириной: 8,33%

Верстай. Какая разница? Если не возьмут на работу или кинут, никому ни горячо ни холодно не будет. Тебе останется практика, работадателю/кидале останется сверстанный макет.
Кто сказал что bootstrap это дурной тон? Все нужно использовать для своих целей. В нем есть достаточно хорошая сетка. Отдельно от всех "компонентов", использование этой сетки не является дурным тоном при верстке лендинга.
Не хотите готовую сетку, напишите сами. Хотя зачем, если макет заточен под сетку бутстрапа то используйте его сетку.

Верстать полноценно не стоит, да и вообще это тупо как-то.. возьмут верстку и потом скажут что не подошел.

В бутстрапе и так 12 колонок по дефолту. Верстать лучше на бустрапе или фоундейшн, или еще на чем-то.. на чистом css с нуля очень долго и прошлый век.
Еще используй scss для ускорения.

Не работать без предоплаты минимум 50% и не цепляться за таких вот заказчиков

(в голове мысли "что то тут не чисто)

абсолютно правильные мысли
Даже если Вы защитите свою работу от "угона", велик риск что просто проработаете за бесплатно, а Ваш заказчик обломавшись с Вами пойдет искать себе другую жертву, ибо сроки у него не жмут, так как когда сроки жмут заказчики готовы к предоплате не то что 50%, а даже 120% (20% - надбавка за переработки)

Таблица со значениями: сортировка по полям, реакция на клик по позиции с выводом доп информации

По таблице построить график

По клику сменить на график другого вида

Во первых одностраничники это далеко не всегда LP.
Это может быть полноценный сайт, с прайсами, описаниями товаров и тд, где все грузиться будет ajax-ом.

Ну и попробуйте без JS сверстать LP типа такого gardenestudio.com.br/index.php

Мне нравится как организовано все в кодеварс, там и разминаю мозги на досуге...

Вот несколько из тех, которыми пользуюсь я сам:
DocBlockr - документирование кода, очень удобная штука
ESLint - без комментариев
GitGutter - подсветка изменений после последнего коммита
NodeRequirer - require-илка модулей для ноды

Если нужен дебаг для браузера - у вас есть браузер, если нужен дебаг для ноды, то есть node-inspector. Никакие vscode и прочие "IDE" никогда не сравнятся по функциональности с node-inspector.

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

All Autocomplete,
File Navigator,
AdvancedNewFile,
Javascript & Nodejs Snippets,
jQuery,
Nodejs,
Java​Script​Next - ES6 Syntax,
Easy Motion (Особенно полезно, если есть навык слепой печати).

Я для этого сделала примесь:

.font(@fontName; @urlName: @fontName; @weight: normal; @style: normal) {
  font-family: '@{fontName}';
  src: url('/fonts/@{urlName}/@{urlName}.eot');
  src: url('/fonts/@{urlName}/@{urlName}.eot#iefix') format('embedded-opentype'),
  url('/fonts/@{urlName}/@{urlName}.woff') format('woff'),
    url('/fonts/@{urlName}/@{urlName}.ttf') format('truetype'),
    url('/fonts/@{urlName}/@{urlName}.svg') format('svg');
    font-weight: @weight;
    font-style: @style;
}

Потом вызываю её:

@font-face {
  .font(@fontRegular);
}
@font-face {
  .font(@fontRegular; @fontBold; bold);
}

Предварительно задав переменные с необходимыми шрифтами:

@fontRegular: 'OpenSans';
@fontBold: '@{fontRegular}-Bold';

На выходе получаю готовый CSS =)

@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans/OpenSans.eot');
  src: url('/fonts/OpenSans/OpenSans.eot#iefix') format('embedded-opentype'), 
  url('/fonts/OpenSans/OpenSans.woff') format('woff'), 
  url('/fonts/OpenSans/OpenSans.ttf') format('truetype'), 
  url('/fonts/OpenSans/OpenSans.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans-Bold/OpenSans-Bold.eot');
  src: url('/fonts/OpenSans-Bold/OpenSans-Bold.eot#iefix') format('embedded-opentype'),
   url('/fonts/OpenSans-Bold/OpenSans-Bold.woff') format('woff'), 
  url('/fonts/OpenSans-Bold/OpenSans-Bold.ttf') format('truetype'),
   url('/fonts/OpenSans-Bold/OpenSans-Bold.svg') format('svg');
  font-weight: bold;
  font-style: normal;
}

Вот, собственно, и всё) Может кому будет полезно.

Поставьте плагин Emmet для Sublime.

Я бы зашел с другого края, CSS и HTML это все прекрасно, но это все не более чем способ описать интерфейс.

PHP однозначно отстатвить в сторону, как и MySQL.

Коли уж вознамерился стать фронтендером, то должен до глубины души осознать, что никакого фронтенда во второй половине 10-х годов 21-го века от Р.Х. без JavaScript, вернее даже Ecma Script 2015+ не будет.

Таким образом, я настоятельно рекомендую прям вот вгрызаться в хитрости и нюансы JS, начиная с ES5, и походу пьесы добавляя нововведения, которые обязательно появятся. И практиковаться до умопомрачения в кодинге, например на том же codewars.com

Обязательно для вдумчивого просмотра https://www.youtube.com/watch?v=Bv_5Zv5c-Ts

Из фронтенд фреймворков для себя я выбор сделал в сторону React+Redux т.к. философия, имплементированная в этих библиотеках и их подходе к вопросу разработки интерфейсов целиком и полностью совпадает с той парадигмой, к которой я пришел собирая много лет грабли на своем собственном тернистом пути разработчика, в том числе и фронтенда.

Приятным бонусом будет то, что для разработки под Node.JS будет заложен хороший универсальный фундамент.

Тех, кто будет тебе рассказывать про Web-assembly не слушай, ближайшие годы это направление будет уделом очень узкого круга энтузиастов.

Если английским не владеешь в достаточной мере, чтобы свободно читать и слушать материалы, рекомендую задуматься и осознать, что актуальных материалов в русском переводе раньше чем через 6+ месяцев редко можно отыскать. Если хочешь быть на гребне волны, базовое владение инглишем must have. Вот тут обсуждение этого вопроса Английский язык от профессионалов?

Из SASS и LESS стоит выбрать что-то одно, в препроцессорах нет ничего сложного.

Если речь о вёрстке макетов для небольшой вебстудии, то про все страшные слова по типу Angular, React, Backbone можно забыть, как и о необходимости в чём-то серьёзнее связки HTML+CSS+jQuery.

Бустрап (любое другое творение для ускорения работы) будет плюсом не только для работодателя, но и лично для вас. Изучается за пару дней.

Достаточно солидны список, неправда ли?

Вы не правильно сделали декомпозицию. Дробите список и перемещайте местами пока не будет абстрактных "базовое знание mysql". Да и зачем фронтэндщику вообще базовое знание mysql или php? Вам нужно знать как с бэкэндом взаимодействовать (HTTP, принципы REST хотя бы приблизительно понимать), примерно понимать что такое базы данных (localStorage, IndexedDB). Словом никаких mysql/php. Это потом когда-нибудь освоите.

Или например список ваших фреймворков. Выкидываем backbone - о нем можно почитать просто что он есть и что из себя представляет, но на вашем этапе толку не будет. Есть тройка лидеров - React/Angular/Ember. Затем идут небольшие фреймворки и библиотеки - Aurelia/Vue/Backbone/etc.

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

p.s. я бы требовал еще es2015/2016, webpack/systemjs/вообще модули, препроцессоры стилей (хотя бы основы и понимание зачем нужны) и т.д.

Ну или еще - jquery можно не изучать. Ознакомиться - да, но на уровне джуниора нужно знать как решить стандартную задачку подключения плагина и организации очереди анимаций. А так в 90% случаев jquery даже и не нужен вовсе. Ну и AJAX - разберетесь с HTTP и вы познаете AJAX.

Ну и последнее. Джуниор это разработчик с годом опыта работы. Это человек который запросто может решать типичные задачи (можно пробежаться по фриланс биржам и составить представление о типичных задачах). Перед джуниором идет стажер.