С появлением мобильных устройств: планшетов и смартфонов, умение делать адаптивную вёрстку веб-страниц стало очень востребованным.
Это означает, что сайт должен нормально просматриваться на любых устройствах. Ну, а уж, если не точно так же, как он отображается на стационарном компьютере, то близко к этому. Главное, чтоб с ним было удобно работать: просматривать, искать что-либо, нажимать на кнопки, и т.д..

Нашёл в сети интересный, бесплатный мини-курс по адаптивной вёрстке сайтов на основе HTML5 и CSS3. Изучил его.
** Скачать себе этот курс можно, заполнив верхнюю или нижнюю тестовую форму запроса. **

Новое в HTML5 и CSS3

Решил проверить, можно ли(?) сверстать адаптивный ко всем устройствам сайт, БЕЗ использования технологий HTML5 и CSS3 .

Пробую!

Верстал в кодировке "ANSI" , и с полной служебной записью: "HTML 4.01 Transitional" , вместо положенной по правилам HTML5:

Новые тэги: header, section, article не использовал. Оказалось, достаточно блочной вёрстки, как обычно на тэгах div .

Новый атрибут формы у тэгов input "placeholder" (подсказка) в браузере IE8 НЕ сработал. В остальных - работает .

Аналогично. Новый атрибут "типа" у тэгов input type="email" срабатывает только в современных браузерах.

Атрибут "value" использовал по-прежнему для внесения значений в формы.

Самое главное! Сначала сайт верстается на обычном мониторе, а уже потом в тэг head вносится строчка кода:

Такая запись говорит браузеру (**так объясняется в курсе! ), чтобы он правильно масштабировал контент страницы под используемое устройство .
Хотя, на самом деле, такая запись браузеру ровным счётом ничего не говорит . Это "обращение" к поисковикам .
А вот они уже о-о-очень "ревностно" относятся к наличию/отсутствию подобной записи в тэге head , особенно в последнее время. Проверено!

Однако, нужно сказать, что современные браузеры мобильных устройств , похоже, научились всё же читать "чужие письма".

**К примеру. Проводя испытания такой строчки кода, я внёс её в неадаптированную страницу сайта, и... ... ... . И тут же быстро убрал!

Проверив на смартфоне её отображение, увидел, что браузер смартфона выдал "жуть", т.е. показал ПОЛНЫЙ РАЗМЕР страницы, снабдив возможностью длиннющего горизонтального скролла .

Новый атрибут для тэгов img "srcset" в испытываемой версии "HTML 4.01" не работает!

Напомню, и особо выделю, что я никаких медиа-запросов НЕ делал . Испытания же!

Примеры записей в таблице CSS

Прежде всего о том, какие(?) проверены свойства CSS и, как(?) они сработали.

Свойство background-size: cover; лучше НЕ использовать . Рисунки "режутся", т.е. выходят за пределы экранов мониторов. Приходится уменьшать масштаб, чтобы их увидеть целиком.

И напротив!

Свойство background-size: contain; работает ОТЛИЧНО! Во всех браузерах! Оптимально для "центровых " рисунков . Оно их великолепно масштабирует под любой размер монитора.

Аналогично.

Это же свойство background-size: contain; сработало ОТЛИЧНО и для "боковых " рисунков , т.е. левых/правых. Пробовал!

Боковые рисунки выводил через тэги span , прописав им float: left или right , но ГЛАВНОЕ!
Главное , что выводил рисунок, как фоновый на 2 символа неразрывного пробела , дав тексту размер, равный высоте фонового рисунка (** уменьшив размер текста, рисунок уменьшается пропорционально, без искажений) .

Схемы вывода ниже.

  <— это HTML

Span#proba8 {   <— здесь CSS
background: url(images/proba8.jpg) no-repeat;
float: left;
font-size: 240px;
background-size: contain;
margin: 0 20px;
padding-bottom: 0;
}

Пробный рисунок, выводимый по данной выше схеме, имел реальный размер 210х240px . Он хорошо адаптировался, и полностью отображался на мониторе с разрешением 120х150 .

Всё работает! НО!

Проверив использование такой схемы вывода на своём "Полигоне" , обнаружил появление значительных пустот до и после рисунков , при просмотре страницы на смартфоне. Особенно это было заметно при вертикальном просмотре . Даже!
Даже несмотря на то, что в правилах CSS ей было прописано: верхние/нижние отступы убрать!

Именно поэтому, все боковые рисунки для данной страницы выводил обычным способом , без всяких адаптивных "вывертов".

Тем более, что размер самого большого бокового рисунка позволял такое сделать.

Правда, в этом случае боковые картинки выводятся чересчур большими, что не очень соответствует их центральным (адаптированным) "коллегам", но... ... ... .
Тут уж каждый сам выбирает, что лучше. Я предпочёл из "двух зол" выбрать самое простое.

**И последнее. Файл "обнуления" стилей "reset.css" к этой странице не подключал. Для таких простых сайтов он не нужен. Да, и... ... не люблю я его. Пропи-и-сываешь потом всё заново.

Ну, а серьёзно - скорость загрузки . Каждый дополнительный файл - это обращение к серверу .

Теперь несколько строк об адаптации.

Сначала привёл пример записи кода для уменьшения двух полей ввода (имя и е-мейл) в тэгах формы до размеров в 200px (в случае их просмотра на мобильных устройствах) так, как это давалось в мини-курсе . Странная запись!

media screen and (max-width:900px) {

width:200px;}}

Вообще-то, код медиа-запроса должен выглядеть по-другому.

@media (max-width:900px) {
.subscribe input, .subscribe input {
width:200px;}}

*Prim. Используя фиксированную ширину , лучше указать её максимальный размер .

Оптимальным для фиксированной ширины считается размер 1200px±

Эти "медиа-запросы" мне напомнили конструкцию if (условие) {выполнить} из языков: PHP и JavaScript . Ими мы перестраиваем стили сайта в зависимости от размеров экранов.

Справка

Для корректной работы со шрифтами, советуют указывать их размеры не в "px" , а в "em" , и ещё сами шрифты брать из так называемых "безопасных шрифтовых стеков CSS" .

Сделал в фотошоп специальный рисунок, из которого можно узнать, какие именно шрифты относятся к "безопасным" , а главное - почему(?!):

1em = 16px

Правда, нужно сказать, что такой перевод довольно "условен", хотя в мини-курсе об этом - ни слова!

Узнать подробно о существующих единицах измерения и, как они переводятся друг в друга, можно в отличной статье из приложенного архива.

Проба единиц для адаптивной вёрстки

Попробовал. Некоторые размеры шрифтов прописывал через эти единицы. Работает! Но мне привычнее иметь дело с пикселями. Вот ими и пользовался при вёрстке этой страницы.

Тем более что пиксели , на мой взгляд, идеально подходят для адаптивной вёрстки, поскольку они "завязаны" именно на размеры и разрешение мониторов используемых устройств.

Другими словами, размер пикселя у каждого устройства будет свой , и, если не "дёргаться" от одной единицы к другой, а всё выражать в одних единицах измерения, результат будет положительным!

Что, собственно, Вы и видите на своём устройстве, просматривая эту страницу.

Для нешрифтовых элементов: картинок, размеров блоков, советуют вычислять , и использовать проценты "%" , а это уже иная техника подсчётов - в зависимости от размеров "блока-родителя" .
Короче - "геморрой жуткий".

Поэтому, потренировавшись немного на этой, пробной странице, "плюнул" на всякие адаптивные вёрстки, и стал верстать обычным, привычным для меня способом. Надоело!

Ну, а если серьёзно, то написал об этом в заключении страницы.

Кому адаптивность всё ж таки нужна, следует обратить внимание на инструменты, уже встроенные в браузеры.

Полезные инструменты веб-разработки

Для разработки адаптивной вёрстки, в браузере Firefox есть отличные(!) инструменты.

Такая вкладка открывается, при нажатии клавиши F12

Кнопка "адаптивный дизайн" позволяет просмотреть, как страница будет выглядеть в разных размерах мониторов, и при их разной ориентации (вертикально/горизонтально).

Подробно, как пользоваться кнопкой этого инструмента, объясняется в упомянутом мини-курсе.

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

Тем же, у кого нет такой возможности проверять свои веб-страницы, могу посоветовать интересный ресурс для проверки адаптивности: "Quirktools" (откроется в новом окне) .

**НО! Нужно помнить!
Он показывает лишь страницы, уже загруженные в интернет .
Кроме того - его сервер очень часто "падает" (т.е. недоступен).

А вообще, верный признак правильной адаптивной вёрстки - отсутствие нижнего скролла .

Последнее, что нужно обязательно знать: на реальных мобильных устройствах сайты выглядят по-другому, не так, как их показывают различные сервисы проверки.

Заключение, выводы

Как уже писал, потренировавшись немного здесь, на этой странице, "плюнул" на адаптивность, и стал верстать обычным способом. И это вовсе не случайно!

Во-первых: в разы возрастает сложность вёрстки, а вместе с этим и размер CSS-кода.
Чем такое плохо, подробно здесь: "Создание сайтов" (в новом окне) .

Во-вторых: и без "адаптивных премудростей" можно делать сайты, нормально отображающиеся на мобильных устройствах, для чего им нужно дать больше фиксированной ширины.
Пример: "Личная страничка" (откроется в новом окне) .

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

В-четвёртых: часто вижу сайты, лишь считающиеся адаптивными , а у самих контент обрезается так, что приходится их вид уменьшать в 2-3 раза!

В-пятых: вытекает из четвёртого пункта. Так, какая разница(?!) , что мои неадаптивные странички на смартфонах приходится раздвигать пальцами до нужного размера. Да, и то! Исключительно ради удобства просмотра. Контент-то целёхонек!

Да, кстати, для моего сайта смартфоны и не критичны. Поскольку, более 97% посетителей приходят на него с нормальных компьютеров и планшетов, и менее 3% со смартфонов .

Можно ещё продолжить этот "траурный список", но, думаю, хватит. Вполне достаточно рассказал о причинах, почему мне надоела адаптивная вёрстка, которую изучил , но применять НЕ собираюсь.

А зачем?!

Зачем делать сложнее то, что можно проще?! Без всяких "шаманских адаптивных плясок".

Вывод - незачем!

Такой вывод я сделал для себя из всего вышесказанного. В конце концов, абсолютно на любом устройстве: будь то нормальный компьютер, планшет, либо смартфон, сайт просматривать можно!

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

К тому же, стараться "угнаться" в коде (постоянно его увеличивая) за всеми возможными размерами существующих устройств - УТОПИЯ!

К примеру, на днях мой племянник показывал своё новое приобретение. Часы-смартфон , размером чуть больше спичечной коробочки.
И, что?!
Бросаться теперь "сломя голову" писать код под габариты спичечного коробочка?! А потом появится (а может, и уже появился) компьютерик размером с брошку. И, что?!
Снова код изменять?! Да, ну на фиг, такие "сайты-заморочки" делать! Проще... ...

Собственно, весь мой ресурс предназначен для тех, кто хочет научиться делать простые сайты , и делать их с удовольствием , а не искать себе "головную боль" . Вот, как-то так... ... ...

Впрочем, это моё личное мнение. Кому всё же непременно хочется этим заниматься, пусть смотрит дальше.

Важное дополнение

Для желающих лучше разобраться в разных типах вёрсток, очень рекомендую сначала (прежде, чем изучать мини-курс) скачать, и почитать две хорошие, интересные статьи: "Адаптивная вёрстка или мобильная версия" и "Адаптивный дизайн" .

И кроме этого!

Обязательно почитайте статью и из нижнего приложенного архива.

Почему обязательно?!

Её я составил, используя материалы из книги по веб-дизайну известного в Рунете дизайнера, и слова автора книги о мобильных версиях сайта резко отличаются от того, что Вы могли читать в предыдущем архиве.

Но самое главное(!) - по другой причине.

А, заполнив эту форму, можно получить интересный обучающий видео-курс адаптивной вёрстки.

Современные сайты и веб-разработку уже невозможно представить без HTML5 и CSS3, как ни крути. Любой проект, любой заказчик требуют валидной, кроссбраузерной и современной вёрстки на HTML5 и СSS3, и обязятельно адаптированную под мобильные устройства. Если вы будете уметь верстать на HTML5 и CSS3 и адаптировать проект под мобильные устройства, то можно смело поднимать стоимость часа своей работы. Ну а если вы создаёте сайт для себя, то эти знания помогут сделать его лучше, функциональнее и удобнее. Как правило это оборачивается повышением позиций, увеличением посещаемости и соответственно дохода.

Дополнительная информация

Вводная часть

0. Вводное видео
О курсе и как его использовать

1. HTML5. Семантическая разметка
О новых тегах: header, nav, section, aside, article и т.д.

2. HTML5. Медиа объекты
Вставка видео и аудио без дополнительных плееров + атрибуты.

3. HTML5. Формы
Работа с формами в HTML5 + новые типы полей.

4. HTML5. Другие возможности
Примеры реализации других возможностей на HTML5

5. CSS3. Новые свойства в CSS3
Линейные градиенты, раудисы, прозрачность, тени, трансформация, анимация.

Практическая часть

1. Макет и PSD исходник
Знакомство с PSD исходником и набросок будущего макета

2. Вёрстка шапки
Расчёт адпаптивных размеров и вёрстка шапки + формула расчёта EM и %

3. Вёрстка блока "Услуги"
Планирование этапа, подготовка изображений и вёрстка блока.

4. Вёрстка блока "Портфолио"
Планирование, двойные классы и вёрстка.

5. Блок "Портфолио": hover эффекты
Создание hover эффекта при наведении на элементы на CSS3.

6. Вёрстка блока "О нас"
Вёрстка хитрого блока с позиционированием и псевдо-классами.

7. Вёрстка блока "Наша команда"
Подготовка и вёрстка блока + создание CSS спрайтов

8. Вёрстка блока "Партнёры"
Вёрстка блока и вставка карусели изображений на JQuery

9. Вставка карты Яндекса
Вставка интерактивной карты Яндекса во всю ширину.

10. Вёрстка формы обратной связи
Планирование этапа, создание формы с новыми типами полей.

11. Блок с копирайтами
Вёрстка блока копирайтов, расширение CSS спрайта, вставка даты на PHP

12. Улучшение и доработка
Добавление функции плавной прокрутки к блокам и кнопки "Наверх" (3 варианта)

13. Улучшение и доработка ч.2
Валидация полей в форме обратной связи (через JS) + защита от СПАМ ботов

14. Адаптация под мобильные устройства
Адаптация под экраны планшетов и мобильников + работа с FireBug

15. Адаптация под мобильные устройства ч.2
Вторая часть видео по адаптации.

16. PHP обработчик формы
Создание скрипта-обработчика на PHP, для формы обратной связи.

17. Умная форма обратной связи
Подключение скрипта для формы обратной связи с передачей UTM меток и записью в CSV файл.

18. Перенос на хостинг и валидация
Перенос лендинга на хостинг по FTP, проверка, ускорение и установка цели в Яндекс.Метрике.

Без HTML5 и CSS3 далеко не уйти

Современные сайты и веб-разработку уже невозможно представить без HTML5 и CSS3, как ни крути.
Любой проект, любой заказчик требуют валидной, кроссбраузерной и современной вёрстки на HTML5 и СSS3, и обязятельно адаптированную под мобильные устройства.
Если вы будете уметь верстать на HTML5 и CSS3 и адаптировать проект под мобильные устройства, то можно смело поднимать стоимость часа своей работы.
Ну а если вы создаёте сайт для себя, то эти знания помогут сделать его лучше, функциональнее и удобнее. Как правило это оборачивается повышением позиций, увеличением посещаемости и соответственно дохода.

Знаете ли вы что...

Сейчас в поисковой выдаче (в ТОП 10) Яндекса 55% - это сайты с адаптивным дизайном, которые могут подстраиваться под мобильные устройства. Это говорит о том, что Яндекс (и Гугл тоже) отдаёт большее предпочтение сайтам с адаптивным дизайном. Т.е. тем, на которых пользователю удобно.
А HTML5 и CSS3 добавляют для сайта дополнительные возможности, при помощи которых мы можем сделать сайт ещё удобнее.
Как для пользователей, так и для роботов.
Лендинг пейдж (Landing page, посадочная страница) служит для конвертации посетителей в подписчиков или клиентов.
Также иногда используется для сегментации трафика.
Лендинг пейдж может быть как одной отдельной страницей на домене, так и в составе полноценного веб-сайта.
В этом случае сайт продвигается в поиске, а лендинг используется для рекламы в Яндекс.Директ, Google Adwods, Таргета Вконтакте и т.д.
Такая связка позволяет по максимуму использовать множество инструментов интернет маркетинга.
Сейчас есть возможность быстро научиться и применять всё это в своей деятельности.

HTML5 + CSS3 + адаптивность + Landing Page
При помощи этого курса вы сможете:

создавать адаптивные сайты и страницы
адаптировать их под мобильные устройства
использовать возможности HTML и CSS в своих или клиентских проектах
создавать любые лендинг пейдж: страницы захвата, страницы подписки, товарные лендинги и т.д.
добавлять различные эффекты и скрипты на landing page
создавать и использовать продвинутые формы обратной связи и многое другое.
С этим видеокурсом это будет совсем не сложно!

Краткое содержание курса

Вводная часть

Новые функции в HTML5 и CSS 3, что упрощают и облегчают процесс вёрстки.
Семантическая разметка - её секреты и для чего она нужна.
Вставка медиа объектов - как вставлять аудио и видео без плеера.

Практическая часть

Поэтапное создание лендинг пейдж.
От планирования макета, вёрстки каждого блока разной сложности, до подключения скриптов и php обработчиков для форм
Карусель/слайдер, плавная прокрутка, кнопки, CSS спрайты, валидация форм и т.д.

Доп. материалы

В дополнительных материалах присутствуют все скрипты и исходники с которыми мы будем работать + шпаргалки с кодом, который достаточно скопировать и вставить в нужное место.
А также другие полезные исходники.
Количество видеоуроков: 23

Что вы сможете после прохождения этого курса?

При подготовке

Разбираться в PSD макете при помощи PhotoShop
Вырезать нужные изображения из PSD макета
Находить красивые дизайны лендинг пейдж и сайтов
Проектировать блоки и этапы вёрстки
Объединять иконки в CSS спрайты
Работать с программой PhpDesigner

В плане вёрстки

Подключать красивые шрифты из хранилища Google
Эффективно использовать псевдоклассы
Адаптировать сайт под все мобильные устройства
Использовать 2 и более фона для блока, анимацию, трансформацию, RGBA и т.д.
Работать с @media запросами
Вставлять интерактивные карты Яндекса
Создавать CSS спрайты и ускорять загрузку страницы
Использовать заранее продуманные стили (по аналогии с фреймворками, типа Bootstrap)

В плане улучшения

Создавать hover эффекты ("оживление" при наведении)
Делать плавную прокрутку к блокам и для кнопки "Наверх"
Проводить валидацию форм обратной связи через JQuery
Создавать умные формы обратной связи с передачей UTM меток
Подключать и настраивать цели в Я.Метрике используя события
Облегчать страницы, делая их загрузку быстрее
Проверять и устранять недостатки на страницах

Венесуэльский лидер Николас Мадуро в программе Рафаэля Корреа на RT заявил, что у президента США Дональда Трампа есть навязчивая идея в отношении латиноамериканских народов. «Я открыто говорю...

Трамп назвал войну с Ираном «крайним вариантом»
Речь о войне с Ираном в свете нападения на нефтяные объекты Саудовской Аравии не идет, есть много вариантов, заявил в среду президент США Дональд Трамп. "Есть много вариантов. Есть крайний вариант...

Зеленский провел телефонные переговоры с Пенсом
Президент Украины Владимир Зеленский провел телефонные переговоры с вице-президентом США Майком Пенсом. Об этом сообщает «Страна.ua». Украинский лидер поблагодарил Пенса в связи с продлением...

Пентагон назвал Россию крупнейшим вызовом США в сфере безопасности
Глава Пентагона Марк Эспер заявил, что Россия является крупнейшим вызовом США в области безопасности в ближайшей перспективе. «Россия остаётся крупнейшим для нас вызовом в области безопасности...

Атака не из Йемена: Саудовская Аравия обвиняет Иран в нападении на НПЗ
Власти Саудовской Аравии публично представили обломки дронов и других летательных аппаратов, которые были выпущены по государственным НПЗ в ночь на субботу, 14 сентября. В Минобороны королевства...

Трамп отреагировал на снижение базовой ставки ФРС США
Американский президент Дональд Трамп вновь остался недоволен работой ФРС США после того, как стало известно снижении базовой ставки. Об этом он написал в твиттере. Он отметил, что глава управляющего...

Украина вновь поставила условия для реализации «формулы Штайнмайера»
Украинская делегация на состоявшейся в среду в Минске очередной встрече контактной группы вновь поставила жесткие условия выполнения Киевом политических пунктов минских соглашений. Это подтвердила...

Джонсон и Трамп обсудили необходимый ответ на атаку на саудовские НПЗ
ЛОНДОН, 18 сен - РИА Новости, Мария Табак. Премьер-министр Великобритании Борис Джонсон и президент США Дональд Трамп заявили о необходимости единого дипломатического ответа международных партнеров...

Кличко прибыл к мосту, который перекрыли из-за угрозы взрыва
Мэр Киева Виталий Кличко заявил, что мужчина, который угрожал взорвать мост «Метро» в Киеве, находится в нетрезвом состоянии или под воздействием наркотических веществ. Ранее глава полиции Киева...

Раскритиковавшего бельгийцев Юнкера обвинили в пьянстве
Главы двух городов в Бельгии потребовали от председателя Еврокомиссии Жан-Клода Юнкера официально извиниться за высказывание о том, что в бельгийских городах нетерпимо относятся к франкоговорящим...

Нетаньяху поставил израильтян перед выбором
Премьер-министр Израиля Биньямин Нетаньяху прокомментировал предварительные результаты выборов, на которых националистическая партия «Ликуд» занимает второе место. Соответствующий пост появился...

«Формула Штайнмайера»: Киев пошел на уступки по Донбассу
Глава МИД Украины Вадим Пристайко дал согласие на использование «формулы Штайнмайера» для урегулирования конфликта в Донбассе. Данная инициатива предусматривает предоставление региону особого...

США вернули России похищенные указы Николая II
США передали российской стороне 16 указов за подписью императора Николая II в ходе торжественной церемонии в резиденции американского посла в Москве. Исторические документы были похищены...

Пока вы не уснули: ЦБ счел законной блокировку счетов россиян
«Сами побегут»: новый план по «возвращению» Крыма РИА Новости Крымчане побегут на Украину, если та не будет их гнобить и создаст окно возможностей. Об этом, как сообщает «Федеральное агентство...

СМИ: Нетаньяху отменил поездку на Генассамблею ООН из-за политической ситуации в стране
Премьер-министр Израиля Биньямин Нетаньяху не поедет на следующей неделе в Нью-Йорк для участия в общеполитических дебатах 74-й сессии Генеральной Ассамблеи ООН из-за политической ситуации в стране...

Украина приняла решение по особому статусу Донбасса
Глава МИД Украины Вадим Пристайко рассказал о достигнутой договоренности участников «нормандской четверки» по так называемой «формуле Штайнмайера» о предоставлении особого статуса Донбассу. Об этом...

Трамп нашел замену Болтону
Новым советником президента США по национальной безопасности станет Роберт О’ Брайен, в настоящее время занимающий должность специального представителя президента по делам заложников...

Украина приготовилась к отводу войск в Донбассе
Командующий Операцией объединенных сил (ООС) Владимир Кравченко заявил о подготовке отвода вооружений на линии разграничения в Донбассе. Об этом он рассказал во время встречи с постоянным...

Сроки и «дорожные карты»: планы интеграции России и Белоруссии
План интеграции России и Белоруссии может быть утвержден президентами Владимиром Путиным и Александром Лукашенко к 8 декабря. «Дорожные карты» разработаны по 31 направлению. До 1 ноября Москва...

Победитель не решает: кто сформирует правительство Израиля?
Внеочередные парламентские выборы в Израиле пока не выявили явного победителя гонки, хотя, согласно предварительным данным ЦИК страны, правый блок «Ликуд» опережает своего соперника - ...

Вадим Андриенко (Донецк)

Олег! Проигрываю Твои уроки - многие вещи открывают смысл - весь материал по html и css . становится логичен и понятен, особенно всё становится понятным, когда я прохожу практическую часть - вёрстку сайта - спасибо огромное! Всё здорово и просто написано - это важные знания для постижения сайтостроения.

Светлана (Ярославль)

Для меня, как человека незнакомого с HTML "Курс HTML и CSS за 3 дня" Олега Касьянова стал очень полезным стартом в освоении сайтостроения. Все доступно, а главное дозированно для новичков.

Понравился лаконичный и спокойный темп урока, задания для самостоятельного осмысления услышанного и увиденного.Всем, кто в начале этого интересного занятия - создания сайтов- очень рекомендую курс.

Виолетта

Здравствуйте, Олег!

Большое Вам спасибо за ответ!
Еще вчера я приобрела Ваш курс с html и css, несмотря на тот факт, что уже начала обучение по этой теме на упомянутых курсе Ваших коллег, просто меня терзают смутные сомнения, что их методика обучения уступает Вашей.
(Предполагаю: Ваша - построена более четко и сжато.)

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

С уважением, Виолетта.

Азамат

Спасибо, за то что проделали такую трудоемкую работу, для нас.
Спасибо, что так подробно объяснили что да как. добавлю еще, что лучше ваших курсов, я еще не видел, надеюсь что качество уроков в дальнейшем будет такого же уровн, а может быть и еще лучше;)

Анна Пчелинцева

Огромное спасибо за видео-курс HTML&CSS за 3 дня - честно, мне не 3 дня понадобилось для изучения - потому что я совсем с нуля в этом деле и сейчас ещё в процессе:)

2 года у меня был свой сайт (виртуальная Арт-студия) и там был хаос - во-первых потому что с самого начала у меня не было ни малейшего понимания о логике HTML - я знала чего хочу, но не знала, насколько реально для программиста мои желания выполнить - поэтому то, что было на выходе очень сильно отличалось от того, что было в моей голове в добавок наше сотрудничество закончилось на середине проекта (он очень занятый человек, а на другого программиста у меня просто нет денег) поэтому и решила разобраться сама.

И слава Богу, что нашла ваши курсы по joomla и по HTML- это просто СУПЕР удача!
Сейчас отрисую основные страницы и буду по новой сайт монтировать с учётом тех знаний, которые получила на ваших видео-курсах.

Александр (Киев)

Мне очень понравился курс. Я всем советую. Курсы от Олега очень понятно изложены, и Олег уделяет много внимания деталям, а это очень Важно.

Я как-то купил курс (не у Олега), так у меня было столько вопросов, а Олег как будто угадывает, что может возникнуть вопрос, сразу уделяет время на объяснение, казалось бы, мелких деталей, но как оказывается очень нужных для освоения данной темы.
В общем, курсы от Олега хорошие и не дорогие, поэтому покупайте, изучайте и Вы со временем обязательно напишите, как и я, положительный отзыв о его курсе.