Нашёл код в проекте, который поможет облегчить загрузку страницы с Яндекс.Метрикой, дабы она не блокировала основную загрузку.

<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
var loadedMetrica = false,
// Ваш идентификатор сайта в Яндекс.Метрика.
metricaId = [Указать код],
// Переменная для хранения таймера.
timerId;
if (navigator.userAgent.indexOf('YandexMetrika') > -1 ) {
loadMetrica();
} else {
// Подключаем Метрику, если юзер начал скроллить.
window.addEventListener('scroll', loadMetrica );
// Подключаем Метрику, если юзер коснулся экрана.
window.addEventListener('touchstart', loadMetrica );
// Подключаем Метрику, если юзер дернул мышкой.
document.addEventListener('mouseenter', loadMetrica );
// Подключаем Метрику, если юзер кликнул мышкой.
document.addEventListener('click', loadMetrica );
// Подключаем Метрику при полной загрузке DOM дерева,
// с "отложкой" в 3.5 секунды через setTimeout,
// если пользователь ничего вообще не делал (фоллбэк).
document.addEventListener('DOMContentLoaded', loadFallback );
}
function loadFallback() {
timerId = setTimeout( loadMetrica, 3500 );
}
function loadMetrica(e) {
// Пишем отладку в консоль браузера.
if (e && e.type) {
console.log(e.type);
} else {
console.log( 'DOMContentLoaded' );
}
// Если флаг загрузки Метрики отмечен,
// то ничего более не делаем.
if (loadedMetrica) {
return;
}
(function(m,e,t,r,i,k,a){m[i]=m[i]function(){(m[i].a=m[i].a[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

ym(metricaId, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-84834692-7');
// Отмечаем флаг, что Метрика загрузилась,
// чтобы не загружать её повторно при других
// событиях пользователя и старте фоллбэка.
loadedMetrica = true;
// Очищаем таймер, чтобы избежать лишних утечек памяти.
clearTimeout(timerId);
// Отключаем всех наших слушателей от всех событий,
// чтобы избежать утечек памяти.
window.removeEventListener('scroll', loadMetrica );
window.removeEventListener('touchstart', loadMetrica );
document.removeEventListener('mouseenter', loadMetrica );
document.removeEventListener('click', loadMetrica );
document.removeEventListener('DOMContentLoaded', loadFallback );
}
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/[Тут тоже код]" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

Подписывайся в мою тг https://t.me/itpriton, там много прикольного :B

- Специалистов по [js/php/c#/c++] сейчас не найти, одни самозванцы и неумехи.

- Шеф, Может установить вилку от 110 000 до 180 000 вместо 30 000 рублей?

- нет, ты что, кто он такой что бы я платил ему больше чем себе?

-Смотрите кого я нашел, хороший специалист, может возьмем его? знает это, это и это, проверил его навыки , реально хороший, редкая птица и денег мало просит.

- Ты что, такие права качать будут, через год затребует большую ЗП, нам нужно что-то попроще.

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

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

*прошло 3 недели*

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

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

Рассмотрим инструменты и подготовим их к работе.

Все материалы я буду добавлять сюда: https://github.com/pikaweb

Для работы с репозиториями нам пригодится GitBash. Скачать его можно отсюда:

https://git-for-windows.github.io/

В качестве локального сервера я использую OpenServer:

http://open-server.ru/

Кроме того понадобится установить node.js

https://nodejs.org/en/

Перейдем к подготовке. Создаем каталог в \Ваш путь\OpenServer\domains\

Запускаем OpenServer. Входим в его настройки, вкладка «Домены» и добавляем домен для созданной ранее папке. Запускаем сервер.

Теперь сайт будет доступен при вводе в браузере http://domain-name/

Настраиваем git (если еще не настроен). Я предпочитаю bitbucket т.к. он предоставляет бесплатные приватные репозитории. Ниже ссылки на github и bitbucked и на материал по настройке подключения сразу к обоим:

github.com

bitbucket.org

https://gist.github.com/rosswd/e1afd2b0b0d515517eac

Переходим к созданию git репозитория.

https://help.github.com/articles/creating-a-new-repository/

Добавление проекта в репозиторий:

https://help.github.com/articles/adding-an-existing-project-...

Подробный tutorial по bitbucket:

https://www.atlassian.com/git/tutorials/learn-git-with-bitbu...

Настроив репозитории, перейдем к настройке gulp для проекта. Для начала его нужно установить (необходим установленный node.js). Перейдя в терминале (можно и gibush, можно любой удобный для вас) в каталог с сайтом, выполняем следующую команду:

npm init

Вводим имя проекта, его версию, описание, ключевые слова и.т.д. Это создаст файл package.json, который будет хранить информацию о подключаемых нами пакетах. Теперь установим gulp и нужные для него расширения.

npm install gulp --save-dev

--save-dev обозначает, что мы сохраним информацию об установке пакета в package.json. Это нужно, чтобы не хранить в репозитории подгружаемые npm файлы для установленных модулей. Все они содержатся в node_modules. Чтобы node_modules не отправлялись на git, создадим файл .gitignore со следующим содержимым:

.gitignore

node_modules

А теперь продолжим устанавливать модули для gulp:

Модуль gulp-concat для конкатенации файлов:

npm install gulp-concat --save-dev

Модуль gulp-less для построения css файлов на основе less. Про это чуть подробней при верстке проекта.

npm install gulp-less --save-dev

Для less еще пригодятся less-plugin-clean-css (пост обработка и сжатие less файла) и less-plugin-autoprefix (автоматическое добавление вендорных префиксов, согласно базе данных caniuse.com)

npm install less-plugin-clean-css --save-dev

npm install less-plugin-autoprefix --save-dev

Для сжатия css файлов добавим gulp-minify-css

npm install gulp-minify-css --save-dev

Часть css я встраиваю в html, поэтому добавим gulp-inline-source

npm install gulp-inline-source --save-dev

Для удаления комментариев из html файла понадобится.

npm install --save-dev gulp-remove-html-comments

Для очистки файла от лишних пробелов и удаления комментариев из html файла понадобится:

npm install gulp-htmlclean --save-dev

Для слайдера я воспользуюсь http://kenwheeler.github.io/slick/

Для него требуется jquery

npm install slick-carousel –save-dev

npm install jquery --save-dev

Для верстки еще полезно подключить normalize.css или reset.css. Я обычно использую normalize.

npm install normalize.css --save-dev

Почитать про него можно тут:

https://htmlacademy.ru/blog/64-about-normalize-css

Продумаем общую структуру проекта

index.html

assets/

--less/

--fonts/

--img/

--js/

public/

--index.html

--css/

----build.css

--fonts/

--js/

----build.js

--img/

Где в public будет собираться проект.

Для настройки gulp следует создать файл gulpfile.js и подключить в нем все установленные плагины:

var gulp = require('gulp')

//load plugins

var less = require('gulp-less');

var minifyCSS = require('gulp-minify-css');

var inlinesource = require('gulp-inline-source');

var LessPluginCleanCSS = require('less-plugin-clean-css'),

LessPluginAutoPrefix = require('less-plugin-autoprefix'),

cleancss = new LessPluginCleanCSS({ advanced: true }),

autoprefix= new LessPluginAutoPrefix({ browsers: ["last 2 versions"] });

var htmlclean = require('gulp-htmlclean');

var concat = require('gulp-concat');

var uglify = require('gulp-uglify');

//generate css from less ( + slick less files + slick files).

gulp.task('less-to-css', function() {

gulp.src(['node_modules/slick-carousel/slick/ajax-loader.gif'])

.pipe(gulp.dest('./public/css/'));

gulp.src(['node_modules/slick-carousel/slick/fonts/*'])

.pipe(gulp.dest('./public/css/fonts/'));

return gulp.src(['./assets/less/*.less', 'node_modules/slick-carousel/slick/slick.less', 'node_modules/slick-carousel/slick/slick-theme.less'])

.pipe(less({

plugins: [autoprefix, cleancss]

}))

.pipe(concat('build.css'))

.pipe(minifyCSS())

.pipe(gulp.dest('./public/css'));

});

//minify fonts

gulp.src('./assets/fonts/*.css')

.pipe(minifyCSS())

.pipe(gulp.dest('./public/fonts/'));

//move images to public

gulp.src(['./assets/img/*']).pipe(gulp.dest('./public/img/'));

gulp.src(['./assets/img/**/*']).pipe(gulp.dest('./public/img/'));

//inline link, script and img in index.html . Clean html.

gulp.task('index', function () {

var options = {

compress: true

};

return gulp.src('./index.html')

.pipe(htmlclean())

.pipe(inlinesource(options))

.pipe(gulp.dest('./public/'));

});

/* making build.js */

gulp.task('slickJs', function(){

return gulp.src(['node_modules/jquery/dist/jquery.min.js','node_modules/slick-carousel/slick/slick.min.js', 'assets/js/*.js'])

.pipe(concat('build.js'))

.pipe(uglify())

.pipe(gulp.dest('./public/js/'));

});

gulp.watch('./assets/less/*.less', ['less-to-css']);

gulp.watch('./index.html', ['index']);

gulp.task('default', ['less-to-css','index', 'slickJs']);

Запуск gulp осуществляется из консоли. Открыв консоль в каталоге с проектом и введя gulp, мы запустим выполнения задачи default, которая в свою очередь выполнит задачи 'less-to-css','index', 'slickJs'. За счет gulp.watch, после любого изменения less файлов или index.html файла будет выполняться соответствующая задача.

Верстка

Для примера верстки макета я выбрал .psd макет, распространяемый свободно как для некоммерческого, так и для коммерческого использования.

Ссылка на макет:

http://www.bestpsdfreebies.com/freebie/fudi-landing-page-psd...

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

Обычно первым делом я формирую общую схему разметки. Получается нечто подобное:

<title>Fudi</title>

В дальнейшем в разметке я буду придерживаться BEM методологии. Почитать про неё можно здесь:

https://ru.bem.info/methodology/key-concepts/

Далее согласно этой методологии размечаю всю страницу.

Оптимизация загрузки шрифтов.

К данному макету шрифты шли в каталоге /fonts.

Для оптимизации работы со шрифтами воспользуемся fontsquirrel и возможностью хранить до 5мб места в localstorage. Подробней можно прочитать в переводах статей Adam Beres-Deak:

http://css-live.ru/articles-css/bystraya-zagruzka-veb-shrift...

https://htmlacademy.ru/blog/61-better-webfont-loading-with-l...

Верстал преимущественно флексами, про них можно почитать по ссылкам:

http://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstv...

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://www.w3.org/TR/css-flexbox-1/

Ссылка на кросс-браузерный вариант реализации filter.

http://codepen.io/AmeliaBR/pen/xGuBr

Полностью выкладывать в пост файлы проекта я не буду. Они выложены в гит аккаунте сообщества:

https://github.com/pikaweb/pikaweb-first-demo

Посмотреть на результат в git pages:

https://pikaweb.github.io/pikaweb-first-demo/

Чтобы отправить каталог public В новую ветвь для git pages следует выполнить следующую команду:

git subtree push --prefix public origin gh-pages

Если у кого-нибудь будут проекты, которые вы хотите выложить в репозиторий сообщества – пишите. Создам репозиторий и поделюсь доступом.