Полина Емельянова

fotorama.io

Легкий в понимании и настройке. Пока лучшее, что я видел.

Несколько полезных ссылок:
Организация кода для препроцессоров;
Способы организации CSS-кода;
Эстетичный Sass;
Sass-архитектура вашего проекта.

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

Я делаю отдельные сайты под языковые версии либо вложенные site.com/en либо поддоменом en.site.com

+ В админки все чисто, нет дублирующего контента
+ Возможность изменять медиа контент на разных языках. К примеру баннеры/слайдеры
+ Если используются custom fields сам бог велел
+ Возможность продвигать разные языкое версии по отдельности
+ Независимые базы данных, + в карму за безопасность
- Дублируется медиа контент

avocode

Ну, я вот стараюсь всегда максимально упростить (писал в коменте выше, почему), тут бы вполне можно было бы вот так:

<header class="header page__header justify">
          <a href="../index.html" class="header__logo logo__link">
            <img src="../img/big-logo.png" class="logo__pic">
            <img src="../img/logo.png" class="logo__pic-small">
          </a>
      <nav class="nav">
        <button class="toggl-menu"><span></span></button>
        <a href="#" class="nav__link">О нас</a>
        <a href="#" class="nav__link">Абонементы</a>
        <a href="#" class="nav__link">Контакты</a>
      </nav>
</header>

Отступы в header'e можно сделать с помощью padding: 0 20px (а box-sizing: border-box уже и так для всех элементов у вас задан). Вот нащот списков внутри nav вроде довольно много копий уже сломано, но я вот считаю, что nav по определению уже список и можно тупо прямо в него ссылки лепить, без зазрения совести) В общем, как-то так)) А, да, и для раскрытия меню (да ивообще интерактивных элементов, не предполагающих переход по ссылке) лучше кнопку или просто span ставить.. Хотя, в последнем случае могут быть всякие сюрпризы в ойфонах

Для меня самый просто параллакс, это задать у блока background-size: cover и background-attachment:fixed

Берете любой сайт с интерактивом, ставите Firefox, в него ставите Firebug, нажимаете F12, открываете вкладку Network и видите, как фронтэнд, того,.. с бекэндом.

Давайте по пунктам постараюсь рассказать, как вообще надо работать во 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 вообще не проблема, их куча бесплатных в интернете.

бэм
бэм
css
uwebdesign рулит
и вот тут еще понравился ответ Павла
+ loftschool отлично показывают и рассказывают

*это как по мне

По поводу того, что flex лучше всегда - это конечно чушь. Есть много простых ситуаций, когда он не дает никакого профита, тогда как старый добрый float решает проблему целиком. Флекс, конечно, тоже решит - но с побочными эффектами в виде неполной кроссбраузерности.
Предложения при этом делать фоллбеки на флоатах умиляют - если всё равно их делать, так не проще ли ими и ограничиться?!

В итоге, ответ на вопрос очень простой - flex нужно использовать там, где он дает конкретные преимущества. Самое очевидное - нужно автораспределение ширины блоков с подстройкой к ширине контента. Или вам нужно менять порядок блоков (свойство order).
Если ничего этого не планируется - flex не нужен! Сейчас уже наплодили сеток и "фреймворков", где flex используется фактически для имитации float-ов! Ну типа же стильно, модно, молодежно. Я ж крутой разработчег, не хухры-мухры.

При верстке каждого блока нужно задавать себе вопрос: "я использую flexbox, чтобы что?" Если на вопрос есть четкий ответ - да, нужно использовать. Если только бла-бла типа "ну это современно, прогрессивно и пр" - использовать старые железобетонные приёмы.

> программирование - это наверное тот профиль деятельности, которым я могу с интересом заниматься даже в свободное от работы время

Что и требовалось доказать. Это сейчас для тебя программирование это так, прикольчик, хобби.
А в итоге тебе придется заниматься той же аналитикой + кодингом, ибо в программирование сбор бизнес требований - это почти неотъемлемая часть работы программистов, особенно если вы работаете в серьезных компаниях с долгоиграющими проектами, где постоянно меняются правила бизнеса.

В итоге ты будешь тем же аналитиком + копаться в куче гов... кода.

Как с тобой связаться?

Зацени сам свой код через 4-7 месяцев

Не смотрите на этот тренд негативно. Тот же fl.ru обязательной оплатой отрезал значительную часть школьников от проектов, если раньше грубо говоря было 50 человек, готовых сверстать страницу за 1500 рублей, то теперь таких умников ну может человек 5 от силы будет. Постепенно и заказчики отучатся от низкой цены, правда на это могут уйти годы.