Мы в сети

VK
FB

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

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

Рейтинг:

Издательство 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. Заключение

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


Бесплатный видеокурс "Профессиональный сайт со своей системой управления контентом. (Виктор Гавриленко - WebForMySelf)


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

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


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


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

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


Видеокурс "Корпоративный сайт под ключ". (Виктор Гавриленко - WebForMySelf)


Хотите получить самый легкий и короткий путь создания корпоративного сайта «под ключ»? Вы можете еще годами изучать все курсы по сайтостроению и выкинуть не один десяток тысяч рублей....

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


Видеокурс "JavaScript&jQuery с нуля до профи". (Виктор Гавриленко - Webformyself)


Наконец-то! Вам больше нет необходимости плодить неудобные примитивные сайты. ПРИШЛО ВРЕМЯ ОВЛАДЕТЬ НОВЕЙШИМИ ТЕХНОЛОГИЯМИ В САЙТОСТРОЕНИИ! Как известно, число пользователей в Рунете неумолимо растет, но вместе с тем растет...

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


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


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

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


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


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

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


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


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

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


Видеокурс "WordPress-Мастер: от Личного блога до Премиум шаблона." (Андрей Кудлай - WebForMySelf)


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

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


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


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

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


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


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

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


Видеокурс "Joomla-Профессионал: создание расширений для Joomla". (Виктор Гавриленко - Webformyself)


Это первый и единственный видеокурс в Рунете,который обучает создавать расширения практически любой сложности на CMS Joomla, а также раскрывает все аспекты API Joomla.....

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


Видеокурс "Интернет-магазин на Joomla". (Виктор Гавриленко - Webformyself)


Без преувеличения это самое полное пошаговое руководство по созданию интернет-магазинов на CMS Joomla в Рунете. Обещаем, что уже в этом месяце вы создадите интернет-магазин своей мечты – бесплатно и с полного нуля....

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


Бесплатный видеокурс "Создание собственного шаблона на CMS Joomla с нуля." (Виктор Гавриленко - WebForMySelf)


Эта система, научит Вас с полного нуля создавать ваши уникальные шаблоны на движке Joomla – с неповторимым дизайном....

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


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


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

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


Бесплатный видеокурс "WordPress – основы создания тем". (Андрей Кудлай - Webformyself)


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

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


Видеокурс "Интернет-магазин на OpenCart. Создание магазина с уникальным шаблоном". (Андрей Кудлай - Webformyself)


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

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


Бесплатный видеокурс "Фреймворк Bootstrap. Верстаем адаптивно, просто, быстро! ". (Андрей Кудлай - Webformyself)


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

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


Видеокурс "1С-Битрикс. Практика создания веб-проектов!". (Андрей Кудлай - Webformyself)


В курсе изучается одна из наиболее популярных CMS в Рунете-1С-Битрикс.Данный движок позволяет создавать сайты абсолютно любой направленности и абсолютно любого уровня сложности.Это может быть:интернет-магазин,корпоративный сайт компании,информационный....

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


Бесплатный видеокурс "CakePHP - мощь и гибкость современного PHP-фреймворка". (Андрей Кудлай - Webformyself)


Хотите брать самые дорогие заказы на фрилансе или продвигаться по карьерной лестнице в веб-студиях как программист и веб-мастер?...

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


Видеокурс "Фреймворк CakePHP: с Нуля до Гуру на примере создания корпоративного сайта". (Андрей Кудлай - Webformyself)


Первый и единственный в Рунете исчерпывающий видеокурс на тему работы с фреймворком CakePHP… Уже в ближайшие 2 месяца вы из полного новичка веб-программирования превратитесь в профессионала....

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


Видеокурс "Фреймворк Bootstrap: практика адаптивной верстки от А до Я". (Андрей Кудлай - Webformyself)


На всем русскоязычном пространстве по состоянию на начало 2016 года нет ни одного исчерпывающего видеоруководства, которое полностью бы раскрывало все нюансы работы в этом невероятно популярном CSS-фреймворке....

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


Бесплатный видеокурс "Фреймворк Yii2: теория и первая практика". (Андрей Кудлай - Webformyself)


В этом мини-курсе, состоящем из 6 уроков, мы познакомимся с вами с современным и одним из наиболее востребованных и популярнейших фреймворков в Рунете – это PHP фреймворк Yii2. Фреймворк Yii2 – это программный каркас для создания веб-приложений.....

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


Видеокурс "Фреймворк YII2 с Нуля до Профи. Быстрая разработка с современным фреймворком" (Андрей Кудлай - WebForMySelf)


Фреймворк Yii2 – это программный каркас для создания веб-приложений, написанный на PHP. Фреймворк Yii2 позволяет создавать сайты любого уровня сложности.....

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


Бесплатный видеокурс "CMS 1C-Битрикс: быстрый старт, первые результаты". (Андрей Кудлай - Webformyself)


Данный мини-курс призван познакомить вас с основами создания шаблонов для битрикса, а также дать общее представление об этой CMS и познакомить с основами работы в ней. Уже начиная с первого урока мы с вами перейдем к практике и установим Битрикс на......

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


Бесплатный видеокурс "OpenCart: быстрый старт, первые результаты". (Андрей Кудлай - Webformyself)


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

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


Видеокурс "PHP-Мастер. От теории до собственной CMS интернет-магазина". (Андрей Кудлай - Webformyself)


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

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


Бесплатный видеокурс "PHP. Прием платежей на сайте". (Андрей Кудлай - Webformyself)


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

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


Видеокурс "Фреймворк Bootstrap 4 + WordPress 5. Руководство по адаптивной верстке". (Андрей Кудлай - Webformyself)


Уникальность курса состоит в том, что здесь вы найдете не только уроки по CSS-фреймворку Bootstrap 4, но и по CMS WordPress. Созданная в курсе верстка на Bootstrap устанавливается на CMS №1 в мире – WordPress. Таким образом, в одном месте показан весь....

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


Видеокурс "Laravel. Полное руководство". (Андрей Кудлай - Webformyself)


Видеокурс состоит из 2 больших разделов и включает в себя 58 уроков общей продолжительностью около 21 часа.

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


Видеокурс "Фреймворк Yii2. Быстрая разработка с современным фреймворком". (Андрей Кудлай - Webformyself)


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

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


Видеокурс "Python. Полное руководство". (Андрей Кудлай - Webformyself)


Видеокурс состоит из 2 больших разделов и включает в себя 72 урока общей продолжительностью более 23 часов. Первый раздел является квинтэссенцией тщательно отобранной. Второй большой раздел видеокурса полностью посвящен изучению библиотеки Tkinter.

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


Бесплатный видеокурс "Фреймворк Yii2. Быстрый старт". (Андрей Кудлай - Webformyself)


В этом мини-курсе, состоящем из 6 уроков, вы познакомитесь с фреймворком Yii2. Фреймворк Yii2 – это программный каркас для создания веб-приложений, написанный на PHP. Данный фреймворк позволяет создавать сайты любого уровня сложности визитка, блог....

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


Бесплатный видеокурс "Фреймворк Bootstrap 4. Быстрый старт". (Андрей Кудлай - Webformyself)


Представляем вам мини-курс «Bootstrap 4. Быстрый старт». Курс включает в себя 9 небольших уроков общей продолжительностью почти 2 часа. В курсе показана верстка макета из PSD с применением CSS-фреймворка Bootstrap 4. Bootstrap – это популярнейший......

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


Бесплатный видеокурс "Python. Быстрый старт". (Андрей Кудлай - Webformyself)


Посмотрев уроки предлагаемого курса, вы получите представление о Python, узнаете о сферах его применения, о том, какие программы и приложения позволяет создавать этот замечательный язык программирования. Из предлагаемых уроков вы узнаете, как установить..

Это видеокурс
Видеокурс


Видеокурс "Django. Полное руководство". (Андрей Кудлай - webformyself)


Овладев фреймворком Django, вы сможете создавать сайты любого типа и любой сложности, поскольку данный фреймворк хорошо подходит для разработки масштабируемых и высоконагруженных проектов. Вы сможете создавать как простые сайты-визитки или блоги, так ....
КОЛЛЕКЦИЯ БЕСПЛАТНОГО ВИДЕО

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

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

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

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

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

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