Каким путем выучить современную верстку с 0?

Здравствуйте. Возникла проблема, в интернете есть много ресурсов, где учат чистому HTML, CSS, как верстать, ничего не используя. И есть туторы, как верстать, используя уже какие-то странные вещи, как плагины, gulp и т.п... Ну, я думаю, кто знает, тот в курсе :) Вообщем, хотелось бы как-то найти ресурс где есть либо объяснение этого перехода (с легкой верстки к сложной) или знать порядок как что изучать. Может кто помочь, проконсультировать? Заранее спасибо.
  • Вопрос задан
  • 9800 просмотров
Решения вопроса 1
Garfields
@Garfields
Советую обратить внимание на курсы, которые я указал ниже.
Обучение
• Джош Кауфман «Первые 20 часов. Как научиться чему угодно... быстро»
ru.learnlayout.com
htmlacademy.ru/program
w3schools.com
flexbox.ninja
Карта развития веб-разработчика

Видеокурсы HTMLAcademy
• htmlacademy «Базовый HTML и CSS»
coursehunters.net/course/bazovyy-html-i-css-18-2017
• htmlacademy «Продвинутый HTML и CSS»
coursehunters.net/course/prodvinutyy-html-i-css-po...
• htmlacademy «Профессиональный HTML и CSS Уровень 1»
coursehunters.net/course/professionalnyy-html-i-cs...
• htmlacademy «Профессиональный HTML и CSS Уровень 2»
coursehunters.net/course/professionalnyy-html-i-cs...

Справочники
htmlbook.ru
webref.ru
developer.mozilla.org/ru/

Выполнение заданий
flukeout.github.io (изучение селекторов в CSS)
flexboxfroggy.com/#ru (изучение flexbox в CSS)
flexboxdefense.com (изучение flexbox в CSS)
dmitrylavrik.ru/training/process/flexbox-grid (создание сетки на flexbox)
cssgridgarden.com/#ru (изучение gridbox в CSS)

Задачи для практики:
htmlbook.ru/practical

Макеты для практики:
drive.google.com/drive/u/0/folders/0B8LYygUI_oGeSG...
freebiesbug.com/psd-freebies/website-template/
symu.co/freebies/templates-4/
dcrazed.net/free-photoshop-psd-website-templates/
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
alex_shevch
@alex_shevch
Frontend Developer
По моему тут такой вопрос каждый день задают)
Html - академия как вариант, для начала самое то. Там интерактивно, сразу с практикой и с довольно правильным порядком.
Ответ написан
Комментировать
@AlexeyPikalov
Я лично начал учить с реальных объектов. А именно. Нарисовал дизайн не большого лендинга на фотошопе, и начал верстать, потихоньку помаленьку, собирать знания, так быстрее происходит процесс обучения, но не сказал бы, что правильный потому что на начальных этапах код кривой и верстка на костылях, но мы же учимся )
Ответ написан
Комментировать
AngryCrow
@AngryCrow
Верстак
Ну и практический способ: выбираешь любой psd-исходник (тренировочный), желательно такой, где ты знаешь реализацию не всех элементов, и верстаешь. Когда доходишь до подобных блоков, начинаешь гуглить, обращаться к документации, и когда понимаешь механизм работы - уже можешь применять это в других проектах.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы