Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Верстка

Тут вы увидите архив постов категории Верстка.

Сервис Interneting is Hard — обучение верстке сайтов с нуля (бесплатный курс)

Сервис Interneting is HardСпрос на хороших специалистов по верстке вполне стабилен, поэтому не удивительно, что растет и количество желающих освоить данное ремесло. К тому же, как по мне, это один из самых простых «путей попадания в ИТ». Хотя важно понимать, что для хорошей отдачи вы должны стать профи — кроме наличия знаний надо постоянно систематизировать и модернизировать свои навыки, всегда быть «на волне» и использовать только актуальные современные методы.

Как и в любой другой профессии, начинается обучение верстке сайтов с нуля — с базовых понятий и теории. Об них сегодня и поговорим.

Читать далее

CodePen — бесплатный онлайн редактор кода (HTML, CSS, JS)

Переориентация разных компьютерных программ на приложения, размещенные в сети, продолжается. Не обошла стороной эта тенденция и разные среды программирования, что, в принципе, логично. Где как не в интернете лучше всего хранить и редактировать код, особенно если это касается веб-разработки. Сегодня предлагаю почитать о полезном сервисе под названием CodePen (Кодпен) — одном из лучших визуальных онлайн редакторов HTML, CSS, JavaScript кода.

Codepen - онлайн редактор кода

Инструмент этот весьма интересный и удобный, пару раз использовал его в блогах для демонстрации верстки: в статье про создание фиксированного меню и в заметке о горизонтальном меню.

Читать далее

Создаем фиксированное меню на CSS, jQuery (+ проблема с якорями)

Фиксированное меню Раз уж обещал в планах на 2017 завершить свое изучение верстки, начатое в Нетологии то придется больше времени уделять данной теме и на страницах блога. Создам под нее отдельный раздел, куда буду собирать разные хаки и статьи.

В посте рассмотрю два вопроса:

  • как фиксировать меню при прокрутке страницы, когда блок навигации «прижимается» к верху экрана (простое решение на css и с jquery).
  • плюс заодно поговорим о прокрутке до якоря с фиксированным меню, которая не совсем корректно работает без дополнительных хаков.
Читать далее

CSSFilters — CSS фильтры изображений для сайта

Большинство моих читателей наверняка знакомы с инстаграмом и, думаю, активно его используют для своей работы или личного фотоблога. Одной из фишек данного сервиса являются специальные фильтры, создающие разные эффекты для картинок и позволяющие сделать их «интереснее». По сути, фильтр — это набор графических правок, что применяются к изображению: затемнения по краям, изменение освещенности, усиление цвета, добавление оттенков, черно-белое фото и т.п. Инструмент похожий на фотошоп экшены только онлайн.

Сегодня хочу рассказать об интересном сервисе CSSFilters, который позволяет добавлять через CSS эффекты для картинок на вашем веб-проекте. Интеграция достаточно простая и не вызовет особых проблем.

Читать далее

Сервисы просмотра сайта на разных разрешениях экрана

Продолжая работать и размышлять над адаптивным дизайном блога я столкнулся с необходимостью просмотра сайта на разных разрешениях экрана. С развитием смартфонов и появлением множества разных размеров экранов полезно просмотреть как будет выглядеть ваш сайт на том или ином устройстве. Для решения этой задачи есть несколько вариантов. Для просмотра сайта на компьютере при меньших разрешениях нежели ваш…

Читать далее

Адаптивный дизайн для блога / сайта — нужно ли?

Я тут начал потихоньку внедрять новый шаблон для блога и столкнулся с такой штукой как адаптивный дизайн (или адаптивная верстка). С ее помощью при уменьшении размеров экрана макет сайта будет корректно подстраиваться под новые параметры. Поэтому на планшетах или смартфонах ваш проект будет выглядеть все также привлекательно и останется максимально удобным для использования. Звучит круто,…

Читать далее

CrossBrowserTesting — тестируем сайты в разных браузерах

В одном из постов Хабра я увидел описание какого-то веб-проект с десятком-другим его скриншотов в разных браузерах и OS. Меня сразу же заинтересовал инструмент, делающий такие интересные подборки. Ссылка в статье привела на CrossBrowserTesting. Сервис позволяет производить около 1000 разных комбинаций при анализе сайта, используя разные операционные системы, разные браузеры и установленные в них плагины.…

Читать далее