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

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

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

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

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

Ну и умение задавать вопросы тоже лишним не будет.
Ответ написан
Пригласить эксперта
Ответы на вопрос 7
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.
Ответ написан
PavelUstyugov
@PavelUstyugov
php
less - забыть
sass (scss) - нужно
bootstrap - нужно. на фрилансе полно заказов на шаблонах, сделанных на bootstrap + заказы на верстку именно на bootstrap. нужное знание. там всего пару дней на изучение потребуется. и свертать один макет бутстрапом. Но это нужно для галочки, да и удобно.

js- это уже следующая ступень. Отделяющая верстальщиков от фронтэнд разработчиков. Этот язык и его фреймворки нужно изучать. Потом. Освойте верстку сначала. Научитесь подключать jquery плагины (коллапсы, слайдеры, галерейки). Потом начнете изучать js. Не факт еще, что вы осилите этот язык программирования. но jqery освоить может даже не программист. А если вы прогер, то спокойно проходите курсы от html academy, учите Flex а потом js.

но если вы программист и хотите заниматься именно программированием, то вам в backend. тогда php Вместо js Учите. и Laravel. будете много денег зарабатывать освоив Laravel.
Ответ написан
Ваш ответ на вопрос

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

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