Правильный frontend?

Здравствуйте! Нужен совет!
Нужно изучить препроцессоры (sass/scss например), git, gulp... таким образом выйти на новый уровень frontend developer'a! Планирую сделать не большой лендинг с использованием этих технологий и похода дела изучить их! Хочу это все изучать в связке с бутстрап!
Подскажите пожалуйста как правильно построить работу, какой-то алгоритм действий?
Интересуют любые детали!
Буду очень благодарен за помощь!
  • Вопрос задан
  • 7917 просмотров
Пригласить эксперта
Ответы на вопрос 15
@webdisigner
Сначала поработай с нативным css,html,js - 1 годик так точно
Потом поработай с bootstrap, сначала научись переопределять стили, потом изменять стили в исходном файле bootstrap.css. После этого научись пользоваться файлами bootstrap.js ну и конечно тут не обойтись без фундаментальных знаний Jquery - 15-30 дней и ты уже в теме
Потом установи sass, и поработай с ним через командную строку
Потом попробуй расширить sass, например установи susy, breakpoint-sass
Опять поработай с командной строкой - 14-30 дней
Потом установи интерпритатор sass, например compass
Разузнай все тут, поработай с командной строкой, установи config для compass`a
7-10 дней на это все, многое узнаешь.. - 2 дня макс.
->
Потом чтобы это все говно сжать у себя в мозгу как раз придумали gulp
Вот с этих пор, ты познаешь истинное удовольствие с gulp`ом
Тут то и понадобятся навыки работы с консолькой
Понимание глобального и локального нахождения плагинов и не только
Установишь node.js, выберешь себе консольку по-красивее и по-краше, прочитаешь туториалы, просмотрешь видосы и ты уже спец по gulp - 12-15 дней макс

материал:
1) sass - sass-lang.com
2) sass-playground: www.sassmeister.com (поддерживает susy,breakpoint-sass)
3) susy - susy.oddbird.net (любые сетки, полный контроль)
4) bootstrap - dedushka.org (неплохие уроки по css), www.w3schools.com/bootstrap/default.asp (неплохие уроки по css и js бутстрапа)
5) gulp - https://www.youtube.com/watch?v=9zwwmjGz1Vs&list=P... (неплохие уроки по gulp)

Ты все еще хочешь стать фронтенщиком? :)
Ответ написан
zualex
@zualex
Senior Software Engineer
Вот есть мой репозиторий - это готовый шаблон для адаптивной верстки. Как раз там все прелести используются (git, gulp, sass, autoprefixer)
Имеется пример.
Так же рекомендую к прочтению Руководство по написанию Sass
Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com
Туториал по Grunt: nano.sapegin.ru/all/grunt-0-4
Когда все настроите поймете что писать на LESS/SASS не сложнее чем на чистом CSS, так как грунт сделает всю фоновую работу по конвертации в CSS за вас.

Бутстрап пока что отложите. Этот фреймворк вам сейчас помешает понять как оно все работает. Но в будущем очень поможет, когда все остальное уже будете знать.

Так же порекомендую вот эту тему: Какие есть практические курсы\уроки по html5 + css3 + javascript?
Ответ написан
Создайте приблизительно такую структуру проекта:
project/
project/src/
project/src/scss/
project/src/js/
project/src/images/

Создайте package.json командой npm init, заполните всю информацию, название проекта, автор, зависимости и т.д. Установите gulp, создайте git репозиторий и файл gitignore в котором будут папки node_modules/ app/ и т.д. Создайте gulpfile.js, добавьте его в индекс(в репозиторий) и сделайте первый коммит. Затем напишите пару задач в gulpfile.js и установите пару модулей. Все ваши исходники будут собираться в папку app/, а в ней уже будут app/css, app/js, app/images и т.д.
В итоге ваш проект можно будет легко поднять просто клонировав репозиторий и сделав npm install, а затем запустив gulp.
Ответ написан
@SirBataneg
веб-разработчик
Могу предложить для начала вот это https://github.com/Insayt/frontend-devil , там есть ссылка на статью на хабре о том, как это готовить)
Более подробного мануала не видел. Для начала самое оно :)
Ответ написан
@marcellefter
HTML5, PostCSS(с ним можно и LESS/SCSS/Stylus), Gulp(Browser-sync для live reload) он быстрее, Bootstrap и конечно хороший настрой.
Ответ написан
artemmalko
@artemmalko
Frontend developer 2gis
Очень советую TARS, как раз подойдет для текущей задачи. Есть подробное описание на двух языках + статьи на хабре.
Ответ написан
@frontendthug
1. Первым делом разберитесь, что такое пакетный менеджер(в нашем случае npm)
2. Попробуйте понять, как работает сборщик проекта (Gulp). Основы Gulp.
2. Попытайтесь внедрить туда те технологии, которые Вас интересуют. ( Даже если Вы их не выучили, в инете полно гайдов по внедрениям разных технологий в Gulp .Это избавляет от использования программ типа PrePros ).
3. Начните изучать SASS.
4. Внедрите bootstrap-sass в свой проект.
5. Постоянно практикуйтесь.

Из источников, где можно всё это хорошо подучить, я могу выделить несколько:

WebReference - много вкусностей для начинающих. Именно этот сайт помог мне в начале пути фронтендера.
Frontender Magazine - огромное количество полезных статей.
Zencoder - тут тоже можно много чего найти по Вашим предпочтениям.
Прогрессор - аналогично предыдущему.

Вам должно вполне хватить данной мной информации. Успехов!
Ответ написан
apavlyut
@apavlyut
www.pavlyut.com
Просто подпишитесь на твиттер https://twitter.com/jsunderhood и через пару недель у вас будет достаточное представление о современном хорошем фронтенде. Там же и вопросы задавайте.
Ответ написан
mikaspell
@mikaspell
Frontender
Что тебе тут посоветовали, фронтендом даже и не пахнет... Фронтенд - это знание js и использование его фреймворков, знание некоторых php фреймворков да и вообще самого php(хотя бы основ), а основы фронтенда - это знания верстальщика - html(а лучше jade или haml), css(а лучше scss или less) и jquery

кстати, дока по sass на русском - sass-scss.ru
Ответ написан
almac
@almac
Фронтендеру нужно знать следующие технологии:
https://i.imgur.com/EB3TIdK.png (картинка взята отсюда - https://parbhatpuri.com/skills-essential-for-a-fro...)

Я знаю лишь половину (с фокусом на верстку, а не на JS), и мне этого хватает для большинства проектов. Но лучше все же изучить все, что на картинке - тогда вы будете ниндзей фронт-енда )
Ответ написан
@denikeweb
Freelancer, creative developer
Я бы посоветовал двигаться шагами, которые закрепляют одну (максимум две) технологии. Но это больше вопрос психологической нагрузки — проще, когда ты используешь в 40% случаев незнакомую технологию, когда остальные 60% являются технологиями, в которых Вы уже имеете опыт.

В принципе, можете использовать такую последовательность действий:
1) Напишите небольшой лендинг (2 экрана, думаю, будет достаточно), используя Bootstrap. Если Вы раньше с ним не работали, то добавлю, что у Bootstrap, если брать в общем, есть 2 функции — структура блоков на сайте (с обеспечением адаптивности) и готовые элементы интерфейса. То есть, для сайта с нестандартной модульной сеткой и прорисованными дизайнером лучше написать несколько лишних строчек CSS, а для лендингов Bootstrap в самый раз.
2) Установите git. Создайте пустой проект, чтобы просто "пощупать", а потом создайте новый проект на основе лендинга. Разберитесь с основными терминами git и поработайте с сервером (можете использовать BitBucket), почитайте о gitHub, внесите какие-либо изменения в проект и добавьте их в git
3) Установите SASS (перед этим Ruby). Перепишите весь css-код в соответствии с возможностями sass. Если в документации SASS есть описание возможностей, которых нет в лендинге, добавьте новый блок, чтобы попрактиковаться с некой конкретной возможностью. Я почитал в ответах, что также советовали попробовать less и Stylus. По Stylus не скажу, так как с ним не работал, а less, как по мне, не стоит — у него меньший функционал, да и по популярности он намного ниже, потому сложнее будет искать ответы на вопросы.
4) Автоматизируйте процессы, используя gulp (можно просто пройтись по документации, чтобы иметь список действий, можно почитать инструкцию в Интернете)

По ощущениям, этот список для изучения примерно на сутки, но может Вы растянете, а может за 8 часов, к примеру, разберетесь. В любом случае, желаю успехов в изучении!
Ответ написан
Я сделал видео про Git.Я там объяснил про ветви про коммиты итд.Видео
Ответ написан
@Vet888
люблю web разработку
Я бы советовал тебе найти третий курс по HTML и CSS у Специалиста, там как раз подробно рассказываются и описываются те технологии которые ты указал и даже больше. Узнаешь про (SASS, LESS, STYLUS) для себя сделаешь выбор какой больше понравиться. Узнаешь про препроцессоры HTML (Haml). Про Gulp тебе скинули хорошую ссылку выше от loftblog.
Ответ написан
Ваш ответ на вопрос

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

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