klierik

Здравствуйте. Да, но зачем. Это будет очень долго. Берите готовое решение. Для этого не обязательно писать целый магазин. Куда проще написать доску объявлений.

Если отталкиваться от сложного пути то следует начать с метрик шрифтов — Погружение в CSS: метрики шрифтов, line-height и vertical-align Если посмотреть на разницу Ваших примеров то можно поспорить — какой из скринов "корректный"? Дело в том, что в примере под Windows — присутствует "излишний" отступ сверху, над текстом. В то же время под macOS высота строки в точности от нижней границы символов до верхней. От сюда следует понимать "по-центру" — это субъективное мнение. Разница в математических расчетах.

Здравствуйте А шрифт системный или кастомный?

Здравствуйте. Что Вы называете «пиксельный шрифт»?

1.1 Основные требования к сборщику Сборщик проекта — это система, которая выполняет типовые задания автоматически, тем самым экономит время разработки проекта. Написанный нами сборщик (или билдер от англ. builder) должен стабильно работать в рамках проекта на протяжении всего его существования. Определимся со списком задач, которыми должден владеть сборщик: Иметь единый конфигурационный файл, в котором описываются настройки проекта и пакетов, которые участвуют в обработке ресурсов проекта Обрабатывать ресурсы проекта "на лету", после внесения в них изменений Генерировать стили проекта Генерировать prod-версию (максимальное сжатие и оптимизация) и dev-версию (без сжатия) Поддерживать Sourcemaps — для отладки стилей Поддерживать AutoPrefixer — для автоматического генерирования стилей под старые версии браузеров Поддерживать cssBase64 — для встраивания маленьких картинок (иконок размером, обычно, до 2КБ) непосредственно в 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/core @babel/preset-env gulp-pxtorem Краткое описание предназначения устанавливаемых пакетов: 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/. А так же автоматически откроется окно с этим путём в браузере Google 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 Особо тут добавить нечего, потому выложу только сам код, который используется в рамках нашего обучения Итоги подведём Подводя черту под вышесказанным хочу сказать, что мы рассмотрели более-менее универсальный вариант сборщика, под нашу задачу. От проекта к проекту на Вашем пути в разработке будут попадаться разные задачи, которые можно будет реализовать разными способами. Выбирайте тот который проще для понимания и поддержки другими разработчиками на сколько это возможно. Не создавайте слишком сложные файлы конфигурации, но и не дробите их на множества файлов — это излишне. Соблюдайте баланс между гибкостью в коде и сложности его исполнения. Эти простые рекомендации позволят Вашему коду годами выполнять свою задачу, поддерживаться и изменятся без особых трудозатрат. Добра и удачи 🙂

Здравствуйте. Попробуйте для <li> вместо margin-right: 200px; указать margin-right: 10%;

Вполне реально Десятка бесплатных программ для записи оптических дисков Выбор лучшей программы для записи дисков

Данный процесс выполняется автоматически. Установите программу — там всё просто

Да, надо. Так же надо будет указать в настройках программы директории, которые следует синхронизировать с облаком. В случае если винт выйдет из строя — файлы останутся в облаке.

В большинстве случаев причина одна — пользование. Любые комплектующие компьютера склонны к деградации и естественному износу. В конкретном случае почему выходит из строя те ли иные комплектующие сказать сложно. Может быть что угодно: от перепада напряжения, перегрева до окончания срока службы.

Здравствуйте. Не задавайте отступы для колонок. Вместо этого задавайте их для их содержимого.

Для начала проверьте работает ли винт. Возможно отошел шлейф или питание (если стационарный компьютер). Для этого потребуется разобрать корпус (если опыта в сборке компьютеров рекомендую воспользоваться друзьями или сервисом по ремонту компьютеров). Так же проверьте в BIOS — идентифицируется ли винт. Если нет — замените сгоревший винт на новый, установить Windows заново.

Судя по фотографиям дело не в Windows, а в том что "умер" винт.

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

Здравствуйте. Вы допустили ошибку в вёрстке. Выложите код.

Я Вам предоставил готовый пример с кодом — разбирайтесь. Нажмите на Edit in JSFiddle

На пример вот так:

Здравствуйте. А что Вы уже пробовали сделать и что не вышло?

О, забыл ещё сказать. А теперь представим семью, в которой оба её члена работают в ИТ. К примеру: он — Senior Front-end/Back-end developer она — HR, recruter, QA В итоге суммарный семейный бюджет может достигать около $6-7000. Это позволит не то что купить квартиру, но и паркетник, помогать родителям и летать в отпуск раз в квартал с бюджетом $2-4000.

Да, надо знать много технологий, но они смежные. В большинстве случаев разработчик к этим знаниям приходит не в слепую, а изучая их в процессе работы а разработки. Смоделируем небольшой пример. После 2-х месячных курсов Junior разработчик зарабатывает от $200/мес. Начинающий верстальщик устраивается в офис после курсов. Знания мало, но этого достаточно что бы вносить правки и создавать лендинги. В процессе работы он параллельно, согласно задач, изучает препроцессоры, JS/JQ, Photoshop, Sketch, учится работать в Web/PHPStorm, осваивает Git, получает азы в Agile/Scrum. Основной виде деятельности — лендинги, поддержка, внесение правок. Время выполнения типовой задачи около 2 часов. Через 2-3 года доход Middle разработчика от $1500/мес. К этому времени разработчик уже сталкивался с *nix системами, умеет работать в консоли, поднять и настроить web-сервер, сталкивался с Docker/Vagrant, владеет уверенными знаниями при работе с фреймворками, хорошо ориентируется в web-разработке, создаёт билдеры, имеет представление что такое клиентская оптимизация, умеет работать в команде. Основной вид деятельности — поддержка проектов, реализация фичей, участие в планировании и естимейтах задач проекта. Время выполнения типовой задачи от 6-8 часов. Ещё через 2-3 года Senior зарабатывает от $3500/мес. Разработчик умеет создавать архитектурные решения с нуля, отлично разбирается в своей нише и хорошо в смежных, имеет чёткое виденье и понимание о трендах в разработке, умеет внедрять клиентскую оптимизацию, создавать или грамотно пользоваться фреймворками, писать документацию, вникает в задачи коллег и предлагает наилучшие по цена\скорость\качество решения для их реализации, делает Code Review, внедряет стандарты в процесс разработки. Основной вид деятельности — планирование и создание проектов с нуля, делегирование и распределение задач, понимание и анализ бизнес-модели проекта, решение сверхсложных задач. Время выполнения типовой задачи от 12-18 часов. О кадрах на рынке: Несмотря на то, что рынок в сфере разработки большой — специалистов мало, очень мало. Из-за долларового вознаграждения в ИТ идёт все кто хочет, ради денег, не удовольствия. Компании не заинтересованы в потере специалистов, так как поиск нового стоит дорого. А специалисты, скорей всего, хорошо трудоустроены и схантить их крайне проблематично. По своему опыту скажу что рынок ищет нишевых специалистов активно и постоянно, контакт от рекрутера приходит еженедельно. Поиск работы в офисе 6 месяцев назад занял около 10 календарных дней: собеседование с рекрутёром 1-1.5ч собеседование с тех. специалистом: 2ч собеседование с Менеджером: 1-1.5ч Офер 8 лет назад поиск работы занял 3 дня: собеседование с владельцем компании за чашкой кофе, длительность 1.5 часа Не совсем понимаю негодование ТС. А в какой нише можно за 5-6 лет выйти на доход от $3500/мес? Этот доход позволяет купить 1 ком. квартиру*: в Москве за $127k за 4-6 лет в Питере за $66k за 2-3 года в Киеве за $66k за 2-3 года * цифры ориентировочные Это совсем не сложно если заниматься ИТ в своё удовольствие, а не только ради денег. Смена места работы может принести +60% к з/п Удовлетворение от того что умеешь, знаешь и делаешь.

Здравствуйте. Рекомендую вопрос по флешу задать на профильном форуме: http://www.flasher.ru/forum/ Это вымирающая технология, мало кто с ней работает. Но там могут помочь.

Здравствуйте. Переформулируйте вопрос, не понятно что Вам надо сделать

Здравствуйте. <label> внутри <input type="checkbox/radio"> разместить нельзя. Судя по скриншоту Вам требуется кастомные элементы интерфейса. Пример реализация данной задачи:

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

Здравствуйте. Не совсем понятна задача которую вы преследуете. Что такое "языковая кнопка" в Вашем случае? Какую функцию она должна выполнять? По всей видимости выше указанный сайт не использует CMS, — самописный движок?