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

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, чтобы что?" Если на вопрос есть четкий ответ - да, нужно использовать. Если только бла-бла типа "ну это современно, прогрессивно и пр" - использовать старые железобетонные приёмы.

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

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

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