Odinokun

Препроцессоры на полную мощь (попробуйте jade для html), gulp, библиотека снипетов, опыт, опыт и ещё раз опыт.

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

Ну и самое главное:


Позиционируйте себя, находите своего клиента.
Быстро хотят все, но есть и те кто понимает, что лучше подождать немного дольше и получить готовый, кроссбраузерный, качественный продукт. Чем кривую поделку, которую потом в 2 раза дольше править.

Очень старая проблема и не только на iOS, а на большинстве браузеров для мобильных устройств в принципе. Суть в том, что использование background-attachment: fixed; сказывается на производительности и он тупо отключён в мобильных устройствах. Может однажды всё будет работать, но пока так. После нескольких лет поиска решения я пришёл к следующим выводам.

Если эффект крайне необходим, вы можете использовать технологию параллакса (есть бесплатные плагины), когда позиционирование элемента изменяется динамически во время прокрутки, либо использовать отдельный пустой div, где вместо background-attachment: fixed; ставите position: fixed; этому пустому блоку и регулируете всё через z-index.

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

HTML
Тут ваша разметка шапки, но с разложенными по классам свойствами CSS.

<header class="main-header bg-cover bg-fixed">...</header>

CSS
Из своего основного класса убираете всё, что касается фона, кроме картинки. Естественно, если вам там ещё что-то нужно, вроде высоты, флоатов и тд., сами решите. Теперь добавляете два класса, которые пойдут как фреймворк и могут использоваться многократно. Один растягивает картинку (центрует и без повторений), другой делает тот самый эффект fixed.

.main-header {background-image: url(img/picjumbo-bg5.jpg);}
.bg-cover {background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-background-size: cover;}
.bg-fixed {background-attachment: fixed;}

JS
Добавляете этот код в шаблон или в файл скриптов. Если ваш сайт открывают на мобильных устройствах, скрипт находит все блоки по классу bg-cover и убирает из них класс bg-fixed, если он есть. Фоновая картинка просто будет скролиться со всем остальным.

var device = navigator.userAgent.toLowerCase();
var mob = device.match(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/);
        if (mob) {
            $(".bg-cover").removeClass("bg-fixed");
        }

Полифил это хорошо, но работает он весьма медленно, поэтому лучше стараться не полифилить такие вещи.
Для фоллбека до процентов можно использовать простую конструкцию:

width: 100%;
width: 100vw;
height: auto;
height: 100vh

Если браузер знает vw \ vh, то предыдущея строчка перекроется. Если не знает, будет использовать первую с процентами \ auto.

https://www.pexels.com/
www.splashbase.co
www.designerspics.com
https://foodiesfeed.com//
jeshoots.com
picography.co
https://pixabay.com/
www.splitshire.com
www.splitshire.com
www.lifeofpix.com
www.gratisography.com
getrefe.com/downloads/category/free
www.imcreator.com/free
cupcake.nilssonlee.se
publicdomainarchive.com
isorepublic.com
stokpic.com
kaboompics.com
wefunction.com/category/free-photos
mmt.li
lockandstockphotos.com
raumrot.com
https://stocksnap.io/
freenaturestock.com

Готовые плагины
https://github.com/RobinHerbots/jquery.inputmask
digitalbush.com/projects/masked-input-plugin

почитать как сделать предзаполнение/автозаполнение

Изменяем value по change/input/keyup событию. Что там расписать то можно?

Работать малой командой это счастье. Когда все работают :) и есть результат.

Чтобы зарабатывать нужны заказы, чтобы были заказы нужна репутация, чтобы была репутация, нужны знания и опыт, а чтобы они появились, нужны... заказы. Замкнутый круг.

Перед перечислением напишу самое главное - команда единомышленников, должна хотеть развиваться и добиваться результата и создавать себе репутацию.

Далее тезисно, не в порядке приоритетов, а как вспоминается:

0) Нужна специализация у каждого и у команды (пишу как видится с учетом размера вашей команды).
* тим лидер или старший разработчик. Он будет задавать стандарты качества и контролировать работу. Будет отвечать за архитектуру.
* разработчик-верстальщик
* разработчик-админ
* разработчик-базовик
* манагер и если людей мало, он же продажник. Должен знать все CMS, что вы будете применять. Чтобы мог без запинки показать клиенту, как создавать публикацию, редактировать и проч.

1) 80% времени работать над коммерческими проектам и 20% времени работать над своим проектом. Для повышения квалификации как минимум. А если выстрелит - то скоро вообще не надо будет работать с клиентами :) Когда нет заказов - все работают над "своим" проектом, повышают квалификацию, применяют и тестируют новые технологии или новые нагрузки. Если вы грамотно придумаете для себя задачу, то процесс работы над ней и результаты можно использовать для продвижения своей команды. Допустим вы взялись за разработку модуля обмена данными бухгалтерия-магазин. Посмотрите какие есть решения уже на рынке для вашей CMS. Сделайте удобнее и лучше или быстрее или тупо лучше документированное решение. Это позволит встать в "магазин" модулей для CMS и вам даст новых клиентов. Когда у вас есть узкое и качественное решение вашему продажнику проще будет разговаривать с клиентом и влезать в уже существующие айтишные инфраструктуры. Переделать онлайн магазин вам никто уже не даст, а вот заменить модуль на ваш смогут.

2) Технология производства. Особенно, если работает несколько человек. У вас должны быть единые стандарты и технологии для написания, документирования, работы с изменениями кода, своя "библиотека" решений, которые вы могли бы использовать как можно чаще. Создавать свои чеклисты для производственных этапов и по возможности автоматизировать рутинные операции.

3) Если речь идет о вебразработке, то скорее всего надо будет отлично знать до трех из самых популярных CMS. Желательно получить сертификат/статус.

4) Стандарты работы с клиентским проектом нужны. ТЗ, документация, обучение клиента и проч. Чтобы минимизировать трудозатраты или хотя бы минимизировать неоплачиваемые трузозатраты.

5) Знать английский язык на уровне чтения документации минимум.

6) и ... потихоньку добавлять себе новые направления. Уходить от чистого веба в веб+моб, или от "сайтов" в сложный е-коммерс. Идеально, когда клиентом меньше, а доходы больше. Для этого нужны глубокие знания в относительно узком направлении и два-три клиента серьезных клиента. Не старайтесь лепить много дешевых сайтов.

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

Это так, тезисно.

Когда-то начинали с товарищем делать сайтики, только я был "программистом", а он собирал заказы. Одни из ошибок, которые позволили загнуться нашему совместному предприятию (просуществовали мы почти 2 года) - это:
- недостаточно опытный программист (это я), плюс, если брали помощников, то они были еще неопытнее меня.
- не составлялся четкий план на разработку, проектирование проекта не проводилось, из-за чего по ходу дела возникали ситуации, которые можно было решить еще на этапе проектирования, но нет, приходилось тратить время уже во-время разработки. Как следствие этого - неожиданное увеличение сроков.
- не было четких условий для заказчика, т.е. типовой договор был, но, например стоимость правок оговаривалась налету, некоторые заказчики округляли глаза и приходилось делать забеслпатно. Следствие чего заказчик был царь и бог и некоторые их долги по оплате не были отданы до сих пор.
- желание сэкономить, нет, я понимаю, что экономить нужно, но не на том, что приносит тебе доход, по-этому дизайнеры были хреновые, помощники говеные и т.д. Из-за чего заказчик был не доволен, а срок разработки проекта очень сильно увеличивался.
- заказы по сложности и требованиям несопоставимые со стоимостью, т.е. напарник брал сложные заказы за смешные деньги, сетуя на то, что город маленький (300 000 жителей) и никто платить не хочет, в итоге с созданием и доработками выплаты задерживались, следующие заказы брались , пока недоделаны предыдущие и получался ком, которые ничего хорошего не обещал.
- ну и результатом всего этого стало огромное количество долгов и плохих отзывов.
Ну вот такие были проблемы у студии "Рога и копыта" из двух человек, какие вспомнил ))
*пы.сы. не знаю, зачем это написал, просто, что-то вспомнилось.

Я бы начал с психолога. И потом плавно перешел к психиатру. У человека явно навязчивые идеи. А язык?! ASP.NET WebForms до некоторой степени позволяет программировать мышкой.

Самый первый эффект тот самый.

codepen.io/P233/pen/EaGAl

Для вертикального слайдера нужна другая логика и структура, лучше и проще взять готовое, а не пилить свой велосипед. Можно этот или этот

Вот пример с bxSlider(Ticker + vertical mode)

А если нужен прозрачный фон в заголовке, делай три border'а и добавляй вверху две черточки с помощью ::before и ::after

.block {
	position: relative;
	border-right: 2px solid black;
	border-left: 2px solid black;
	border-bottom: 2px solid black;
}
.block::before,
.block::after {
	position: absolute;
	content: "";
	width: 30px;
	height: 2px;
	top: 0;
	background: black;
}
.block::after {
	left: 0;
}
.block::before {
	right: 0;
}

Постоянно тут этот вопрос проскакивает.

var maxHeight = Math.max.apply(
   null, 
   $.map($("div"), function(e){
      return $(e).height();
   })
);

$("div").height(maxHeight);

Пример использования