evgeniy8705
@evgeniy8705
Повелитель вселенной

Как организован workflow фронтенд разработчика?

В общем, сижу уже второй день, собраться все не могу.
Для многих наверное это покажется глупым вопросом, но для меня это вообще как темный лес.

Вот сидел я очень много времени, да изучал верстку, верстал какие то демки. За все время не сверстал ни одной законченной страниц, постоянно, то какое то меню, то форму, то галлерею и т.д, все по отдельности, в основной на codepen. Сижу уже не не первый год, с некоторой переодичностью так вот занимаюсь. То начинаю учить, то бросаю.

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

За все время попробовал много всяких штук. Много про что читал. В общем всего по немногу. Теорией и мелкой практикой сыт по горло.
html5, css3, sass, stylus, jade, gulp, js, bootstrap, jeet, nib, rupture и т.д
Много всего перепробовал, но вот единого представления как это все организовать и связать между собой у меня нет.

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

Вроде как все по отдельности понятно, а вот как все это во едино собрать и использовать не пойму.

Подскажите как уже начать нормально делать фронтенд, а не клепать демки на codepen. Хочется все таки профессионально этим заниматься. Везде пишут про все по отдельности, а как вот испльзовать все это в одном проекте хз.

Как вот с нуля организовать все?
Где можно посмотреть на уже готовые проекты, вернее на файловую структуру?
Как организовано все у вас?
  • Вопрос задан
  • 3655 просмотров
Пригласить эксперта
Ответы на вопрос 12
serjikz
@serjikz
web-developer
Давайте по пунктам постараюсь рассказать, как вообще надо работать во front-end.
1. Вы должны научиться думать блоками (блоками в потоке, выпадающими из потока, flex-блоками и тд и тп). Научиться можно только когда вы поймете как на самом деле надо верстать.
2. Начните с простой вёрстки. Возьмите макет в .psd (80% работы над каждым сайтом вы будете пользоваться PhotoShop и если вы его не знаете хотя бы на предбазовом уровне - печаль беда), импортируйте оттуда все нужные вам картинки ну и начинайте верстать шаблон поблочно, смотря где какой цвет шрифта, размер, жирность, размер блока, фон этого блока и тд и тп.
3. Зачем вы себе морочили голову gulp, sass, bootstrap когда ещё верстать даже нормально не умеете - я увы не понимаю. Вам ни один из этих инструментов не поможет пока вы не будете уметь именно верстать. На данный момент не думайте о технологиях, структуре и тд и тп. Просто сверстайте хоть какой-нибудь макет хоть как-то.
4. Общайтесь с людьми, которые вам могут помочь продвинуться в этой сфере. Таковых крайне много. Можете ко мне в скайп добавиться и узнавать некоторые вещи, можете к другим, к кому угодно фактически, наверно 60-70% верстальщиков с удовольствием поделятся с вами своим опытом
5. Пишите код аккуратно. Был тут недавно вопрос, в котором человек предоставил код, а там ни{ } нету, ни отступов нормальных нет, ну и половина ; просто потеряны, а в html теги применяются не по назначению вовсе. Нельзя так делать ни в коем случае, иначе ваш уровень не поднимется с уровня плинтуса.
6. Файловая структура: папки css images js и на уровне с этими папками лежат файлы .html либо .php всё. Если говорить о препроцессорах и сборщиках - не лезте пока в это, потом узнаете как только научитесь нормально верстать. Я думаю нет смысла объяснять что в папках тех должно лежать. Если вы считаете себя особенным - можете распределять внутри images картинки по папкам на составляющие, к примеру сделать папку отзывов, папку галерей каких-нибудь и тп, но я чаще так не делаю, не хочу чтоб дополнительные символы засоряли мне код и ухудшали читаемость.
7. Связывать между собой html и css судя по всему вы и так уже умеете и привязывать к ним js. Не знаю что вам мешает сверстать любой сайт если вы понимаете как устроены эти 3 технологии (а на них по факту всё и держится).

Итог: Забудьте про sass, gulp и прочее пока не сверстаете шаблонов 10, эти технологии вас никак не ускорят и никак вам не помогут пока вы не будете уметь просто верстать с шаблона .psd и писать нужные скрипты на js или jQuery хотя бы. Научитесь немного фотошопу и занимайтесь практикой. Найти те самые .psd вообще не проблема, их куча бесплатных в интернете.
Ответ написан
sabramovskikh
@sabramovskikh
Давай так.
Бери PSD шаблон небольшого лендинга.
Открываешь в фотошопе, сохраняешь все картинки из него.
Делаешь папку проекта где будут index.html style.css и папка с картинками.
В голове делишь на блоки - верхнее меню, слайдер, первый блок, второй блок. Делаешь код html для меню, делаешь для него стили в style.css и так по очереди. Описал один блок в html, написал для него css.
Сейчас тебе больше ничего не надо, только картинки, html и css на самом базовом уровне, никакой адаптации, никаких saas less gulp b прочего не надо.
Качаешь для хрома расширение pixel perfect и выравниваешь все блоки как в дизайне.

Так ты делаешь один лендинг, один корпоративный сайт и один интернет магазин. Сам функционал тебе делать надо.
Каждый проект заканчиваешь до конца, пока все не будет по дизайну. Будут вопросы пиши на тостер. Закончишь пиши на тостер, проси оценить верстку, только выкладывай куда-нить на бесплатный хостинг, работаешь над тем, что посоветует.

Далее уже только после всего этого можешь на лофтблог посмотреть, там есть уроки по разным технологиям фронтэнда
Ответ написан
@metaf
Демки формочки-кнопочки говорите клепаете? Может, вам понравится такой подход? demo.patternlab.io ? Создаете маленькие кусочки сайтов, а потом собираете все воедино. То есть берите понравившийся макет, делайте именно по макету то, что умеете - меню, кнопку, шрифты - и постепенно собирайте его, как паззл.
С методологией вообще не морочьте себе голову, это очень индивидуально, либо навязано (в нейтральном смысле этого слова) коллективом, в котором вы работаете. Пишите говнокод. Когда начнут возникать реальные проблемы, типа, почему у меня уже 10 уровней вложенности, может это неправильно? или как мне разобраться в этом цсс файле в 5000 строк? Почему у меня страница грузится 5 секунд, хотя на ней только текст и 2 картинки? Как, черт побери, мне сделать так, чтобы header не нужно было править в 200 html файлах?
Идёте дальше. Выбирайте что-то одно. Не слушайте, если вам говорят, что scss лучше чем Stylus. Выбрали - учите дальше. Никто вам в работе не откажет, если вы покажете сайты сделанные на стилусе, а не на лессе/сассе. Разобравшись в одном, вы уже будете примерно представлять, как работает другое и при необходимости научитесь этому другому за пару дней. Выбрали фреймворк? Верстайте на нем. И т.д. Ну нету в вебе ничего единого, каждая крупная компания создает свои библиотеки, свой процесс работы - но всё это основано на ИХ опыте, а не вашем.
И еще, оставьте розовые мечты про идеальный веб. Очень редко в крупных проектах все делается правильно. Чем больше проект разрастается, чем больше человек работает над ним, тем уродливей он выглядит. Дааа, есть компании, где есть свои стайлгайды, где все верстальщики делают всё одинаково и у них получается идеальный проект. Но это верстальщики с многолетним опытом, вы туда со старта не попадете. Попадете туда, где будут говнокодить. А вам остается только делать выводы и учиться на своих и чужих ошибках.
Ответ написан
Комментировать
SkiperX
@SkiperX Куратор тега CSS
Ключевые навыки верстальщика это скорость верстки, соответствие макету, адаптивность, подключение и настройка плагинов jquery, анимации и эффекты.
Именно их нужно подтягивать в первую очередь. Про все остальное можно было бы сказать "на работе научат", но не в вашем случае) и в каждой конторе используют свой набор плюшек.

Я сам начинал с хтмлакадемии и после бесплатных курсов уже мог верстать что угодно, где не нужен js. Возможно у вас нет системы или берете слишком сложные макеты..

Цель к которой вы хотите прийти какая?
Если веб студий в городе нет, то остается фриланс..
Можно искать заказы по верстке, начинать с одностраничников, где не нужны препроцессоры и оптимизаторы, и постепенно увеличивать навыки.
Главное все делать качественно, чтобы были постоянные клиенты.
Ответ написан
@sarathorn
php программист, веб-дизайнер, коллекционер
Рассказываю про себя (многие профи закидают камнями, но...).

Две папки: images и assets. Внутри assets есть папки css, js, fonts, scss. Что в них лежит понятно из названия. В scss лежат исходники, в css всё компилируется.
Для компиляции использую Prepros. Адепты других софтинок меня сейчас загнобят, но Prepros делает ровно то, что должен с удобным интерфейсом под виндой, с минимумом настроек и просто весьма неплох.

До HAML и подобных моментам ещё не дошёл и не знаю... Меня более чем устраивает классический HTML.

Вместо бутстрапа использую самописное творение.

Ваша проблема, как и у многих начинающих, осознание, что творить придётся на ОГРОМНОМ стеке технологий. Нельзя просто знать CSS и HTML. Этого уже давно недостаточно. Нужны препроцессоры, постпроцессоры, обработка изображений... Всё...

Попробуйте выделить свободный денёк и потихоньку заверстать какой-нибудь элементарный блог, но на полном стеке. Сделайте раскрывающееся меню, респонзив-сетку и основные стили. Всё. Так вы доберётесь до понимания как всё работает в комплексе.

А затем уже можно переходить на более сложные макеты.
Ответ написан
Комментировать
tolfy
@tolfy
Фирменный стиль
Есть работа. Реальный сайт в количестве 1шт.
Советы получите в процессе производства.
скайп antonybark
Ответ написан
Комментировать
@FoxInSox
Устройтесь на работу, там расскажут как, когда и что.
Ответ написан
Xserber
@Xserber
Full-stack developer. React.js, AngularJS + NodeJS
Нужен опыт полной верстки сайта, а не какой-то отдельной части. Для этого скачивайте любой шаблон или можете мне в скайп постучать скину.

Начать работать с макетом по просмотру и вырезке с помощью Photoshop, когда уже осточертеет можете переходить на более современные вида Avocode.

Опытные верстальщики делают собственный шаблон для разработки. Тут нам и нужны уже сборщики в вида озвученного вами gulp(grunt, webpack и прочие). Настройка кому удобней.

Я для примера использую gulp+sass+autoprefixser+browersync.
HTML препроцессоры не зашли мне, стандартный emmet радует.

У каждого сугубо своё отношение к тому или иному "инструменту". Вам нужно набить обычные шишки и получить опыт, для понимания базовых вещей. Следовательно все по старинке верстать и разным методом. (float'ами, flex, block-table и табличная О_о (для электронных сообщений) ).

P.S. Удачного вам пути в это парой не благодарное дело :)
Ответ написан
Комментировать
@Elizavetta
Matroid: gamedev/js-разработка
Вы очень часто должны будете вписываться в архитектуру заказчика/работодателя, вы строго говоря и не должны решать архитектурные вопросы проекта.
Какая файловая структура должна быть, по какой методологии верстать, как это все использовать в связки с препроцессорами и шаблонизаторами

вот это все от проекта к проекту отличается, если вы даже код фронтенда не пишите, то Вы ничего не решаете).
Но у вас должен быть какой-то дефолт. Например, bem/bem-like, scss, autoprefixer, какой-то дефолт адаптивности. Если вам дают набор psd, то логично разделяете файлы по этой структуре, чтобы фронтендер все оперативно внедрил.
Где можно посмотреть на уже готовые проекты, вернее на файловую структуру?

весь гитхаб завален фронтендом
можешь на лофтблог посмотреть

не рекомендую
Приходите бесплатно поработать, я Вам выдам нетривиальный шаблон, а Вы попробуйте его сдать как заказчику, в качестве эксперимента.
Ответ написан
Vadimk-dev
@Vadimk-dev
Front-end
Привет, con_! Сейчас я сижу в такой же затрудненности как и ты, если интересно пообщаться и чем-нибудь поделиться, свяжись со мной вк
Ответ написан
Комментировать
apeks
@apeks
Очень серьезный человек
htmlbook.ru
https://webref.ru
codeacademy.com

файловую структуру нормального приложения можно посмотреть скачав бесплатный движок opencart или wordpress
Ответ написан
Ваш ответ на вопрос

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

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