Таблица лидеров


Популярные публикации

Отображаются публикации с наибольшей репутацией начиная с 02/20/18 во всех областях

  1. 5 баллов
    Делаю аудит вашей работы: указываю на ошибки, даю практический рекомендации и делюсь решениями проверенные опытом. Обращаю Ваше внимание на неочевидные потенциальные проблемы, делюсь своим многолетним опытом, раскладываю по полочкам как работает вёрстка и как её грамотно писать. Как добавить вёрстку для оценки? Для того что бы иметь возможность оценить проделанную Вами работы, мне понадобится: Исходный код, выложенный на github, butbucket или любой другой вариант (если выкладываете в архиве то используйте zip) Предоставьте доступ к итоговому результату. Для этого идеально подойдёт pages.github.com или любой общедоступный сайт. Отпишитесь в комментарии к данной статьи и предоставьте вышеуказанные данные Что будет в итоге? Вы получите анализ по следующим критериям: вёрстка: какие ошибки допущены, каким блокам не достаточно универсальности, какие проблемы могут возникнуть в будущем, как оптимизировать структуру и поднять гибкость разметки стили: буду обращать внимание на пользование пре-процессорами, предлагать решения которые помогут поддерживать код годами структура проекта: дам рекомендации по организации файловой системы и кода в целом, буду обращать внимание на пользование современными инструментами разработчика В итоге Вы получите анализ по своей работы с точки зрения построения долгосрочных проектов, которые поддерживаются годами, поделюсь своим видением какие изменения требуется изменить что бы код не превратился в боль разработчика. ℹ️ Советую заглянуть в блог Руководство верстальщика и прочитать тему Типичные ошибки начинающего верстальщика перед публикацией работы. Решения для большинства ошибок уже изложены. Когда и где будет обзор? Обзоры выкладываться на канале HTMLforum_io в YouTuBe, каждый вторник. Хронометраж — ~15 минут. Я тоже хочу делать обзоры Предложение отрыто для всех. Если Вы считаете себя достаточно опытным что бы уметь анализировать работу других разработчиков, — напишите мне в личку. Знаний, успехов и позитива Вам. С уважением, @klierik
  2. 3 балла
    На всю жизнь хватит https://cssauthor.com/templates/ https://psdfreebies.com/psd/category/web-elements/web-templates/ https://psdrepo.com/tag/free-psd-website-templates/ http://www.pcklab.com/templates https://freebiesbug.com/psd-freebies/website-template/ http://www.os-templates.com/free-psd-templates https://colorlib.com/wp/free-psd-website-templates/ https://speckyboy.com/free-photoshop-psd-web-design-template/ https://dcrazed.com/free-photoshop-psd-website-templates/ https://dcrazed.com/best-free-blogger-templates/ https://cssauthor.com/corporate-business-web-templates/ https://freshdesignweb.com/free-travel-website-templates/ https://inscribemag.com/free-psd-website-templates/ https://www.freepik.com/ http://blazrobar.com/tag/free-psds/ http://devfloat.net/business-corporate-bootstrap-templates/ https://freedesignresources.net/category/free-templates/psd-templates/
  3. 2 балла
    Там должна быть страница корпоративного сайта, на которой присутвует Шапка и Футер, стилизированные (взятые) с оригинально сайта. Между ними область с контентом с максимально допустимой шириной (скорее всего до 1170 px). Если на корпоративном сайте нет адаптивности, то, как правило, дописать стили для шапки\футера проблем не составляет. Если же есть то считай пол дела сделанно — так как тебе надо просто скопировать Layout с блоками. Далее, дан текст вакансии — чего, в общем, более чем достаточно. Требуется создать стандартную текстовую страницу в общем стиле корпоративного сайте. Идешь в "Описании компании" или "О Нас" или что-то в таком духе. Это пример как должен выглядеть статичный контент (я имею ввиду стили форматирования абзацев, заголовков, списков, etc). Берешь эти стили и используешь у себя. И последнее — надо же как-то предоставить текст вакансии красиво. Для примера бери вью вакансии с любого агрегатора вакансий в своей стране. Я же возьму за основу вервое что попалось под руку — https://jobs.dou.ua/companies/pg-group/vacancies/63243/?from=rs И так, для тебя важно будет повторить: Дата Заголовок Оклад и формат сотрудничества Перечень требований, навыков и бенефитов (отформатированный, спискоми) Краткая информация о проекте Кнопка отклика на информацию Собственно всё. Для повышения своих шансов могу рекомендовать: Используй препроцессор SCSS Оформи презентабельно файловую структуру проекта, на пример: Создай сборщик который будет собирать ресурсы, обрабатывать и складывать в определенную директорию. На пример на базе GulpJS Подключи стили в <head> а скрипты перед </body> Дерзай 👍
  4. 2 балла
    Для ul нужно фонтсайз поставить в 0, т.к. это инлайн блоки и горизонтальные отступы из-за пробелов. После этого блоки слипнутся, ставите нужный вам маржин, но учтите, что вертикальные маржины схлопнуться, а горизонтальные суммируются.
  5. 2 балла
  6. 2 балла
    Меня как то резко в жизни переклинило в Апреле 15 и я уволился с работы тупо в никуда. Тогда ещё не думал что буду web занимать, вообще не о чём особо не думал, знал только что жить как живу больше не хочу. А что хочу ещё не понимал, хотя в 32 уже пора было сформироваться и такие простые вещи для себя решить. Хотя с другой стороны другие жизнь проживают и не понимают, так что я рад что до меня хотя бы в этом возрасте "дошло". Но одним пониманием сыт не будешь, делать я особо ничего не умел из того чем можно было нормально зарабатывать, тем более в маленьком провинциальном городе. В общем решил со временем что веб штука интересная, купил каких то книжек, курсов накачал вагон стал усиленно и ежедневно верстку постигать. Всё это с полного нуля . Деньги конечно кончились быстрее чем пришли знания, благо родные мне помогали. В итоге год я не работал, но зато освоил не плохо, как мне тогда казалось, верстку, js и даже фреймворки и системы сборки какие то пытался изучать. И всё бы хорошо, только работу найти не получалось. Благо родные у меня есть также в Москве и когда мне предложили приехать и пожить какое то время я не долго думая купил билет, сдал квартиру и приехал сюда с одним чемоданом. Через месяц устроился в небольшую студию на сносную зарплату в которой проработал чуть больше года. Сейчас работаю в крупной компании, но не IT. Фронтенд отдали мне на откуп, натянул на него новый дизайн, но особо там не разгуляешься. Много легаси кода, xsl шаблоны, джуквери и прочие пережитки прошлого. Но всё равно работаю с удовольствием, а Node , Vue и прочие Англуляры курю в свободное и иногда в рабочее время тоже. Надеюсь какие то свои проекты запустить на них со временем.
  7. 1 балл
    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 Особо тут добавить нечего, потому выложу только сам код, который используется в рамках нашего обучения Итоги подведём Подводя черту под вышесказанным хочу сказать, что мы рассмотрели более-менее универсальный вариант сборщика, под нашу задачу. От проекта к проекту на Вашум пути в разработке будут попадатся разные задачи, которые можно будет реализовать разными способами. Выбирайте тот который проще для понимания и поддержки другими разработчиками на сколько это возможно. Не создавайте слишком сложные конфиги но и не дробите их на множества файлов — это излишне. Соблюдайте баланс между гибкостью в коде и сложности его исполнения. Эти простые рекомендации позволят Вашему коду годами выполнять свою задачу, поддерживатся и изменятся без особых трудозатрат. Добра и удачи 🙏
  8. 1 балл
    Доброго времени суток! После 8 лет работы в вебдеве я ушел из него и вообще от программерской деятельности в сентябре 2017-го, но вот сейчас ко мне обратился один фотограф, который попросил сделать для него сайт портфолио, я согласился. Посмотрев на разные движки, и особенно WP. Понял что все эти тяжелые движки не годятся - боль от их использования. Решил взять наработки с моей Монстры и Фансоро и стартовал новый проект Flextype! Flextype - это новая генерация движка Monstra и Fansoro. Flextype максимально простой и расширяемый движок, практически любую задачу можно будет реализовать плагинами, так как движок предоставляет потрясающе простое API для разработчиков плагинов и тем оформлений. Страницы в Flextype - это простые файлы написанные с использованием YAML и Markdown синтаксиса, которые хранятся в папке: /site/pages Ключевые особенности движка Flextype: ПРОСТОТА Система очень простая в установке, обновлении и использовании! Достаточно просто скопировать файлы движка на сервер и это все! СКОРОСТЬ Flextype очень легкий и быстрый движок! Никакой базы данных, только файлы! РАСШИРЯЕМОСТЬ Плагины, Темы, Шорткоды и многие другие вещи позволяют легко расширять сайт! MARKDOWN СИНТАКСИС Вы можете использовать любой редактор для редактирования страниц используя Markdown синтаксис. ДИНАМИЧНЫЙ ТИП КОНТЕНТА Flextype позволяет создавать страницы практически любой сложности. Благодаря YAML страницы могут иметь любые необходимые поля! СВОБОДНОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ Flextype - это свободное программное обеспечение с открытым исходным кодом и распространяется под лицензией MIT! C помощью Flextype можно создать: - сайт визитку - домашнюю страничку - сайт-портфолио - лендинг-страницы - блог Но на самом деле применение Flextype не ограничивается тем, что перечислено выше. Так как это универсальная CMS, которая легко расширяется плагинами! Цели на ближайшее будущее: - Улучшить ядро движка, рефакторинг, новые фичи и умное кеширование. - Улучшить юзабилити сайта движка и улучшить документацию. - Сфокусироваться на разработке плагинов и тем оформлений. - К релизу 1.0.0 выпустить стабильный плагин Админки. Официальный сайт: http://flextype.org Организация на GitHub: https://github.com/flextype Цель Создания топика: - Привлечение разработчиков к Open Source проекту. - Оценка Flextype: критика, пожелания, предложения.
  9. 1 балл
    Так примерно https://codepen.io/corvus-007/pen/rvrBOV UPD: новая версия: https://codepen.io/corvus-007/pen/vjaGOe
  10. 1 балл
    я не заморачиваюсь так сильно с движками, т.б. что бывает браузеры собираются на разных версиях одного и того же движка поддержка у которых тоже может быть разной. Да и не увлекаюсь слишком новыми и индивидуальными фишечками для браузеров, стараюсь использовать то что работает везде одинаково.
  11. 1 балл
    Основные разработчики браузеров стараются придерживаться спецификации, но у каждого бывает возникают: ошибки не доработки (как раз из-за особенностей движка). Т.к. все браузеры делают одно и то же, но разными способами у всех есть свои сильные и слабые стороны. Мобильные браузеры урезаны в функционале и в первую очередь предназначены для отображения простой мобильной верстки, но со своим функционалом, бывает некоторые функции для ускорения работы убираются, а некоторые для управления добавляются. Экспериментируют с новыми функциями все разработчики.
  12. 1 балл
    Такс, если я верно понял что нужно получить то вот так: SELECT t.id as id, t2.refpost as refpost, t.type as type, t.comment as comment FROM `table` as t LEFT JOIN `table` t2 ON t2.type IN ('A','D') WHERE INSTR(t.comment, t2.refpost) В итоге выборки должен быть получен массив где id это идентификатор записи refpost это рефпост по которому была найдена запись ( он может повторятся если было найдено несколько постов где в поле comment встречается данный refpost, по этому элементу их можно сгруппировать, а очередность комментариев сделать тупо сортировкой по полю id ибо оно уникально и новая запись всегда имеет больший номер) type это тип записи comment - сам комментарий ЗЫ Верную работоспособность нужно тестировать ибо я по-быстрому на тестовой базе проверил, и не факт что выборка всегда ведет себя адекватно. Если опять чото не то написал тапками чур не кидаться =)) Я немного не трезв 😃
  13. 1 балл
    Вроде @import должен идти перед всеми блоками правил, то есть в начале css файла. https://webref.ru/css/import (первый абзац) Единственное ,можно так сделать, но опять же подключать в начале файла @import url("preview300.css") (min-width: 360px) and (max-width: 399px);
  14. 1 балл
    breca, есть еще более простой способ решения: не переписывать значение исходного массива. http://jsbin.com/cetopo/edit?js,console,output
  15. 1 балл
    Тогда уж в раздел: Сделайте мне бесплатно.
  16. 1 балл
    люди делал сайт 3 недели на чистом html и css без bootstrap и препроцессоров . оцените качество . portfoliox.ru
  17. 1 балл
    /*====================================== Системное оформление - не изменять =======================================*/ body { padding: 3px; } body > *, body > * > *, body > * > * > * { position: relative; } body > *::before, body > * > *::before, body > * > * > *::before { display: none; } body > *::before { top: -3px; left: -3px; } body > * > *::before { top: -3px; left: -3px; } body > * > * > *::before { top: 0; left: 0; } body > * { background: rgba(0, 128, 0, 0.2); box-shadow: 0 0 0 3px green; } body > *::before { color: white; background: green; } body > * > * { background: rgba(255, 45, 82, 0.2); box-shadow: 0 0 0 3px rgb(255, 45, 82); } body > * > *::before { color: white; background: rgb(255, 45, 82); } body > * > * > * { background: rgba(234, 255, 45, 0.2); box-shadow: inset 0 0 0 2px rgb(234, 255, 45); } body > * > * > *::before { color: black; background: rgb(234, 255, 45); } .main-header::before { content: ".main-header"; } .container::before { content: ".container"; } .main-header .container::before { top: auto; bottom: -28px; } .main-navigation::before { content: ".main-navigation"; } .user-block::before { content: ".user-block"; } .index-logo::before { content: ".index-logo"; } .features::before { content: ".features"; top: -28px; } .features-item::before { content: ".features-item"; } .index-content::before { content: ".index-content"; } .index-content-left::before { content: ".index-content-left"; left: auto; right: 0; } .index-content-right::before { content: ".index-content-right"; left: auto; right: 0; } .main-footer::before { content: ".main-footer"; } .main-footer .container::before { top: -28px; } .footer-contacts::before { content: ".footer-contacts"; } .footer-social::before { content: ".footer-social"; } .footer-copyright::before { content: ".footer-copyright"; } вот что у них есть в конце файла, но код в демках может различаться ,я был на потоке "HTML и CSS #14"
  18. 1 балл
    Тут можно было обойтись одним скриптом, т.к. функции у вас по сути одинаковые можно переделать их по аналогии: function setPost(send) { xhr = new XMLHttpRequest(); xhr.open("POST", 'cgi-bin/getVars.py', true); xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8') xhr.onreadystatechange = onResponse; xhr.send(send); } Вызывать такую функцию можно так: var timerPost = setInterval(function(){setPost(send)}, 100); Если у вас единовременно показывается только одна svg, а другая скрыта, анимировать обе смысла нет - бессмысленно нагружаете систему, можно вызывать функцию анимации при открытии вкладки, на вкладке можно держать data-send в котором и будет хранится нужная вам информация которую потом можно было бы использовать в функциях setInterval тогда будет один для анимации одного svg Иначе, если вам нужно анимировать сразу два svg, то можно использовать массив, например anim_svg[] в котором можно хранить ваши 0 и 49 со всеми нужными данными
  19. 1 балл
  20. 1 балл
    @media (min-width: 979px) { .navbar-toggle { display: none; } } Попробуй
  21. 1 балл
  22. 1 балл
    Норм, можешь искать работу. Лень писать почему , просто не делай так никогда ... https://developer.mozilla.org/ru/docs/Web/API/Window/matchMedia
  23. 1 балл
    Доброго дня. Заметил пару косяков при верстке: 1. Разрыв между накладкой над фоном города и верхним блоком белого цвета 2. Этот же блок, только его низ. Под этой накладкой наезжает уже следующий блок, что тоже не очень хорошо. 3. Карта слишком маленького размера по высоте, не сочетается. Так же под картой черная линия непонятная. Либо уехало у Вас что то, либо так задумано было, но это больше на поехвашее похоже 4. Меню в мобильной версии не работает Скрины прилагаю http://yapx.ru/u/8k2B
  24. 1 балл
    https://codepen.io/corvus-007/pen/KZZPoZ?editors=0110
  25. 1 балл
    Ну я указал что лучше использовать файл для сброса стилей, хотя, на мой взгляд, все равно в них делают тоже самое только перечисляют элементы, а не применяют универсальный селектор, что плохого в обнулении отступов у тех элементов у которых их нет? Раз нет, значит ничего не обнулится
Таблица лидеров находится в часовом поясе Киев/GMT+02:00