HTML старт для детей

Bootstrap для начинающих — основные контейнеры и медиа-квери

Bootstrap для начинающих — основные контейнеры и медиа-квери

По этой ссылке вы можете сразу увидеть базовые примеры: http://getbootstrap.com/getting-started/#examples, открыть их и изучить. Бутстраповская верстальная сетка состоит из 12 колонок. Если вы никогда не видели печатные верстальные сетки для газет, то выглядели они примерно так: Когда верстка была не компьютерной, а ручной, верстальщики поверх этих […]

Bootstrap для начинающих

Bootstrap для начинающих

Начнем с общих слов, что бутстрап сейчас — самая популярная и распрастраненная платформа для создания адаптивных сайтов. Сегодня практически нет ни одной платной темы на вордпресс без бутстрапа. Верстать на бутстрапе — хороший тон, так как позволяет разработчикам со всего мира «подхватывать» чужие проекты для […]

Ура! Мы собрали свой первый резиновый макет

Ура! Мы собрали свой первый резиновый макет

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

Делаем респонсивный макет

Делаем респонсивный макет

Для начала разберемся в терминах. Респонсив, от англ. responsive — отзывчивый, то есть отзывается на смену ширины экрана, зависит от этой ширины. Адаптивный — от англ. adaptive — примерно то же самое, то есть макет адаптируется к ширине экрана. Разница в том, что респонсивный — […]

HTML-старт, переходим с таблиц на дивы

HTML-старт, переходим с таблиц на дивы

В одном из прошлых уроков мы собрали несколько таблиц. Возьмем самую сложную из них: Для начала, пересоберите таблицу так, чтобы правая часть состояла из трех таблиц внутри содержащего их <td>. То есть на левый элемент мы не ставим rowspan. А в правой части мы избавляемся […]

Выдёргиваем зубы у смайлика с помощью ява-скриптов

Выдёргиваем зубы у смайлика с помощью ява-скриптов

На прошлом уроке мы сделали вот такой смайлик, ДЗ было — вставить ему полон рот разнокалиберных и разноцветных зубов. Пришел черед регулировать их длину, цвет и выпадение. Для начала скачайте этот зип-файл: smile Распакуйте его, откройте все файлы в текстовом редакторе. Любую анимацию можно легко осуществить […]

Border-radius и position — всего 2 свойства позволят нам сделать смайлик с зубом )

Border-radius и position — всего 2 свойства позволят нам сделать смайлик с зубом )

В предыдущем уроке мы собрали настоящий макет:     Здесь у нас была кнопка Read more, поговорим для начала о ней. Раз мы хотим быть модными и красивыми, то нужно дате ей скругленные углы, вот так: Вы не представляете, как мы мучались до появления CSS3!!! […]

Устанавливаем Dreamweaver, и зачем он нужен

Устанавливаем Dreamweaver, и зачем он нужен

Друзья, многие ругают Дримвивер за его «тяжеловесность» — он долго открывается. Для мелких правок, действительно, лучше использовать более «легкие» редакторы. Некоторые программисты вообще презрительно на него смотрят — почему-то воображают, что вот ОНИ-то пишут код руками, а на дримвивере якобы все само делается ))) — […]

Делаем настоящий макет на основе собранной таблицы

Делаем настоящий макет на основе собранной таблицы

После того, как вы выполнили задание по уроку Делаем таблицы — HTML-старт для детей, у вас должна была получится такая таблица: Теперь мы соберем на ее основе настоящий макет веб-страницы: Для этого вам понадобится .psd макет, скачайте его по этой ссылке: table_maket1 Итак, что тут у нас. […]

Делаем таблицы — HTML-старт для детей

Делаем таблицы — HTML-старт для детей

Таблицы сейчас очень недооценены. Все начинающие кидаются сразу в пучину резиновой верстки дивами и в итоге, переходя к бутстрапу, начинают биться ап стену, ничего не понимая. А тем временем таблицы — это ОСНОВА бутстрапа. Понимание таблиц приведет вас к выводу, к которому пришли разработчики 2000-ых. […]

HTML-старт для детей. Инспектор Google и что учить дальше

HTML-старт для детей. Инспектор Google и что учить дальше

В предыдущем уроке мы закончили на том, что хотели узнать, какие цвета можно обозначать словами. На примере цветов я вам покажу, как можно подсмотреть в вебе любую чужую страницу и любой стиль на ней! Это чрезвычайно полезный инструмент Google, постоянный помощник веб-разработчика — Google Inspector. […]