FlexBox верстка блока с комментариями
FlexBox – новый мощный способ верстки макетов, с помощью которого процесс веб-разработки значительно упрощается. Практически все современные браузеры поддерживают FlexBox, поэтому неплохо будет применять этот метод для решения своих повседневных задач.
В этой небольшой статье будет рассказано о том, как можно сверстать блок с комментариями, используя FlexBox-свойства CSS. Мы обратим внимание на самые интересные моменты верстки макетов, чтобы показать все преимущества такого подхода.
Верстка landing pages о торговле на рынке Forex
Используемые инструменты и технологии:
- HTML, CSS
- jQuery
Описание:
Из PSD-макетов были сверстаны страницы (landing page), также были созданы JS-скрипты.
reGrid.js - инструмент для показа сетки на веб-странице
Уже в течении нескольких лет техника верстки сайтов при помощи сетки пользуется популярностью у разработчиков. В сети существует большое количество CSS-библиотек (Grid Systems) для работы с сеткой. Стоит заметить, что эта методика включена в Bootstrap, который на мой взгляд является одним из самых популярных CSS-фреймворков (если не сказать, что самым популярным).
Использование сетки в процессе верстки сайтов дает разработчику ряд преимуществ: увеличивается скорость разработки, верстать становится легче за счет четкого позиционирования элементов. Размещая элементы макета по сетке, вы сразу замечаете, что страница становится более аккуратной, блоки выглядят пропорционально, имеют одинаковые отступы. Конечно же, при использовании этой методики существуют и свои маленькие недостатки: например, в код добавляются дополнительные элементы разметки. Эти недостатки незначительны, поэтому их можно считать особенностями этого подхода.
В этой заметке мне хотелось бы познакомить читателя с одним хорошим инструментом для проверки промежуточных результатов работы, которую необходимо делать, чтобы не отклоняться от границ, устанавливаемых сеткой.
Верстка шаблонов сайта Indonesia Trading Academy
Используемые инструменты и технологии:
- HTML, CSS3
- jQuery, AJAX
Описание:
Из PSD-макетов было сверстано несколько страниц. Затем на их основе были созданы шаблоны для Системы управления содержимым.
Верстка макетов в NetBeans
В процессе своей работы обычно я использую редактор Notepad++. Мне нравится этот редактор. Работать в нем удобно, плюс для него существует множество плагинов, используя которые можно оптимизировать процесс разработки. Но иногда функционала моего любимого редактора не хватает. Это бывает, например, в том случае, если вы начинаете работать над большим проектом, причем до вас этот проект уже существовал и обслуживался другими людьми. Notepad++ не сможет помочь разработчику при поиске чего-либо по всем файлам проекта. Здесь на помощь разработчику приходят интегрированные среды разработки (IDE). Среди программ такого рода встречаются и платные, и бесплатные. В этой статье я попытаюсь сделать небольшой обзор IDE NetBeans, причем хотелось бы найти положительные моменты этой программы, которые помогут в работе веб-верстальщику.
Создание шаблона сайта (каталог недвижимости) для CMS «1С-Битрикс»
Используемые инструменты и технологии:
- HTML, CSS
- jQuery, AJAX
- PHP, Bitrix API
Описание:
Из PSD-макетов было сверстано несколько страниц (главная, внутренняя + страницы каталога). Затем на их основе были созданы шаблоны для CMS «1С-Битрикс». После создания структуры сайта, на страницах размещены компоненты системы и кастомизированы их шаблоны. Создан компонент заказа обратного звонка.
Полезные сведения об адаптивной верстке
В последние годы при верстке макетов сайтов разработчикам нужно обращать внимание на огромное разнообразие размеров экрана устройств, которыми пользуются для просмотра веб-страниц, и учитывать этот момент при создании шаблонов сайтов. Как известно, макеты, подстраивающиеся под различные устройства, называются адаптивными. В последнее время их популярность растет, в связи с этим, предлагаю вашему вниманию небольшую заметку, содержащую полезные сведения об адаптивной верстке сайтов.
Размещаем круглые изображения на веб-странице
В последнее время стало популярным размещать на сайте фото и картинки круглой формы. В этой заметке я хочу поделиться с вами полезной информацией, как это можно сделать двумя способами.
Несколько правил html-верстки шаблона почтовой рассылки
Недавно при разработке рассылки новостей компании, мне нужно было сверстать html-шаблон для выпусков рассылки. С этой задачей я столкнулся впервые и обнаружил для себя некоторые своеобразные моменты ее реализации. Об этом и пойдет речь в данной статье.
Верстка формы без использования таблиц.
В этой небольшой заметке я опишу процесс верстки html–формы без использования табличной разметки. Наша будущая форма будет предназначена для регистрации новых пользователей на сайте. Каждое поле формы с подписью будет находиться на новой строке. Подписи и поля будут выровнены друг под другом, создавая ощущение, как будто мы использовали табличную верстку. Вобщем будет красиво ☺.