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

Верстка

На странице вы увидите список заметок категории Верстка.

Основы CSS Grid — создание сетки сайта и параметры Grid на реальных примерах

Основы CSS GridКогда-то давно я писал про необычный сервис The Grid, представляющей собой ИИ для создания сайта. Судя по текущим результатам, получилось у них «так себе», особенно учитывая заявленный прайс. Конструкторы сайтов в этом плане поэффективнее будут.

Сегодня же хочу поговорить о похожей по названию, но совсем другой по сути «технологии» — CSS Grid!

Читать далее

Как сделать ссылку на номер телефона в HTML: протокол tel:, оформление и советы

Ссылка телефона на сайтеНедавно читал, что объемы мирового мобильного трафика уже превышают десктопных пользователей. В данном блоге этого пока не случилось, но в интернет-магазине одного из моих клиентов бОльшая часть людей заходит именно через планшеты/смартфоны. Поэтому меня попросили сделать продвинутую ссылку на телефон на сайте, которая при нажатии автоматически бы открывала соответствующее приложение с набором номера. 

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

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

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

Читать далее

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

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

Читать далее