Мы в сети

VK
FB

Оформите подписку!

 Введите Ваш E-m@il и
получайте свежие новости

Видеокурс
Видеокурс "HTML5 и CSS3 с Нуля до Профи." (Андрей Бернацкий - WebForMySelf)
Видео урок

Рейтинг:

Издательство WebForMySelf Издательство: WebForMySelf

Страница автора - Андрей Бернацкий - WebForMySelf Автор курса: Андрей Бернацкий

Видеокурс Тематика: HTML и CSS | Веб – разработка | Создание сайтов и блогов

Автор: Андрей Бернацкий

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

Смотреть видео:

HTML5 и CSS3 с Нуля до Профи. (Андрей Бернацкий - WebForMySelf)

Часть 1. Верстка макета сайта-визитки

Макет сайта-визитки, который мы будем верстать в первом блоке курса имеет достаточно простую структуру. Более того, этот макет входит в бонус к данному курсу «Верстка сайта для начинающих». И я специально решил показать верстку макета сайта-визитки в первой части курса, но верстается он уже используя HTML5. Те из вас, кто сначала изучит бонусы, то есть освоит базовые знания к курсу, увидят, как можно один и тот же сайт верстать с использованием новых тегов и возможностей HTML5 и без него. Для тех из вас, кто сразу начнет изучение с практической части курса, этот макет будет введением в верстку на HTML5 и разогревом перед основными макетами курса. Версткой данного макета я хотел показать вам, как одна и та же страница может быть сверстана с и без использования HTML5, какие при этом мы получаем сходства и различия. Чтобы вы еще больше поняли различия верстки на HTML5.

ИЗ КАКИХ УРОКОВ СОСТОИТ ПЕРВАЯ ЧАСТЬ КУРСА:

  • Урок 1. Введение. Настройка страницы
  • Урок 2. Определение разметки для страницы
  • Урок 3. Описание стилей шапки сайта
  • Урок 4. Описание стилей основного блока сайта. Часть1
  • Урок 5. Описание стилей основного блока сайта. Часть2. Заключение

Часть 2. Верстка макета блога

Во второй части курса мы будем работать с макетом блога. Данный макет состоит из шапки сайта, центрального блока и футера. Центральный блок делится на две колонки: колонка с основным контентом и колонка навигации. То есть макет имеет очень распространенную блоговую структуру. Страница, которую мы сверстаем в данном блоке курса, будет адаптивной и в то же время резиновой. Это позволит работать нашему сайту на самых различных устройствах и разрешениях экранов. Наша верстка не будет зависеть от каких-то конкретных значений разрешений экранов. В заключительных уроках по верстке данного макета мы с вами добавим несколько интересных эффектов, используя возможности CSS3. Если раньше для подобных эффектов было необходимо использование JavaScript, то сегодня мы их можем создавать очень просто, воспользовавшись CSS3.

ИЗ КАКИХ УРОКОВ СОСТОИТ ВТОРАЯ ЧАСТЬ КУРСА:

  • Урок 1. Введение. Настройка страницы
  • Урок 2. Определение разметки шапки сайта
  • Урок 3. Подключение нестандартных шрифтов
  • Урок 4. Описание стилей шапки сайта
  • Урок 5. Описание разметки основного блока сайта
  • Урок 6. Описание разметки блока постов
  • Урок 7. Назначение стилей для блока постов
  • Урок 8. Описание разметки боковой колонки
  • Урок 9. Назначение стилей для боковой колонки
  • Урок 10. Описание разметки постраничной навигации
  • Урок 11. Назначение стилей для постраничной навигации
  • Урок 12. Верстка footer’а сайта
  • Урок 13. Доработка верстки макета
  • Урок 14. Адаптация верстки под мобильные устройства. Часть 1
  • Урок 15. Адаптация верстки под мобильные устройства. Часть 2
  • Урок 16. Добавление эффектов CSS3 на страницу. Часть 1
  • Урок 17. Добавление эффектов CSS3 на страницу. Часть 2

Часть 3. Верстка макета интернет-магазина

В данной части курса мы с вами будем верстать главную страницу интернет-магазина. Макет главной страницы имеет нестандартную для интернет-магазина структуру. В нем присутствует галерея изображений, блоки располагаются в одну, две, три и четыре колонки по ширине. Это дает нам возможность рассмотреть различные приемы и техники адаптивной верстки. Верстку интернет-магазина мы также будем делать адаптивной. Нестандартная структура макета позволит нам рассмотреть практически все случаи создания адаптивных блоков. При верстке мы рассмотрим создание и установку адаптивной галереи изображений. Также в одном из блоков в макете присутствует карта, которую мы тоже сделаем на 100% адаптивной. При создании адаптивной карты мы рассмотрим универсальный способ, который вам позволит делать адаптивным любой встроенный контент сайта: видео или календарь Google, таблицы Google и т.д. Стоит отметить, что главная страница интернет-магазина, которую мы с вами будем верстать в данной части курса, очень похожа на лэндинг (landing page), имеет схожую структуру. Поэтому, освоив верстку данной страницы, вы без труда сможете верстать и лэндинги.

ИЗ КАКИХ УРОКОВ СОСТОИТ ТРЕТЬЯ ЧАСТЬ КУРСА:

  • Урок 1. Введение
  • Урок 2. Подключение нестандартного шрифта к странице
  • Урок 3. Определение разметки шапки сайта
  • Урок 4. Описание стилей шапки сайта. Часть 1
  • Урок 5. Описание стилей шапки сайта. Часть 2
  • Урок 6. Подключение слайдера к странице
  • Урок 7. Назначение стилей и настройка слайдера
  • Урок 8. Описание разметки блока новостей
  • Урок 9. Назначение стилей для блока новостей
  • Урок 10. Описание разметки блока «Популярные продукты»
  • Урок 11. Назначение стилей для блока «Популярные продукты». Часть 1
  • Урок 12. Назначение стилей для блока «Популярные продукты». Часть 2
  • Урок 13. Улучшение блока «Популярные продукты»
  • Урок 14. Описание разметки блока «О магазине»
  • Урок 15. Назначение стилей для блока «О магазине»
  • Урок 16. Описание разметки блока «Подписка»
  • Урок 17. Назначение стилей для блока «Подписка»
  • Урок 18. Описание разметки для footer’a
  • Урок 19. Назначение стилей для блока «footer»
  • Урок 20. Делаем макет адаптивным. Часть 1
  • Урок 21. Делаем макет адаптивным. Часть 2
  • Урок 22. Делаем макет адаптивным. Часть 3
  • Урок 23. Делаем макет адаптивным. Часть 4
  • Урок 24. Делаем макет адаптивным. Часть 5
  • Урок 25. Заключение
Содержание:

Часть 1. Верстка макета сайта-визитки

Макет сайта-визитки, который мы будем верстать в первом блоке курса имеет достаточно простую структуру. Более того, этот макет входит в бонус к данному курсу «Верстка сайта для начинающих». И я специально решил показать верстку макета сайта-визитки в первой части курса, но верстается он уже используя HTML5. Те из вас, кто сначала изучит бонусы, то есть освоит базовые знания к курсу, увидят, как можно один и тот же сайт верстать с использованием новых тегов и возможностей HTML5 и без него. Для тех из вас, кто сразу начнет изучение с практической части курса, этот макет будет введением в верстку на HTML5 и разогревом перед основными макетами курса. Версткой данного макета я хотел показать вам, как одна и та же страница может быть сверстана с и без использования HTML5, какие при этом мы получаем сходства и различия. Чтобы вы еще больше поняли различия верстки на HTML5.

ИЗ КАКИХ УРОКОВ СОСТОИТ ПЕРВАЯ ЧАСТЬ КУРСА:

  • Урок 1. Введение. Настройка страницы
  • Урок 2. Определение разметки для страницы
  • Урок 3. Описание стилей шапки сайта
  • Урок 4. Описание стилей основного блока сайта. Часть1
  • Урок 5. Описание стилей основного блока сайта. Часть2. Заключение

Часть 2. Верстка макета блога

Во второй части курса мы будем работать с макетом блога. Данный макет состоит из шапки сайта, центрального блока и футера. Центральный блок делится на две колонки: колонка с основным контентом и колонка навигации. То есть макет имеет очень распространенную блоговую структуру. Страница, которую мы сверстаем в данном блоке курса, будет адаптивной и в то же время резиновой. Это позволит работать нашему сайту на самых различных устройствах и разрешениях экранов. Наша верстка не будет зависеть от каких-то конкретных значений разрешений экранов. В заключительных уроках по верстке данного макета мы с вами добавим несколько интересных эффектов, используя возможности CSS3. Если раньше для подобных эффектов было необходимо использование JavaScript, то сегодня мы их можем создавать очень просто, воспользовавшись CSS3.

ИЗ КАКИХ УРОКОВ СОСТОИТ ВТОРАЯ ЧАСТЬ КУРСА:

  • Урок 1. Введение. Настройка страницы
  • Урок 2. Определение разметки шапки сайта
  • Урок 3. Подключение нестандартных шрифтов
  • Урок 4. Описание стилей шапки сайта
  • Урок 5. Описание разметки основного блока сайта
  • Урок 6. Описание разметки блока постов
  • Урок 7. Назначение стилей для блока постов
  • Урок 8. Описание разметки боковой колонки
  • Урок 9. Назначение стилей для боковой колонки
  • Урок 10. Описание разметки постраничной навигации
  • Урок 11. Назначение стилей для постраничной навигации
  • Урок 12. Верстка footer’а сайта
  • Урок 13. Доработка верстки макета
  • Урок 14. Адаптация верстки под мобильные устройства. Часть 1
  • Урок 15. Адаптация верстки под мобильные устройства. Часть 2
  • Урок 16. Добавление эффектов CSS3 на страницу. Часть 1
  • Урок 17. Добавление эффектов CSS3 на страницу. Часть 2

Часть 3. Верстка макета интернет-магазина

В данной части курса мы с вами будем верстать главную страницу интернет-магазина. Макет главной страницы имеет нестандартную для интернет-магазина структуру. В нем присутствует галерея изображений, блоки располагаются в одну, две, три и четыре колонки по ширине. Это дает нам возможность рассмотреть различные приемы и техники адаптивной верстки. Верстку интернет-магазина мы также будем делать адаптивной. Нестандартная структура макета позволит нам рассмотреть практически все случаи создания адаптивных блоков. При верстке мы рассмотрим создание и установку адаптивной галереи изображений. Также в одном из блоков в макете присутствует карта, которую мы тоже сделаем на 100% адаптивной. При создании адаптивной карты мы рассмотрим универсальный способ, который вам позволит делать адаптивным любой встроенный контент сайта: видео или календарь Google, таблицы Google и т.д. Стоит отметить, что главная страница интернет-магазина, которую мы с вами будем верстать в данной части курса, очень похожа на лэндинг (landing page), имеет схожую структуру. Поэтому, освоив верстку данной страницы, вы без труда сможете верстать и лэндинги.

ИЗ КАКИХ УРОКОВ СОСТОИТ ТРЕТЬЯ ЧАСТЬ КУРСА:

  • Урок 1. Введение
  • Урок 2. Подключение нестандартного шрифта к странице
  • Урок 3. Определение разметки шапки сайта
  • Урок 4. Описание стилей шапки сайта. Часть 1
  • Урок 5. Описание стилей шапки сайта. Часть 2
  • Урок 6. Подключение слайдера к странице
  • Урок 7. Назначение стилей и настройка слайдера
  • Урок 8. Описание разметки блока новостей
  • Урок 9. Назначение стилей для блока новостей
  • Урок 10. Описание разметки блока «Популярные продукты»
  • Урок 11. Назначение стилей для блока «Популярные продукты». Часть 1
  • Урок 12. Назначение стилей для блока «Популярные продукты». Часть 2
  • Урок 13. Улучшение блока «Популярные продукты»
  • Урок 14. Описание разметки блока «О магазине»
  • Урок 15. Назначение стилей для блока «О магазине»
  • Урок 16. Описание разметки блока «Подписка»
  • Урок 17. Назначение стилей для блока «Подписка»
  • Урок 18. Описание разметки для footer’a
  • Урок 19. Назначение стилей для блока «footer»
  • Урок 20. Делаем макет адаптивным. Часть 1
  • Урок 21. Делаем макет адаптивным. Часть 2
  • Урок 22. Делаем макет адаптивным. Часть 3
  • Урок 23. Делаем макет адаптивным. Часть 4
  • Урок 24. Делаем макет адаптивным. Часть 5
  • Урок 25. Заключение

Видеокурс
Видео урок


Видеокурс "Интернет-магазин под ключ". (Андрей Бернацкий, Андрея Кудлай - Webformyself)


Мощнейшее Практическое Руководство от Мастеров Сайтостроения — просто СМОТРИ и ДЕЛАЙ! Для тех, кто спит и видит себя высокооплачиваемым спецом по разработке интернет-магазинов и сайтов любой сложности в совершенстве...


Страница курса - Интернет-магазин под ключ. (Андрей Бернацкий, Андрея Кудлай - Webformyself)

Видеокурс
Видео урок


Видеокурс "Премиум уроки по созданию сайтов". (Андрей Бернацкий, Андрей Кудлай, Виктор Гавриленко, WebForMySelf)


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


Страница курса - Премиум уроки по созданию сайтов. (Андрей Бернацкий, Андрей Кудлай, Виктор Гавриленко, WebForMySelf)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Создание сайта с нуля." (Андрей Бернацкий - Издательство Info-DVD)


Шесть замечательных уроков общей продолжительностью 2 часа 46 минут расскажут Вам о том, как быстро и легко создать собственный сайт своими руками...


Страница курса - Создание сайта с нуля. (Андрей Бернацкий - Издательство Info-DVD)

Видеокурс
Видео урок


Видеокурс "Практика резиновой верстки сайтов" (Андрей Бернацкий - WebForMySelf)


Хотите, чтобы Ваш сайт отображался красиво и элегантно в широкоформатных мониторах и также красиво и аккуратно ужимался в узких? Тогда не тяните резину!


Страница курса - Практика резиновой верстки сайтов. (Андрей Бернацкий - WebForMySelf)

Видеокурс
Видео урок


Видеокурс "Премиум — 2 год в эфире. Сезон 2013." (Андрей Бернацкий, Андрей Кудлай, Виктор Гавриленко, WebForMySelf)


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


Страница курса - Премиум уроки по созданию сайтов. 2013г. (Андрей Бернацкий, Андрей Кудлай, Виктор Гавриленко, WebForMySelf)

Видеокурс
Видео урок


Видеокурс "Киберсант - Вебмастер." (Андрей Бернацкий, Виктор Рог, Никита Королев - Издательство Info-DVD)


Это самый полный и всеохватывающий курс по созданию сайтов в Рунете. Это шесть(!) DVD дисков, включающих в себя огромный объем материала, где собрана самая необходимая информация, доходчивые и пошаговые разъяснения материала, начиная с самых азов!...


Страница курса - Киберсант - Вебмастер. (Андрей Бернацкмй, Виктор Рог, Никита Королев - Издательство Info-DVD)

Видеокурс
Видео урок


Видеокурс "Премиум — год в эфире. Сезон 2012" (Андрей Бернацкий, Андрей Кудлай, Виктор Гавриленко, WebForMySelf)


Без ложной скромности заявляем: наша с вами модель обучения оказалась очень востребованной. Даже более востребованной, чем мы ожидали вначале. На протяжении 2012 года тысячи людей оформили премиум-подписку...


Страница курса - Премиум уроки по созданию сайтов. 2012г. (Андрей Бернацкий, Андрей Кудлай, Виктор Гавриленко, WebForMySelf)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Основы адаптивной верстки сайт под мобильные" (Андрей Бернацкий - WebForMySelf)


Сегодня выходить в интернет и просматривать веб-страницы можно не только с компьютера, но и с планшета, электронной книги, смартфона и даже с помощью экрана, расположенного на двери холодильника....


Страница курса - Основы адаптивной верстки сайт под мобильные. (Андрей Бернацкий - WebForMySelf)

Видеокурс
Видео урок


Видеокурс "Практика верстки сайта под мобильные устройства" (Андрей Бернацкий - WebForMySelf)


Как создать сайта, который бы одинаково хорошо выглядел и идеально функционировал на всех типах устройств?


Страница курса - Практика верстки сайта под мобильные устройства. (Андрей Бернацкий - WebForMySelf)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Секреты техники резиновой верстки сайта" (Андрей Бернацкий - WebForMySelf)


Получи уроки совершенно бесплатно 5 секретных техник резиновой верстки сайта.


Страница курса - Секреты техники резиновой верстки сайта. (Андрей Бернацкий - WebForMySelf)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Создание интернет-магазина." (Андрей Бернацкий, Андрей Кудлай - Webformyself)


5 бесплатных видеоуроков покажут Вам процесс создания интернет-магазина с нуля: от дизайна до программирования...


Страница курса - Создание интернет-магазина. (Андрей Бернацкий, Андрей Кудлай - Webformyself)

Видеокурс
Видео урок


Видеокурс "Joomla-Мастер: с нуля до Премиум шаблона". (Андрей Бернацкий - WebForMySelf)


Условно весь курс можно разделить на две большие части. Первая часть является теоретической и называется «Joomla: Быстрый старт»...


Страница курса - Joomla-Мастер: с нуля до Премиум шаблона. (Андрей Бернацкий - WebForMySelf)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Премиум ускорению загрузки сайта". (Андрей Бернацкий - Webformyself)


Сделайте три простых настройки – и получите скоростной сайт уже сегодня! В уроках Андрей Бернацкий, практик с 7-летним стажем, на реальных примерах покажет вам базовые настройки сайта, которые МГНОВЕННО ускорят его загрузку....


Страница курса - Премиум ускорению загрузки сайта. (Андрей Бернацкий - Webformyself)

Видеокурс
Видео урок


Видеокурс "Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы". (Андрей Бернацкий - Webformyself)


Каждая лишняя секунда при открытии интернет-страницы уменьшает число посетителей, подрывает доверие, лояльность и, как результат снижает конверсию на 7%. Представляем Вашему вниманию единственный в Рунете курс....


Страница курса - Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы. (Андрей Бернацкий - Webformyself)

Видеокурс
Видео урок


Видеокурс "HTML5 и CSS3 с Нуля до Профи." (Андрей Бернацкий - WebForMySelf)


Без преувеличения на сегодняшний день это самый полный и актуальный курс в формате DVD-дисков в Рунете. Вдумайтесь сами: только лишь основной раздел курса (без учета бонусов) состоит из 47 подробнейших видеоуроков.....


Страница курса - HTML5 и CSS3 с Нуля до Профи. (Андрей Бернацкий - WebForMySelf)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Практика HTML5 и CSS3 с нуля до результата за вечер". (Андрей Бернацкий - WebForMySelf)


Прямо сейчас забирайте БЕСПЛАТНО пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3 от наиболее авторитетного в Рунете обучающего издательства для веб-мастеров....


Страница курса - Практика HTML5 и CSS3 с нуля до результата за вечер. (Андрей Бернацкий - WebForMySelf)

Видеокурс
Видео урок


Видеокурс "Фреймворк Laravel с Нуля до Профи". (Виктор Гавриленко, Андрей Бернацкий - Webformyself)


Laravel - это фреймворк для web-приложений с выразительным и элегантным синтаксисом. Он позволит упростить решение основных наболевших задач, таких как аутентификация, маршрутизация, сессии и кэширование......


Страница курса

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Фреймворк Laravel. Теория и первая практика". (Виктор Гавриленко, Андрей Бернацкий - Webformyself)


В этом мини-курсе, состоящем из 6 уроков, мы познакомимся с вами с современным и, пожалуй, самым популярным фреймворком – это PHP фреймворк Laravel....


Страница курса - Фреймворк Laravel. Теория и первая практика. (Виктор Гавриленко, Андрей Бернацкий - Webformyself)

Видеокурс
Видео урок


Видеокурс "Инструменты Front-End разработчика." (Андрей Бернацкий - Webformyself)


Данный курс построен по принципу от простого к сложному. По ходу прохождения курса мы будем рассматривать инструменты от самых необходимых (без которых вообще невозможна Front-End разработка), и, по мере прохождения курса, мы будем переходить к сложным...


Страница курса - Инструменты Front-End разработчика. (Андрей Бернацкий - Webformyself)
КОЛЛЕКЦИЯ БЕСПЛАТНОГО ВИДЕО

Если Вы не нашли видео на сайте то воспользуйтесь наши каналом с большим количеством разнообразных видео курсов на различные темы

Смотреть видео Смотреть видео

Видеокурс "HTML5 и CSS3 с Нуля до Профи." (Андрей Бернацкий - WebForMySelf)
Страница курса - HTML5 и CSS3 с Нуля до Профи. (Андрей Бернацкий - WebForMySelf)

ПОПУЛЯРНЫЕ КНИГИ, КУРСЫ И ТРЕНИНГИ

Видеокурс Видеокурс
Видеокурс Видео урок
Видеокурс Бесплатный видеокурс
Видеокурс Видео урок
Видеокурс Видео урок
Видеокурс Бесплатный видео урок

БЕСПЛАТНОЕ ВИДЕО, МИНИ - КУРСЫ

Промо ролики видеокурса Основы адаптивной верстки сайт под мобильные . (Андрей Бернацкий - WebForMySelf)
Промо ролики видеокурса Премиум уроки по HTML&CSS. (Андрей Бернацкий - Webformyself)
Промо ролики видеокурса Основы оптимизации сайтов. (Андрей Бернацкий - Webformyself)
Промо ролики видеокурса Современные тенденции и подходы в веб-разработке. (Андрей Бернацкий - Webformyself)
Промо ролики видеокурса Практика HTML5 и CSS3 с нуля до результата за вечер. (Андрей Бернацкий - WebForMySelf)
Промо ролики видеокурса Секреты техники резиновой верстки сайта. (Андрей Бернацкий - WebForMySelf)