Всем привет!
Наверное тут есть люди, которые секут фишку в HTML, CSS и JS. Вопрос в основном к ним. Подскажите, как правильно организовать процесс обучения, чтобы он был максимально эффективным?

Чтобы было понятно, что имеется в виду, приведу пример про 1С. Вот чтобы я мог бы посоветовать самому себе сейчас тому себе, который находился в начале пути 1С:
1. Читать книги от 1С. например профессиональную разработку, разработку управляемого интерфейса и т.п.
2. Если не знаешь как сделать, смотри как сделано в типовых. Да и вообще просто приветствуется смотреть в типовые.
3. Читать ИТС и бывать на партнерском.
4. Не стесняться покупать хорошие курсы у ребят типа Курсы по 1с.рф или Чистова.

Пока купил пару курсов на udemy.com, думаю чуть позже подписаться на линду.

Что посоветуете?
Спасибо.

Смотря что ты хочешь, именно "освоить верстку" или получить результат?

Можно начать осваивание 1С с алгоритмов, Кнута и С++, а можно с работы в конфигураторе и конструкторе запросов

adobe muse глянь и аналоги, есть уже сервис который из картинки в фотошопе делает верстку https://psd2htmlconverter.com/ru/

(0) Сделай свой сайт

(2) про автоматическую верстку не знал, изучу подробно эту тему.
(3) Конечно это есть в планах. Но это примерно как "Написать свою конфигурацию". Если новичок напишет свою конфигурацию, это не сделает его способным решать реальные задачи на реальном предприятии.

Я прямо категорически вот этот блог рекомендую http://webdesign-master.ru/

(5) Спасибо, попробую

(4) Устройся в веб-студию подмастерьем.

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

самый эффективный способ - в (3)

(8) >работать за бесплатно или за очень низкую плату

Извини но может все же к психотерапевту сходить на обследование?
Суть что пытаться нынче стать веб-верстальщиком это редкостное извращение.
Хуже только пытаться стать чертежником (не на компе, а вручную карандаш/бумага).

(11)+ Пойми уже лет ...цать никто не ваяет с 0 сайты, всегда берут за основу некую CMS и "натягивают шаблон".

Учиться рекомендую здесь : https://www.w3schools.com/
Один из самых адекватных ресурсов.

>> всегда берут за основу некую CMS и "натягивают шаблон".
я конечно не очень в теме, но что-то мне подсказывает, что это не совсем так и не всегда берут некую CMS. Уточни пжл, какая CMS используется на сайте mista.ru?
еще подозреваю, что "натягиваемый шаблон" не появляется сам по себе)

(13) спасибо, присмотрюсь поближе к этому сайту.

(14) Подумай в каком году появился сайт mista.ru

omain: MISTA.RU
nserver: dns1.yandex.net.
nserver: dns2.yandex.net.
state: REGISTERED, DELEGATED, VERIFIED
person: Private Person
registrar: RU-CENTER-RU
admin-contact: https://www.nic.ru/whois
created: 2001-10-06T20:00:00Z
paid-till: 2017-10-08T21:00:00Z
free-date: 2017-11-09
source: TCI

(14) Был вариант задействовать шаблонный форум, но он не вписывался в стратегию. Пришлось пойти по сложному долгому пути, но вот уже вторая версия Книги знаний была сделана на основе открытого движка. http://wiki.mista.ru/

(17) Угу когда то сайт работал на движке 1С  ))

(18) Не было такого никогда.

(18) Можно глянуть в заголовки Мисты :)

(12) Ничем не обоснованное высказывание.
Я надеюсь разница между WordPress и Yii понятна?

(21) Yii это бакенд, шаблоны натягивают на фронтенды

(22) "Yii это бакенд". Ни в коем случае. Yii является бэк-ом "в том числе". Это типичный MVC фрейм. Такой же как и мелкософтовский ВебДев и прочие.
И фронт, который они генерируют юзает в том числе Bootstrap, jQuery ...
А чтобы сделать шаблоны вьюх помимо Smarty или Razor нужно знать и HTML и CSS. Можно, конечно юзать типовые. И для внутреннего потребления оно вполне себе пойдет. Но для "продать" нужно знать и HTML и CSS и JS.

+ (23) В гуголе Razor находится не с первого раза. Именно тот, который для C#. Поэтому вот :
https://www.w3schools.com/asp/razor_syntax.asp
https://habrahabr.ru/post/98241/
https://msdn.microsoft.com/ru-ru/library/gg606533(v=vs.100).aspx

(23) (24) Я разве спорю что не нужно знать html и css и js?

Просто заметил что бесполезны чистые знания с 0, лучше сразу изучать применительно к "натягиваю шаблонов".

(25) Чаще всего сначала надо нарисовать, а потом натягивать

(26) Ну нарисовать это фотошоп обычно а не верстка

(27) Фотошоп с каких-то пор html генерить умеет?

(28) Умеет, есть конвертеры, причем даже нейронные сети помнится читал заюзали

(29) Конвертировать и, простигоссподи, Word умеет. Только приличным людям такое показать стыдно.

(30) А зачем людям это показывать? Железо позволяет и не такие ужасы с вложенными DIV'ами переварить и это явно шустрее чем нынешние суперфреймворки на js в тыщщи и десятки тыщ строк кода

(31)+ В смысле конечная картинка для пользователя будет так же выглядеть в html/css как и исходный psd

(0)Верстка - это вёрства. js - это js.

По верстке одни курсы, по js другие.

Начни с Вёрстки. Можно прям сразу с bootstrap начать, тогда сможешь уже очень быстро верстать. А потом пройти углубленный курс по html-css для повышения скиллов.

Если хочешь стать вообще профессионалом, то нужно проходить курсы. Самому тяжеловато будет. Весь торрент завален курсами. Нужны именно такие, чтобы были домашние задания.
Я вот сейчас https://loftschool.com/course/web-development
прохожу.

Но первый мой курс по верстке был у
https://www.youtube.com/channel/UCt36CWL85NGtOgUMZ2X6x5g/videos
сейчас он бесплатный. раньше был платный. советую с него начать.
https://www.youtube.com/watch?v=cEIq7FhMXs8  - вот первый урок "базовая технология верстки".

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

(2)Фуууу. Вы видели код, который генерирует Adobe Muse?

Тогда уж онлайн сервис Webflow... Там чистый код. Но лучше нормальную ручную верстку освоить. При использовании правильных инструментов скорость верстки будет феноменадльно быстрой.

Еще полезно смотреть курсы Лаврика на ютубе.

(34) Вы видели код которые генерирует платформа 1С?
"тогда уже лучше чистый С++ освоить" ))

(35) А смысл? Тогда уж лучше освоить ассемблер, если хочешь сделать всё сам. Но опять же, в чём смысл?

http://www.ozon.ru/context/detail/id/135731189/  Вот хорошая книга с заданиями после каждой главы. Потом прикупи книгу по бутстрапу.

(36) точно и написать свои html+css со своим js, вместо того чтобы учить чужие ))

(38) Это хорошо обучает, кстати.
Например, Flash закрывается. Что идёт на смену?

(39) HTML5+JS

(40) Надо изучать новый стек языков.

(35) 1С не генерит код на С++. А js в веб-клиенте очень дельный.

(41) just for fun: elixir для бэка https://elixir-lang.org/
Для любителей фреймворков http://phoenixframework.org/
Такой RoR в функциональной реинкарнации.

И elm для фронт-энда https://elm-lang.org/
React просто отдыхает.

(30)На тему "да ладно +- 10к строк в коде такие мелочи.." а потом сайт на айфоне не открывается. Открывшись съедает 50% заряда батарейки. Адаптивность, кроссбраузерность, это вообще все от лукавого. Страничка весом в пару мегабайт, и основной вес не картинки.. и так сойдет.

(35)
>> При использовании правильных инструментов скорость верстки будет феноменадльно быстрой.

Напишите подробнее что имеется в виду.

(45) Это миф. Как "серебряная пуля".

(46) В общем случае наверное да, но ведь вполне могут существовать инструменты, значительно облегчающие труд разработчика.

Если привести примеры из 1С, как
1. использовать различные консоли,
2. Использовать готовые функций из БСП
и т.п.

У самого из инструментов пока только текстовый редактор brackets да несколько расширений к нему)

(46)+ можно использовать css-фреймворки, типа bootstrap, foundation, bulma и т.д. Тогда верстка будет собираться из готовых блоков. Это ускоряет верстку. Динамический UI на голом js сейчас мало кто пишет. Все пользуются реактами-ангулярами. Мне нравится vue.js.

Пиши свой скрипт для мисты. Самый верный и ПОЛЕЗНЫЙ вариант

Если же цель работать в фронтенде, то нужно какой нибудь фреймвок изучать. Например Реакт