Какой порядок обучения веб-верстке вы посоветуете?

Заинтересовался интернет версткой я довольно давно, месяца два назад начал изучать основы. (я ведь вообще не понимал, как позиционировать элементы, пытался делать все через html, благо после упорных поисков я нашел и разобрался) .Так вот, я имею средний уровень знаний html и css, который планирую улучшать еще как минимум месяц(использовал уроки soraxа, различные мастер-классы и сейчас прохожу курс на htmlacademy). И вот я наткнулся на bootstrap, некий SASS... А впереди еще Javascript с JQUERY и php. Насколько нужен бутстрап? Что за SASS и зачем он? Нужно ли изучать бутстрап и SASS, либо же выбрать что-то одно?(кстати есть еще некий LESS) После html css и этих "назовем их инструментами" следует учить Javascript и какой-либо фреймворк к нему, а затем уже php(python с django мне не очень импонирует, так как язык уж больно общий). Простите, если я понимаю что-то неправильно, просто хотелось бы конкретики. Минус самообучения в том, что трудно найти стоящий четкий план, и ты хватаешь кучу ненужного материала. (про английский кстати писать не надо, я в процессе :3 )
  • Вопрос задан
  • 2648 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
По вашим словам кажется, что вы понятия не имеете о том, какой инструмент для чего нужен. Так что рекомендую следующий план:

HTML: практика -> Pug или любой другой препроцессор -> понять зачем он нужен -> микроданные -> wai-aria
CSS: практика -> каждый день выкладывать один сверстанный компонент на CodePen -> всякое разное -> изучить внутренности normalize.css -> использовать autoprefixer -> изучать хорошие практики -> написать свою сетку -> познакомиться с БЭМ, RSCSS -> осознать полезность методологий -> препроцессоры (LESS проще, SASS моднее, есть еще много разных) -> PostCSS -> осознать разницу между пре-процессором и пост-процессором
JS: ES6+ -> Babel -> понять смысл инструмента -> писать много велосипедов -> много велосипедов -> больше велосипедов богу велосипедов -> паттерны проектирования -> тестирование
Gulp/Grunt и Webpack/Browserify: осознать разницу -> использовать по мере надобности -> научиться автоматизировать все, что можно автоматизировать
Git, NPM: без комментариев

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

Есть еще один дельный совет: читайте ответы на тостере и изучайте решения, которые народ предлагает. Разбирайтесь с тем, как они что-то делают. В перспективе сами отвечайте. Метод утенка рулит.

Ну и умение задавать вопросы тоже лишним не будет.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 6
flygrounder
@flygrounder
Python/Django
Простите, а что вы хотите изучить, верстку? Зачем вам тогда php и django? Разберитесь с JS, на чистых HTML+CSS+JS сделайте что-нибудь дельное, а потом уже приступайте к фреймворкам(bootstrap), который много чего сделает за вас и препроцессорам(LESS, SASS) которые сделают CSS более "умным".
И да, хватит уже оценивать свои знания какими-то уровнями-ачивками. Ну нет такого понятия, как средний уровень CSS ;)
Ответ написан
tema_sun
@tema_sun
Да бессмысленно это. Просто берите и делайте что-то реальное. Блог там себе сделайте, или еще что-то. Вопросы сами будут возникать, вот их и решайте.
Потом, когда вы выбросите ~50-ую свою поделку, поймете, что "вот теперь я вроде начинаю что-то понимать, а именно, что я нифига не знаю".

А вообще оснвной навык, кототрый вам нужен - уметь гуглить. Вот этот список вопросов что вы сюда написали, напишите их в Гугл.
Ответ написан
theobroma
@theobroma
javascript developer (ReactJS)
Здесь проблема даже не SASS, Bootstrap и т.д., а "телеги впереди лошади". Невозможно понять предназначение инструментов не столкнувшись с проблемой, которую они решают! Нельзя понять зачем бензопила если есть ножовка по дереву, пока не начнешь пилить определенные объемы древесины! Да бензопила сложней в понимании и обращении, но ее освоение стоит того...
Вернемся к Вебу. У меня, к примеру, быстро возникло ощущение, что чего-то не хватает в самом CSS и я начал смотреть на препроцессоры. Вам нужно просто продолжать верстать макеты. Через боль со временем начнут проявляться проблемы и возникнет желание что-то ускорить, что-то упростить. Тогда и начинают искать инструменты для этого.
Препроцессоры
1. Сложность будет увеличиваться и захочется, например, писать все для удобства не в одном файла . Тогда станет ясно для чего импорты препроцессоров(нативный импорт CSS лучше не использовать).
2. Обычно в макете несколько цветов, которые повторяются во многих местах. Их можно присвоить в понятные переменные типа $my-green или $my-orange, которые легко запомнить и не искать hex значения. "$my-orange" проще запомнить чем "#FF8C00", не так ли?
3. В макете размеры в пикселях, а нужно верстать в em и rem. На этот случай есть конечно лайфхак с 10px в основе вместо 16px, но миксины по конвертации на все случаи жизни. То есть можно применить "em(18)" и 18px скомпилятся в "1,125em" и не нужен калькулятор.
Не стоить пытаться применить все возможности какой-то технологии сразу. Время придет для всего, но сначала используйте, что считаете нужным именно в данный момент. Попробуйте SASS на уровне "переменные, миксины, нестингы". Это уже будет норм. Рекомендую максимально просто это сделать c gulp и gulp-sass. Чисто для компиляции SASS и без всего остального, пока не созреете на большее.
Boostrap
Не стоить учится верстать с бутстрапом. В нем можно подсмотреть как реализована та или иная штука, просто вдохновиться, посмотреть на компоненты, которые вообще могут быть. Но применять его лучше, когда уже верстать не хочется))) А это будет, когда захочется использовать фрейморк для написания приложения. На что можно обратить внимание, так это что такое сетка(grid) и ее реализация. Вот онa используется много где.
Начать ознакомление можно просто подключив через тэги c CDN . А потом уже можно устанавливать с NPM sass версию, кастомизировать и т.д.. Вообще приступая к изучению любой технологии нужно пытаться сгладить кривую обучения и не хвататься за все сразу.
Javascript
На счет JS лучше CodeWars не знаю ничего. Тут подробней отвечал. Потом нужно учить фронтэнд фрейморки, но это уже совсем другая история...
Ответ написан
@Alex_ART
https://proglib.io/p/2017-web-developer-path/
А вообще что бы понять все прелести фреимворков, нужно написать много строк кода своими руками, осознать что ты делаешь сильно много одинаковых строк из проекта в проект, и тогда уже только юзать фреимворк, и юзать оттуда решения с полным пониманием того что ты делаешь.
Я очень долго искал всевозможные советы и пути, но пришел в итоге к этому :
Что бы хорошо писать код - нужно постоянно писать код. Будут возникать вопросы, будешь искать решения. И с каждым днём будет всё меньше вопросов, вот и весь путь.
Ответ написан
Комментировать
dom1n1k
@dom1n1k
SASS, LESS, Bootstrap, jQuery и любые штуки со словом "фреймворк" - на начальном этапе нужно забыть! Только чистые HTML и CSS.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы