klierik

В данный момент курс полный. Если хотите я дам Вам знать когда будет следующий набор. У Вас есть 2 варианта: Вынесите исходники в проект из node_modules/ (нормальная ситуация) Ознакомьтесь со статьей, в которой описан процесс как гибко использовать Bootstrap в проекте

@Kotyar, онлайн аудит вашей работы доступен:

Делаю аудит вашей работы: указываю на ошибки, даю практический рекомендации и делюсь решениями проверенные опытом. Обращаю Ваше внимание на неочевидные потенциальные проблемы, делюсь своим многолетним опытом, раскладываю по полочкам как работает вёрстка и как её грамотно писать. Как добавить вёрстку для оценки? Для того что бы иметь возможность оценить проделанную Вами работы, мне понадобится: Исходный код, выложенный на github, butbucket или любой другой вариант (если выкладываете в архиве то используйте zip) Предоставьте доступ к итоговому результату. Для этого идеально подойдёт pages.github.com или любой общедоступный сайт. Отпишитесь в комментарии к данной статьи и предоставьте вышеуказанные данные Что будет в итоге? Вы получите анализ по следующим критериям: вёрстка: какие ошибки допущены, каким блокам не достаточно универсальности, какие проблемы могут возникнуть в будущем, как оптимизировать структуру и поднять гибкость разметки стили: буду обращать внимание на пользование пре-процессорами, предлагать решения которые помогут поддерживать код годами структура проекта: дам рекомендации по организации файловой системы и кода в целом, буду обращать внимание на пользование современными инструментами разработчика В итоге Вы получите анализ по своей работы с точки зрения построения долгосрочных проектов, которые поддерживаются годами, поделюсь своим видением какие изменения требуется изменить что бы код не превратился в боль разработчика. ℹ️ Советую заглянуть в блог Руководство верстальщика и прочитать тему Типичные ошибки начинающего верстальщика перед публикацией работы. Решения для большинства ошибок уже изложены. Когда и где будет обзор? Обзоры выкладываться на канале HTMLforum_io в YouTuBe, каждый вторник. Хронометраж — ~15 минут. Я тоже хочу делать обзоры Предложение отрыто для всех. Если Вы считаете себя достаточно опытным что бы уметь анализировать работу других разработчиков, — напишите мне в личку. Знаний, успехов и позитива Вам. С уважением, @klierik

Здравствуйте. Попробуйте так: .price > del > .amount { color: #aaa; }

Когда я провожу собеседования, то ожидаю что бы кандидат хорошо знал инструмент и умел им пользоваться. Это не значит что всё-всё что есть в Bootstrap будет использоваться в одном проекте, но в недолгих, сумарно, очень может быть. Нет, не нужно. Можно использовать классы фреймворка только для его компонентов, а всю остальную часть проекта на базе БЭМ. Любой другой разработчик который знает и то и другое сможет читать и понимать код. Ревьювер не будет ругать за внесение изменений (так как другого способа нет) в стили элемента путём их переписывания (overwrite). Такое делается постоянно (на пример для изменения состояний). SCSS — это не CSS. Вам следует использовать препроцессор что бы преобразовать SCSS в CSS. Значит Вы можете внести изменения в исходники (SCSS) и получить требуемый результат.

Здравствуйте. Как вариант — используйте фоновую картинку бо'льшего размера. В таком случае при масштабировании артефакты будут менее бросается в глаза.

Здравствуйте Apache конфигурируется таким образом, что бы отдавать (или не отдавать) страницу по httpS. Посмотрите конфиги веб-сервера, там описаны настройки. Как правило настраивается и http и httpS, с автоматическим редиректом всех запросов на httpS

Здравствуйте. Собирайте стили из исходников (SCSS) или перезаписывайте своими поверх стилей фреймворка Используйте модификаторы "class=".card card_modificator"" БЭМ — это методология, которая помогает грамотно выстраивать именование классов, писать универсальный самодокументируемый код. БЭМ + Bootstrap отлично совмещаются вместе если придерживайся одно стандарта написания. Да, на практике так и делают. Но не обязательно использовать скрипты Bootstrap, так как они имеют базовый минимальный требуемый набор возможностей. В действительности, как правило, требуются более сложные решения

Здравствуйте. Вот пример реализации под данную задачу:

Попробуйте так $('#field').one('keypress', function (event) { var divID = "downmenu"; if (!$("#" + divID).length) { $('#mainform').after($('<div/>', { id: divID, })); } else { $("#" + divID).show() } $('#downmenu').css( { border: '1px solid black', height: '200px', width: $('#field').width() + 2, marginLeft: '20px', backgroundColor: '#2F58F3', } ); });

Здравствуйте. Скорей всего потому что Вы не прячете а удаляете <div> строкой: div.remove();

Честно говоря я несколько недель думал стоит ли вообще писать эту статью. Сама тема является лютым холиваром и, по сути, каждый опытный разработчик давно для себя сформировал определённый стандарт форматирования стилей, который, на его взгляд, удобочитаем и лёгок в поддержке. Я не буду Вас переубеждать. Более того, если у Вас есть стандарт форматирования стилей, на котором написан не один проект возрастом от 3-5 лет и старше, если код не требовал рефакторинга из-за не грамотной организации стилей, если этот стандарт легко воспринимается и используется новыми сотрудниками — это очень классно. Это значит что Вы прошли богатый путь проб и ошибок и выявили для себя золотую середину. Я искренне за Вас рад! Но, так как кроме тех, кто умеет создавать внутренний стандарт в компании, есть разработчики, которые этого делат не умеют. Причина этому, скорее всего, — недостаток опыта. Ниже изложенная мною статья это рекомендации, а не готовое решение которое подходит в 100% случаев. Я никоим образом не хочу Вам навязать свои стандарты, а лишь поделиться тем опытом, который мне достался за более чеим 15 летний опыт в веб-разработке. Я буду искренне Вам благодарен если Вы ознакомитесь с данной статьёй и поделитесь своим виденьем на обсуждаемую тему. Вот краткий пример, который наглядно описывает обычный блок в проекте: .block-name { // Стили блока // Стили псевдо-элементов &:before {} &:after {} // Стили псевдо-классов &:first-child {} &:last-child {} &:hover {} // Стили составных элементов &__element {} // Стили дочерних элементов .child-element { &__element {} .element {} } // Стили модификаторов состояния &._state {} // Стили модификаторов блока &_hp {} // Стили модификаций в зависимостях .block & {} // @media стили @media (min-width: 767px) {} } Но что бы этот пример не был "сухим", довайте посмотрим на реальный код: .assets { &__title { font-size: 56px; font-weight: 500; padding: 56px 0 68px; line-height: 1.14; background: #00d6d9; color: #ffffff; & > .assets__section { padding-top: 0; padding-bottom: 0; } } &__sub-title { font-size: 28px; font-weight: 500; padding: 45px 0 9px; line-height: 1.29; background: #f9fafc; & > .assets__section { padding-top: 0; padding-bottom: 0; } } &__section { @if $enable-grid-classes { @include make-container(); @include make-container-max-widths(); } padding-top: 1rem; padding-bottom: 1rem; } &__colors { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; list-style-type: none; .color { font-size: 13px; margin-bottom: 20px; width: 23%; border: solid 1px #e5e9ed; box-shadow: 3px 3px 5px 0 rgba(42, 43, 51, 0.1); &__preview { height: 90px; } &__name { font-weight: 600; padding: 14px 18px 6px; } &__hex { padding: 0 18px 14px; } &_gradient { width: 100%; } } } } Предполагаю с этим наглядным примером многое станет понятнее. Что же касается форматирования свойств, то я разделил их на 4 группы (каждая разделена пустой строкой для повышения читабельности) Свойства шрифтов Блочные свойства Текстовые свойства Стилизирующие и остальные свойства Порядок свойств, как правило, по алфавиту. ℹ️ Настройки форматирования стилей можно изменить. Про это рассказано в статье 1.4 Создание сборщика проекта. Пособие для верстальщика в разделе 1.4.6 Настройки форматирования стилей CssComb Ниже представлен более сложный пример, из реальной ситуации: ℹ️ Любите свой код, относитесь к нему надлежащим с уважением. Думайте о том, что его будут читать другие. Постарайтесь создать наиболее простые и комфортные условия для работы с Вашим кодом для любого разработчика в команде. Используйте в именах классов смысловую нагрузку — это сделает код читабельным без комментариев. Не создавайте глубокие цепочки иерархии класов, вместо этого продумывайте простые структуры на столько, на сколько это возможно. Добра и удачи 🙏

Здравствуйте. Посмотрите в сторону Атрибут multiple

Не знаю такого браузера, который бы работал ожидаемо и безглючно в 100% случаев Пользуюсь как Safari так и Chrome ежедневно на протяжении последних 10 лет, — за редким частным исключением всё работает ожидаемо стабильно

Здравствуйте. Как правило для таких целей используются другие инструменты. На пример rsync: резервное копирование rsync-ом

Это самый простой, дешёвый, быстрый и доступный вариант. Альтернативные варианты будут от использования сервисов тестирования (нагуглил): https://www.browserstack.com https://endtest.io https://crossbrowsertesting.com https://saucelabs.com https://www.vanamco.com/ghostlab/ https://testingbot.com до приобретения полноценного MacBook (Pro)/iMac/Air

Здравствуйте Можно, — установите macOS на виртуальную машину

Здравствуйте. На пример вот так: var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>"; preHtml += '<style type="text/css">h1{font-size:120%;font-family:Verdana,Arial,Helvetica,sans-serif;color:#336}\n</style'; var postHtml = "</body></html>";

1.1 Основные требования к сборщику Сборщик проекта — это система сборки и задач, которая выполняет типовые задания автоматически, тем самым экономит время разработки проекта. Написанный нами сборщик (или билдер от англ. builder) должен стабильно работать в рамках проекта на протяжении всего его существования. Определимся со списком задач, которыми должден владеть сборщик: Иметь единый конфигурационный файл, в котором описываются настройки проекта и пакетов, которые участвуют в обработке ресурсов проекта Обрабатывать ресурсы проекта "на лету", после внесения в них изменений Генерировать стили проекта Генерировать prod-версию (максимальное сжатие и оптимизация) и dev-версию (без сжатия) Поддерживать Sourcemaps — для отладки стилей Поддерживать AutoPrefixer — для автоматического генерирования стилей под старые версии браузеров Поддерживать cssBase64 — для встраивания маленьких картинок (иконок размером, обычно, до 2048КБ) непосредственно в CSS Поддерживать CSSO — структурная оптимизация стилей Генерировать criticalCSS (про это можно ознакомится в статье Разбираемся с критичным CSS) Автоматически организовать стили проекта. При помощи csscomb.com приводить все стили к единому стандрату форматирования, что очень удобно для ситуаций, когда над проектом работает больше одного разработчика Собирать и генерировать скрипты проекта Генерировать prod-версию (максимальное сжатие и оптимизация) и dev-версию (без сжатия) Проверять код при помощи eslint — это инструмент проверки качества написанного программного кода на JavaScript Делать конкатенацию js-фалов (собирать все файлы в один) Оптимизировать изображения, которые используются в проекте Хочу обратить внимание на то, что требования составлены из целей создавать оптимизированный код и иметь гибкий инструмент для этого. В большинстве случаев бОльшую часть из этого списка Заказчик не требует (так как это повышает стоимость проекта). Но, так как автор последние пол десятилетия работает с высоконагруженными системами, где высокие требования к клиентской оптимизации идут "из коробки", то было решено использовать именно такой подход в данном обучении. Более простую версию билдера, имея эти знания, Вы сможете создать когда угодно. А за более сложную — Вы честно потребуете больший оклад, и будуте правы :) Но, так же обращаю внимание что нет пределу совершенству в оптимизации. В рамках обучения мы будем собирать все ресурсы (JS/CSS) в один файл. Но есть методы которые позволяют асинхронно подгружать как CSS (редкий случай), так и JS (обычное являние). Если Вам интересно углубится в мир клиентской оптимизации я советую начать с просмотра лекции Виталий Фридман: Responsive Web-дизайн. Трюки и уловки (всего 1ч 40мин но море полезной информации). 1.2 Инициализация Этот этап разработки крайне прост. Да бы не повторятся в том о чём уже было сказанно в Интернетах множество раз я предлагаю посмотреть видео, в котором рассказываются шаги, которые будут проделанны на данном этапе: 1.3 Установка NPM пакетов Пакеты, которые мы будем в разработке условно поделим на 2 типа: ресурсы проекта (такие как jQuery, bootstrap, прочее) пакеты сборщика (ПО которое будет использоватся для обработки ресурсов для оптимизации, проверки кода, прочее) 1.3.1 Установка пакетов проекта Первым шагом установим пакеты, которые будут использоватся непосредственно в вёрстке: $ npm install -D jquery popper.js bootstrap 1.3.2 Установка пакетов сборщика Следующей командой установим пакеты которые будут использоватся для сборки ресурсов проекта $ npm i -D gulp-autoprefixer gulp-concat gulp-css-base64 gulp-csscomb gulp-debug gulp-if gulp-imagemin gulp-load-plugins gulp-sass gulp-sourcemaps gulp-uglify require-dir gulp-newer browser-sync gulp-notify gulp-notify through2 stream-combiner2 gulp-eslint penthouse gulp-csso gulp-babel babel-preset-latest babel-core Краткое описание предназначения устанавливаемых пакетов: 1.4 Сборщик проекта Ветка сборщика: $ git checkout 1.4-gulp-builder 1.4.1 Структура Файлы и директории которые отвечают за сборку проекта: . ├── gulp/ │ ├── .csscomb.json - файл настроек cssComb │ ├── .eslintrc - файл настроек eslint https://goo.gl/4K6TyF │ ├── config.js - файл настроек задач и пакетов Gulp │ └── tasks/ - задачи Gulp │ ├── scripts.js │ ├── server.js │ └── styles.js └── gulpfile.js - основной файл конфигурации Gulp Далее пройдём по всем файлам и обсудим что каждый делает. 1.4.2 Основной файл конфигурации Gulp Содержимое файла gulpfile.js 'use strict'; require('require-dir')('./gulp/tasks/'); const gulp = require('gulp'); // Default tasks gulp.task('default', gulp.series('styles', 'scripts')); gulp.task('dev', gulp.series('default', gulp.parallel('styles:watch', 'scripts:watch', 'server'))); Это основной файл конфигурации сборщика. Он легковеснее того, который Вы видели в Скринкасте по Gulp и вот почему... require('require-dir')('./gulp/tasks/'); Эта строка загрузки всех задачи, которые размещаются в директории "./gulp/tasks". После её выпонения будут загружены написанные нами задачи автоматически. const gulp = require('gulp'); Следующим шагом мы загружаем Gulp, так как ниже мы используем его для объявления задач // Default tasks gulp.task('default', gulp.series('styles', 'scripts')); gulp.task('dev', gulp.series('default', gulp.parallel('styles:watch', 'scripts:watch', 'server'))); А эти строки объявляют задачи, которые мы будем запускать для выпонения тех или иных операций. Первая задача "default" — это задача, которая запускается по умолчанию при запуске Gulp (если задачи для выполнения не указаны явным образом). На пример команда: $ gulp запустит те же задачи, которые будут запущенны если мы выполним: $ gulp default Значит при выполнении этой команды будут запущены задачи "styles" и "scripts", а чём нас проинформирует терминал: $ gulp [16:48:19] Using gulpfile ~/http/htdocs/aworker/aworker-education/gulpfile.js [16:48:19] Starting 'default'... [16:48:19] Starting 'styles'... [16:48:20] Finished 'styles' after 1.36 s [16:48:20] Starting 'scripts'... [16:48:21] Finished 'scripts' after 250 ms [16:48:21] Finished 'default' after 1.61 s Вторая задача "dev" будет выпонять другой набор. Для начала будут веполнены задачи, описанный в "default". Потом паралельно запустятся задачи: "styles:watch" — мотиторинг фалов стилей в ожидании изменений "scripts:watch" — мониторинг файлов скриптов в ожидании изменений "server" — запустится локально статичный веб-сервер, который будет доступен оп адресу http://localhost:3000/. А так же автоматически откроется окно с этим путём в браузере Googlee Chrome. Вот как это выглядит в терминале: Что бы посмотреть весь список задач которые доступны для запуска выполните команду: 1.4.3 Режим отладки Сборщик позволяет выпонять задачи как для продакшена (минимизация стилей, скриптов, картинок, прочее) так и версию для разработки. По умолчанию задачи выполняются для продакшена. Что бы запустить сборщик в режиме отладки, требуется выполнить следующую команду $ NODE_ENV=develop gulp Если требуется запустить мониторинг файлов и сервер то выполните следующее NODE_ENV=develop gulp dev 1.4.4 Файл конфигурации проекта Почти все настройки, которые мы будем использовать в задачах Gulp, для большего удобства, были вынесены в индивидуальный файл. Это позволяет использовать в задачах только переменные, значения которых определены в одном месте. Такой подход упрощает процесс конфигурации сборщика проекта. Файл размещается по адресу — "gulp/config.js". Полную версию файла Вы можете увидеть в репозитории, я лишь приведу наглядный пример как он оформлен: 1.4.5 Настройки eslint Для проверки JavaScript кода используется gulp-eslint пакет. Он требует присутвия файла настроек, согласно которых будет проверятся код. Файл размещается по адресу "gulp/.eslintrc" и содержит настройки, которые так же можно сгенерировать самостоятельно в онлайн генераторе 1.4.6 Настройки форматирования стилей CssComb Файл "gulp/.csscomb.json" отвечает за то, как будут автоматически форматироватся исходные стили проекта, приводя их к единому формату. Файл достаточно большой, выкладывать его здесь будет избыточно. Посмотрите на его содержимое в репо. Свой файл настроек CssComb можно создать в онлайн генераторе 1.4.7 Настройки Autoprefixer Согласно оффициальной документации gulp-autoprefixer, указать в директиве "browsers" для каких браузеров следует применять вендорные префиксы можно непосредственно в конфигурации: const gulp = require('gulp'); const autoprefixer = require('gulp-autoprefixer'); gulp.task('default', () => gulp.src('src/app.css') .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(gulp.dest('dist')) ); Но, в официальной документации Autoprefixer сказано несколько иначе: Они рекомендуют использовать или файл ".browserslistrc" (который должен лежать в корне проекта) или директиву в файле "package.json". Требуется это для того, что бы другие плагины (такие как: Babel, postcss-preset-env, eslint-plugin-compat, stylelint-no-unsupported-browser-features, postcss-normalize) так же пользовались этими настройками. Об этом рассказано на странице плагина Browserslist. По этому мы добавим эти настройки в файл package.json "browserslist": ["last 2 version", "> 5%", "iOS >= 7"] 1.4.8 Задачи Gulp Теперь давайте перейдём обсуждению непосредственно задач, которые присутвуют в сборщике проекта. ℹ️ Обращаю внимание читателя на то, что описанные ниже задачи могут быть не полностью описанны (или не все). Только те задачи и в том виде, когда автор писал эти строки. Но, скорее всего, у Вас не будет проблем в понимании как они работают и для чего созданы. В случае если что-то будет не понятно — задавайте вопросы 🙂 1.4.8.1 Сборка стилей Файл задачи сборки стилей расположен по адресу "gulp/tasks/styles.js". Полную версию файла Вы можете найти в репо, а тут давайте обсудим что он делает. Задача "styles" выполняет сборку стилей SCSS -> CSS. Настройки, которые используются в задачах предварительн описанны в файле "gulp/config.js" 1.4.8.2 Форматирование стилей Ещё одной важной для нас задачей будет форматирование стилей. Эта задача приведёт в порядок все стили Поясню почему "*variables*" вынесены из обработки под катом. 1.4.8.3 Создание criticalCss В нашей разработке мы так же будем генерировать criticalCss. В одной из следующих статья мы поговорим как эти стили должны использоватся а пока обсудим как их создавать. Сама задача, которая генерирует criticalCss-файл имеет мало кода: Для выполнения задачи в файле "gulp/config.js" есть список параметров, приблизительно такой: Все настройки описанны в на офф. странице в соответствующем разделе Options. Я лишь обращаю Ваше внимание одни из наиболее важных параметров: forceInclude — принимает массив, согласно которого будут добавлены стили, которые не были добавлены в criticalCss автоматически propertiesToRemove — принимает массив, согласно которого будут удалены стили из criticalCss Что же делает penthouse? Пакет создаёт виртуальное окно браузера (для этого используется puppeteer), размер которого указан в настройках (в выше приведённом примере это 1200x960). Далее penthouse проверяет какие из стилей присутвуют в этой области документа (в частности проверяет какие элементы присутвуют в области) и сохраняет их в указанном файле. Остальные стили, которые не попадают в область видимости (находятся за экраном) — не учитываются. ℹ️ Обращаю Ваше внимание на то, что зачастую в criticalCss так же не попадают стили элементов (или не полностью), которые по тем или иным причинам не отображались в момент их генерирования. Но разработчик может добавить их самостоятельно, указав в настройках. На пример: forceInclude: [ /^\.dialog/, // Будут добавленны все стили классов, которые начинаются с ".dialog" '.configurator' // Будут добавленны стили, которые применены к классу ".configurator" ], Режим отладки penthouse В случае если возникнут какие либо проблемы в создании "critical.css" следующей командой можно запустить задачу с выводом в терминал служебной информации: $ env DEBUG="penthouse,penthouse:*" gulp styles:critical ℹ️ В случае если Вам требуется создать criticalCss сразу для нескольких URL обратите внимание на оффициальный пример 1.4.8.4 Сборки скриптов Одной из не мало важных задач так же является сборка и минимизация скриптов. Задача расположена в файле по адресу "gulp/tasks/scripts.js". 1.4.8.5 Линтер скриптов Как работает данная задача шикарно изложенно в скринкасте Ильи Кантора — Более сложный поток: eslint, gulp-if, stream-combiner2 Особо тут добавить нечего, потому выложу только сам код, который используется в рамках нашего обучения Итоги подведём Подводя черту под вышесказанным хочу сказать, что мы рассмотрели более-менее универсальный вариант сборщика, под нашу задачу. От проекта к проекту на Вашум пути в разработке будут попадатся разные задачи, которые можно будет реализовать разными способами. Выбирайте тот который проще для понимания и поддержки другими разработчиками на сколько это возможно. Не создавайте слишком сложные конфиги но и не дробите их на множества файлов — это излишне. Соблюдайте баланс между гибкостью в коде и сложности его исполнения. Эти простые рекомендации позволят Вашему коду годами выполнять свою задачу, поддерживатся и изменятся без особых трудозатрат. Добра и удачи 🙏

Для кого Данная серия статей нацелена на html разработчиков, которые владеют азами html разметки, умеют пользоваться CSS а так же владеют JS на базовом уровне. Конкретнее говоря аудитория, которой будет интересен данный материал, — это начинающие специалисты в сфере вёрстки, которые создают не сложные странички, используя язык гипертекстовой разметки (html) и каскадные таблицы стилей (CSS) с применением простых скриптов JavaScript (чаще всего jQuery). Разработчикам предлагается материал который поможет повысить уровень знаний в предметной области, что в итоге должно привести к профессиональному и финансовому росту. Для чего Цель данных статей — помочь в профессиональном росте, научится пользоваться современными инструментами, анализировать объем работ, предупреждать ошибки, писать легко читаемый и самодокументируемый код, научится быстро выявлять проблемы и пути их решения, стремится к решению сложных и сверхсложных задач. Научится давать оценку времени на реализацию и писать/оформлять код для долгосрочных проектов (700+ часов на реализацию с последующей поддержкой и разработкой). Об авторе Автором данного материала являюсь я, — @klierik, работающий в сфере web-разработки с начала 2000-х. В данной серии статей делюсь своим опытом на примере проекта, срок реализации которого более 100 часов. Хочу обратить ваше внимание на то что видение, изложенное в статьях является субъективным, и никоим образом не обязывает Вас думать и делать так же. Я стремлюсь поделится своим опытом в надежде, что читатель проанализирует изложенный материал, поймёт суть и будет использовать основные принципы в повседневной работе, получать от неё удовольствие, усовершенствовать и делится идеями с другими разработчиками. Я надеюсь что читатель, прочитав материал, будет творить код, опираясь на простой принцип: код должен быть самодокументируемым, оформлен таким образом, что бы другие разработчики могли легко его понять и просто модифицировать без последствий для проекта. Добра и удачи 🙏

Скажите, пожалуйста, какие трудности возникают в использовании выше предложенного решения?

Здравствуйте. По идее Вам следует смотреть в сторону iframe. Шаблонизаторы тут не причём.

HTMLforum.io — крупнейшее сообщество по HTML вёрстке в СНГ. Целевая аудитория Front-end специалисты, возраст 18-34 лет из России, Украины, Республики Беларусь и стран СНГ. Почему с нами выгодно? Целевая аудитория в одном месте для Вашей рекламной кампании по обучению (онлайн-курсов, мастер-класов, семинаров, тренингов), предоставлению услуг (дизайн, хостинг, создание и продвижение сайтов) и поиску персонала. Обход блокировок Размещённые на HTMLforum.io рекламные баннера не блокируются такими известными расширениями, как AdBlock, uBlock и т.д. Виды рекламы Требования к размещающим баннерам ⚠️ Обращаем внимание, что покупка рекламы не освобождает рекламодателей от соблюдения правил сообщества. .tg {border-collapse:collapse;border-spacing:0;} .tg td{font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#a0a0a0;} .tg th{font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;} .tg .tg-baqh{text-align:center;vertical-align:top} .tg .tg-0uda{background-color:#286c90;color:#ffffff;border-color:#000000;text-align:center} .tg .tg-bo8g{background-color:#286c90;color:#ffffff;border-color:#000000;text-align:left} .tg .tg-uys7{border-color:inherit;text-align:center} .tg .tg-xldj{border-color:inherit;text-align:left} .tg .tg-0lax{text-align:left;vertical-align:top} Виды размещения и продвижения Стоимость Баннер в шапке сайта, за 10,000 показов $10 Баннер в теме, после сообщения автора, за 10,000 показов $12 Баннер в сайдбаре, за 10,000 показов $7 Закрепить тему в разделе, за 1 месяц $25 Подсветить тему фоном, за 1 месяц $12 VIP-тема, за 1 месяц (включает в себя закрепление темы + подсветку) $30 Спонсор раздела форума, за 1 месяц (включает в себя размещение логотипа в описании раздела на главной странице форума) $50 VIP-спонсор раздела форума, за 1 месяц (включает в себя размещение логотипа на главной странице форума, закрепление темы в 1 дочернем разделе, подсветку темы) $75 Корпоративный блог компании, за 1 год $500 VIP корпоративный блог компании, за 1 год (включает в себя отключение рекламы сообщества на всех страницах блога компании) $990 ℹ️ Размещение в течении 3-х рабочих дней, после предоставления всей необходимой информации и материалов. Пожалуйста, учитывайте это при заказе рекламы! По всем вопросам размещения рекламы на HTMLforum.io обращайтесь по электронной почте sales@htmlforum.io

Здравствуйте. Где-то не закрыт <div>

Наши услуги Пишем для Вас адаптивную и кроссбраузерную вёрстку сайтов любой сложности, из вашего PSD-макета или Sketch-дизайна Доработаем существующую вёрстку и будем поддерживать Ваш проект Напишем и будем поддерживать тему для интернет-магазина на базе Magento 1/2 CMS Этапы разработки и менеджмент Подготовительный этап Изучение Ваших макетов и оценка объёма работ согласно ТЗ (если отсутствует мы поможем его сформировать) Создание этапов разработки и заданий в Trello, согласование с Вами сроков Разработка Создание html-шаблонов, стилей, js-скриптов и прочих ресурсов Согласуем каждый этап разработки с Вами Завершающий этап Предоставленим Вам все html-шаблоны и требуемых ресурсы в архиве (в случае если не используется Git) Технолигии которые мы используем Мы пишем валидный, кросс-браузерный, адаптивный, читабельный и легко поддерживаемый код. Используя современные технологии: Bootstrap SCSS — в качестве основы для проекта Git — для версионности Gulp.js (scss, minify js/css, lint, csso, autoPrefixer, csscomb и тд) — сборщик ресурсов Клиентская оптимизация (speed Index, pagespeed, WPT, criticalCSS, и тд) Портфолио Последние работы printkick.com funandfunction.com babypark.nl glasstileoasis.com www.buyerquest.com gjcookies.com yakaboo.ua support.helprace.com Knowledgebase Manager Pro promoplan.ru Оплата и расчёт стоимости Стоимость услуг: индивидуально для каждого проекта и зависит от затраченного времени (почасовая оплата). Рейт — $30/час. Оплата услуг: полная предоплата, частичная предоплата 50%, поэтапная оплата (обсуждается индивидуально) Методы оплаты: на кошелёк Yandex.Money (для жителей России, СНГ) на карту ПриватБанка (для жителей Украины) Заказать вёрстку Пишите на почту developer@htmlforum.io или используйте форму Обратной связи