Strong-stuff.ru

Образование Онлайн
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

HTML5 и CSS3 с нуля до профи (2016) Видеокурс

Автор: Unix от 25-04-2016, 23:44, Посмотрело: 11 172, Обсуждения: 0

283 — 681 Kbps
Аудио: AAC, 2 ch, 106 Kbps

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

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

В нашем новом курсе ВСЕ макеты верстаются сразу АДАПТИВНЫМИ и КРОССБРАУЗЕРНЫМИ.

Изучение курса построено по принципу «от простого к сложному» и от «теории к практике».

Я не просто научу вас верстать простейшие веб-страницы, мы с вами очень подробно (вплоть до малейших деталей) проработаем верстку на примере трех различных по своей сложности наиболее популярных видов веб-сайтов в современном Интернете:

• сайта-визитки
• блога и.
• интернет-магазина

ПЕРВАЯ ЧАСТЬ
Верстка макета сайта-визитки

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

ВТОРАЯ ЧАСТЬ
Верстка макета блога

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

ТРЕТЬЯ ЧАСТЬ
Верстка макета интернет-магазина

Урок 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
Премиум курс. Учебник по основам HTML

Урок 1. Введение. Основы HTML
Урок 2. Структура HTML документа
Урок 3. Теги форматирования текста
Урок 4. Изображения
Урок 5. Ссылки. Ссылки-изображения
Урок 6. Списки
Урок 7. Таблицы
Урок 8. Формы

БОНУС 2
Премиум курс. Учебник по основам CSS

Урок 1. Способы подключения
Урок 2. Назначения классов и id
Урок 3. Свойства шрифта
Урок 4. Свойства текста
Урок 5. Фон
Урок 6. Ширина, высота. Тег Div и Span
Урок 7. Рамка
Урок 8. Отступы
Урок 9. Основы CSS. Float, Clear, Display
Урок 10. Основы CSS. Свойство position

БОНУС 3
Премиум курс. Верстка сайтов для начинающих

Урок 1. Определение разметки
Урок 2. Описание разметки
Урок 3. CSS шапки сайта
Урок 4. CSS области контента
Урок 5. Доработка верстки

БОНУС 4
Премиум курс. HTML 5: основы

Урок 1. Структура документа HTML 5
Урок 2. Обзор тегов header и footer
Урок 3. Тег article
Урок 4. Тег section
Урок 5. Теги nav, main и aside
Урок 6. Теги figure и figcaption
Урок 7. Кроссбраузерное оформление
HTML 5 тегов
Урок 8. Тег input. Новые типы тега в html 5.
Часть 1
Урок 9. Тег input. Новые типы тега в html 5. Часть 2
Урок 10. HTML 5 video. Вставка видео на сайт
Урок 11. HTML 5 audio. Вставка аудио на сайт
Урок 12. HTML 5 canvas. Рисование в HTML 5
Урок 13. HTML 5 geolocation. Определение местоположения в HTML 5

БОНУС 5
Премиум курс по CSS3

Урок 1. Работа с фоном в CSS3
Урок 2. Тени и закругленные углы
Урок 3. Прозрачность фона, картинки, текста и цвета в CSS
Урок 4. Линейные градиенты CSS
Урок 5. Колонки
Урок 6. Радиальные градиенты
Урок 7. Шрифт
Урок 8. Работа с текстом в css 3
Урок 9. Псевдоклассы
Урок 10. Селекторы
Урок 11. Трансформация

БОНУС 6
Анатомия прибыльного лендинг пейдж

Урок 1. Анатомия прибыльного лендинг пейдж

БОНУС 7
Создание лендинг пейдж за один вечер

Урок 1. Введение
Урок 2. Подключаем нестандартный шрифт к странице
Урок 3. Определяем разметку шапки сайта
Урок 4. Описываем стили шапки сайта
Урок 5. Определяем разметку слайдера
Урок 6. Назначаем стили для слайдера
Урок 7. Верстаем блок «Особенности»
Урок 8. Верстаем блок «Галерея»
Урок 9. Определяем разметку блока видео
Урок 10. Описываем стили блока видео
Урок 11. Верстаем блок «Скачать приложение»
Урок 12. Просматриваем макет. Устраняем недочеты
Урок 13. Определяем разметку блока контактов
Урок 14. Описываем стили блока контактов
Урок 15. Верстаем футер
Урок 16. Адаптируем слайдер
Урок 17. Заключение

Рейтинг:

Автор курса: Михаил Русаков

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

Автор(ы): Михаил Русаков

Видеокурс научит Вас создавать сайты с использованием HTML5 и CSS3. Из курса Вы узнаете, что нового появилось в этих Web-технологиях с разбором множества примеров. И, самое главное, целый раздел посвящён вёрстке главной страницы MyRusakov.ru именно с помощью HTML5 и CSS3. Таким образом, Вы увидите, как верстается реальная страница. И, наконец, Вы узнаете, как адаптировать сайт под мобильные устройства: смартфоны, планшеты и просто мобильные телефоны. Всё это так же на примере главной страницы MyRusakov.ru.

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

HTML5 и CSS3 с Нуля до Гуру. (Михаил Русаков)

Раздел №1. HTML5

Из этого раздела:

  • Вы узнаете очень важные особенности HTML5, которые обязательно необходимо учитывать при использовании этой Web-технологии.
  • Вы узнаете, как правильно вставлять видео и аудио на сайт. Тут тоже есть свои нюансы, без учёта которых у некоторых пользователей Ваше видео или аудио просто не запустится. Обо всех этих нюансах Вы узнаете из этого раздела.
  • Вы узнаете, как использовать новые семантические теги для грамотной оптимизации под поисковые системы.
  • Вы увидите все новые возможности по работе с формами.
  • Вы увидите на конкретном примере, как реализуется с использованием HTML5 механизм Drag and Drop.
  • Вы узнаете, как можно получить координаты местоположения посетителей Вашего сайта.
  • Вы узнаете, как можно рисовать на Web-странице, используя новый элемент Canvas.

Содержание:

  • Урок №1. Как проходить курс?
  • Урок №2. Введение в HTML5
  • Урок №3. Структурные элементы
  • Урок №4. Вставка аудио
  • Урок №5. Вставка видео
  • Урок №6. Формы
  • Урок №7. Drag and Drop
  • Урок №8. Определение местоположения пользователя
  • Урок №9. Canvas

Раздел №2. CSS3

Из этого раздела:

  • Вы узнаете особенности CSS3, которые обязательно нужно знать, прежде чем его использовать. Без учёта этих особенностей могут возникнуть огромные проблемы с отображением сайта в разных браузерах (кроссбраузерностью).
  • Вы увидите, как использовать новые селекторы.
  • Вы увидите новые возможности по работе с текстом.
  • Вы узнаете все возможности по заданию фона через CSS3.
  • Вы узнаете, как создавать прозрачный цвет с помощью CSS3.
  • Вы узнаете, как правильно задавать собственный шрифт. В этом разделе разбираются мелкие детали, которые очень многие верстальщики не учитывают, а потом появляются проблемы со шрифтами на сайте. После просмотра соответствующего урока из этого раздела Вы будете знать, что это за проблемы и как их решить очень быстро и легко.
  • Вы узнаете, как создаются тени у текста и блоков.
  • Вы увидите, как делаются самые различные градиенты.
  • Вы узнаете, как трансформировать элементы, например, поворачивать те же изображения на определённый угол.
  • Вы узнаете, как сделать анимацию на CSS3. Несколько самых различных и в то же время очень используемых в практике примеров Вы увидите своими глазами. Когда я впервые увидел возможности по анимации в CSS3, то был очень удивлён, уверен, что и Вам всё очень понравится.
Читать еще:  Курсы по литературе

После этих 2-х разделов по HTML5 и CSS3 Вы будете обладать всеми необходимыми знаниями для успешной вёрстки страниц.

Содержание:

  • Урок №1. Введение в CSS3
  • Урок №2. Новые селекторы
  • Урок №3. Текст
  • Урок №4. Подключение шрифтов
  • Урок №5. Фон
  • Урок №6. Цвет
  • Урок №7. Рамки
  • Урок №8. Тени
  • Урок №9. Градиент
  • Урок №10. Трансформирование
  • Урок №11. Эффект перехода
  • Урок №12. Анимация

Раздел №3. Вёрстка реальной страницы на HTML5 и CSS3

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

Содержание:

  • Урок №1. Подготовка к вёрстке
  • Урок №2. Нарезка макетам
  • Урок №3. Логотип и верхнее меню
  • Урок №4. Верхняя частью
  • Урок №5. Вывод слайдера
  • Урок №6. Главное менюл
  • Урок №7. Подпискам
  • Урок №8. Опрос
  • Урок №9. Правые блокил
  • Урок №10. Главная статьи
  • Урок №11. Блоки статейд
  • Урок №12. Навигация по страницам
  • Урок №13. Подвал
  • Урок №14. Кроссбраузерность
  • Урок №15. Адаптация сайта под разные разрешениям
  • Урок №16. Заключение

Бонусы:

  • Видеокурс «Вёрстка под мобильные устройства».

Пройдя этот курс:

  • Вы узнаете все особенности вёрстки под мобильные устройства. Эти особенности крайне важно знать перед тем, как делать вёрстку.
  • Вы узнаете, как правильно изменить дизайн для вёрстки под мобильные устройства.
  • Вы увидите, как верстается главная страница MyRusakov.ru под мобильные устройства.
  • Вы сможете самостоятельно создавать мобильные версии своих сайтов, и это самое главное, что Вы получите, изучив этот курс.

И самое главное, что этот курс является бесплатным Бонусом к курсу «HTML5 и CSS3 с Нуля до Гуру».

  • Видеокурс «Вёрстка сайта с нуля».

Пройдя данный курс, Вы сможете сверстать страницы любой сложности. А уже после надо проходить курс «HTML5 и CSS3 с Нуля до Гуру», который упростит Вашу работу и увеличит её качество.

Раздел №1. HTML5

Из этого раздела:

  • Вы узнаете очень важные особенности HTML5, которые обязательно необходимо учитывать при использовании этой Web-технологии.
  • Вы узнаете, как правильно вставлять видео и аудио на сайт. Тут тоже есть свои нюансы, без учёта которых у некоторых пользователей Ваше видео или аудио просто не запустится. Обо всех этих нюансах Вы узнаете из этого раздела.
  • Вы узнаете, как использовать новые семантические теги для грамотной оптимизации под поисковые системы.
  • Вы увидите все новые возможности по работе с формами.
  • Вы увидите на конкретном примере, как реализуется с использованием HTML5 механизм Drag and Drop.
  • Вы узнаете, как можно получить координаты местоположения посетителей Вашего сайта.
  • Вы узнаете, как можно рисовать на Web-странице, используя новый элемент Canvas.

Содержание:

  • Урок №1. Как проходить курс?
  • Урок №2. Введение в HTML5
  • Урок №3. Структурные элементы
  • Урок №4. Вставка аудио
  • Урок №5. Вставка видео
  • Урок №6. Формы
  • Урок №7. Drag and Drop
  • Урок №8. Определение местоположения пользователя
  • Урок №9. Canvas

Раздел №2. CSS3

Из этого раздела:

  • Вы узнаете особенности CSS3, которые обязательно нужно знать, прежде чем его использовать. Без учёта этих особенностей могут возникнуть огромные проблемы с отображением сайта в разных браузерах (кроссбраузерностью).
  • Вы увидите, как использовать новые селекторы.
  • Вы увидите новые возможности по работе с текстом.
  • Вы узнаете все возможности по заданию фона через CSS3.
  • Вы узнаете, как создавать прозрачный цвет с помощью CSS3.
  • Вы узнаете, как правильно задавать собственный шрифт. В этом разделе разбираются мелкие детали, которые очень многие верстальщики не учитывают, а потом появляются проблемы со шрифтами на сайте. После просмотра соответствующего урока из этого раздела Вы будете знать, что это за проблемы и как их решить очень быстро и легко.
  • Вы узнаете, как создаются тени у текста и блоков.
  • Вы увидите, как делаются самые различные градиенты.
  • Вы узнаете, как трансформировать элементы, например, поворачивать те же изображения на определённый угол.
  • Вы узнаете, как сделать анимацию на CSS3. Несколько самых различных и в то же время очень используемых в практике примеров Вы увидите своими глазами. Когда я впервые увидел возможности по анимации в CSS3, то был очень удивлён, уверен, что и Вам всё очень понравится.

После этих 2-х разделов по HTML5 и CSS3 Вы будете обладать всеми необходимыми знаниями для успешной вёрстки страниц.

Содержание:

  • Урок №1. Введение в CSS3
  • Урок №2. Новые селекторы
  • Урок №3. Текст
  • Урок №4. Подключение шрифтов
  • Урок №5. Фон
  • Урок №6. Цвет
  • Урок №7. Рамки
  • Урок №8. Тени
  • Урок №9. Градиент
  • Урок №10. Трансформирование
  • Урок №11. Эффект перехода
  • Урок №12. Анимация

Раздел №3. Вёрстка реальной страницы на HTML5 и CSS3

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

Содержание:

  • Урок №1. Подготовка к вёрстке
  • Урок №2. Нарезка макетам
  • Урок №3. Логотип и верхнее меню
  • Урок №4. Верхняя частью
  • Урок №5. Вывод слайдера
  • Урок №6. Главное менюл
  • Урок №7. Подпискам
  • Урок №8. Опрос
  • Урок №9. Правые блокил
  • Урок №10. Главная статьи
  • Урок №11. Блоки статейд
  • Урок №12. Навигация по страницам
  • Урок №13. Подвал
  • Урок №14. Кроссбраузерность
  • Урок №15. Адаптация сайта под разные разрешениям
  • Урок №16. Заключение

Бонусы:

  • Видеокурс «Вёрстка под мобильные устройства».

Пройдя этот курс:

  • Вы узнаете все особенности вёрстки под мобильные устройства. Эти особенности крайне важно знать перед тем, как делать вёрстку.
  • Вы узнаете, как правильно изменить дизайн для вёрстки под мобильные устройства.
  • Вы увидите, как верстается главная страница MyRusakov.ru под мобильные устройства.
  • Вы сможете самостоятельно создавать мобильные версии своих сайтов, и это самое главное, что Вы получите, изучив этот курс.

И самое главное, что этот курс является бесплатным Бонусом к курсу «HTML5 и CSS3 с Нуля до Гуру».

  • Видеокурс «Вёрстка сайта с нуля».

Пройдя данный курс, Вы сможете сверстать страницы любой сложности. А уже после надо проходить курс «HTML5 и CSS3 с Нуля до Гуру», который упростит Вашу работу и увеличит её качество.

Видеокурс по HTML5 и CSS3

Для того чтобы создавать страницы с использованием новой семантической разметкой современному Frontend разработчику необходимо освоить технологию и навыки «HTML5 и CSS3». Вы сможете разместить на странице видео или аудио, узнаете, что такое Geolocation API. Также научитесь работать с новыми стилевыми свойствами, создавать анимацию и трехмерные эффекты, не применяя ничего, кроме CSS.

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

Воспроизведение аудио и видео медиа файлов на Вашей веб-странице без использования дополнительного программного обеспечения с возможностью настройки своего собственного проигрывателя — теперь не проблема, только в том случае, если Вы используете HTML5. Все что Вам нужно — базовые знания языка JavaScript и правильная подготовка (кодирование) аудио и видео файлов перед добавлением на сайт. Обо всех этих тонкостях Вы узнаете, изучив данный видео урок. Вторая часть урока посвящена новшествам, которые коснулись веб-форм. Теперь Вам не придется тратить время на написание сложных регулярных выражений с целью проверки правильности введенных пользователем данных в поля. HTML5 сделает это за Вас. Об этих и других фичах будет идти речь в видео уроке.

Читать еще:  Курсы обучения ремонту сотовых телефонов

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

Создание приложений для бизнеса, веб-игр и прочих динамических эффектов теперь возможно с помощью элемента «canvas», который представляет собой область на веб-странице, в которой можно рисовать растровую графику, используя JavaScript. Просмотрев данный урок и создав после этого пару своих графических эскизов, Вы убедитесь, что технология Flash с появлением HTML5 становится не актуальной.

Кроссбраузерность и адаптивность — вот к чему нужно стремиться современному front-end разработчику. Активное использование планшетов, смартфонов, ноутбуков для интернет-серфинга заставляет веб-мастеров адаптировать сайт под разные разрешения экранов для того, чтобы пользователю было комфортно пользоваться сайтом. Этот урок не только научит Вас основным приемам создания адаптивного дизайна, но еще и ознакомит с библиотекой LESS, которая значительно ускорит написание стилей, используя динамичиский CSS.

Новая технология WebStorage значительно расширяет возможности хранения данных в браузере. В отличии от cookies, которые способны хранить всего 4Kb данных, в WebStorage помещается до 5Mb и данные хранятся на стороне клиента. Во второй части урока Вы познакомитесь с технологией Web Workers с помощью которой можно реализовывать сложные вычисление в отдельном потоке, независимо от главной страницы. Это дает возможность пользователю работать со страницей без каких-либо препятствий, в то время как в фоне будут происходить сложные вычисления.

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

Основная цель любого сайта — донести информацию до пользователя. Успехом и большой популярностью будут пользоваться те ресурсы, где эта информация правильно предоставлена (оформлена). И здесь очень важную роль играет шрифт, которым написан текст. В этом уроке Вы научитесь правильно подбирать и подключать красивые шрифты для Вашего сайта быстро и надежно, а также использовать css стили для оформления текста.

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

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

Видео курс HTML5 Web Components

В данном уроке вам будет представлена технология HTML5 Web Components и причины ее появления. Также, мы разберем задачи, которые стоят перед web-девелоперами и методы их решения с помощью HTML5 Web Components.

Разрабатывая интерфейс пользователя, могут возникнуть проблемы с конфликтами стилей. Shadow DOM избавит вас от этого, а взаимодействие с ним, с помощью JavaScript кода, во многом увеличит ваши возможности.

Этот видео урок расскажет от том, какие CSS селекторы позволяют упростить оформление пользовательских элементов управления, а также научитесь соединять JavaScript, HTML и CSS код в один документ.

ТОП-50 Лучших Курсов по Вёрстке на HTML и CSS для Начинающих

А ты знал, что, по данным сайта TRUD.COM, верстальщики HTML и CSS зарабатывают 50 тысяч рублей в месяц? Это в полтора раза больше средней зарплаты в России! Даже мой батя, который сутками пашет на заводе и то меньше получает.

То есть, освоив профессию верстальщика, ты сможешь зарабатывать немало денег. Вопрос только в том, как её освоить.

А ответ прост — с помощью платных и бесплатных курсов по HTML и CSS (вдобавок, думаю, можно припихнуть сюда также JavaScript и PHP).

О них я и расскажу в этой статье.

Сначала о бесплатных курсах, потому что знаю, как тебе не хочется тратить лишние деньги. А потом о платных тренингах и программах.

Итак. Без лишних предисловий… Полетели!

Бесплатные курсы по вёрстке на HTML и CSS —ТОП-30 лучших

№1. HTML/CSS от Beonmax

Кто проводит: Beonmax.

Формат: видеоуроки + интерактивные упражнения + домашние задания.

Сколько длится: 31 видеурок = 5 часов.

Что ты узнаешь из курса:

  1. Какие программы и инструменты надо использовать для вёрстки.
  2. Какие теги HTML существуют.
  3. Основы синтаксиса CSS.
  4. Как создавать меню, хедер, футер, сайдбар и многое другое.

№2. Интерактивный курс создания сайтов HTML и CSS с нуля (с сертификатом об окончании)

Кто проводит: Fructcode.

Формат: видеоуроки + интерактивные упражнения + домашние задания.

Сколько длится: 6 часов.

Стоимость: часть курса бесплатна, другая часть доступна после оформления недорогой подписки.

Что ты узнаешь из курса:

  1. Как пользоваться html-тегами div, span, p, ul, li и другими.
  2. Для чего нужен CSS (каскадные таблицы стилей).
  3. Как использовать css-свойства margin, position, padding, color, background и другие.
  4. Что такое адаптивная вёрстка.
  5. Как сделать вёрстку сайта.
  6. Как пользоваться инструментами разработчика в браузере Google Chrome.
  7. Что такое viewport и как его использовать.
  8. Как создать раздел с комментариями на сайте.
  9. Как встроить видео в html-страницу.
  10. Как изменить вёрстку сайта в браузере.
  11. Как связать html-страницы между собой.
  12. Как сверстать меню на сайте.

№3. Основы HTML и CSS

Кто проводит: онлайн-университет интернет-профессий «Нетология».

Формат: онлайн-вебинары 2 раза в неделю.

Сколько длится: 2 недели.

Что ты узнаешь из курса:

  1. Как вносить правки в HTML-код страницы и верстать текстовые блоки.
  2. Как менять оформление и стиль элементов сайта.
  3. Как профессиональные верстальщики работают над проектами.

№4. Курсы от HTML Academy

Помню сам проходил эти курсы. Целую неделю по 3-4 часа в день сидел за бесплатными уроками от инструктора Кекса.

Кто проводит: HTML Academy, на мой взгляд, её сайт — лучшее место для обучения основам вёрстки.

Формат: интерактивные уроки с практическими заданиями.

Сколько длится: зависит от твоей скорости и мотивации.

Стоимость: большая часть курсов бесплатна.

Что ты узнаешь из курса:

  1. Основы HTML5.
  2. Базовое представление о CSS3.
  3. Основы JavaScript.
  4. Основы PHP.

№5. Курсы на Udemy

Кто проводит: разные преподаватели со всего мира.

Формат: видеоуроки + практические задания + тесты.

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

Стоимость: есть бесплатные курсы, есть платные.

№6. Курсы на CodeAcademy

Кто проводит: разные преподаватели (в основном на английском языке, поэтому, если у тебя с ним туговато, лучше читай дальше).

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

Сколько длится: в зависимости от твоих способностей и наличия свободного времени.

№7. Бесплатный курс Евгения Попова по HTML для новичков

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

Формат: 33 видеоурока.

Сколько длится: всё зависит от твоих сил и скорости.

Что ты узнаешь из курса:

  1. Понятие тега.
  2. Как создавать каркас страниц.
  3. Как создавать параграфы и заголовки.
  4. Как создавать списки.
  5. Как создавать атрибуты.
  6. Как ставить ссылки.
  7. Как делать красивые таблицы.
  8. Как красиво оформлять текст.
  9. Как создавать поля форм, радиокнопки и чекбоксы.
  10. И т. п.

№8. Бесплатный курс Евгения Попова по CSS

Формат: 45 видеоуроков.

Сколько длится: всё зависит от твоих сил и скорости.

Что ты узнаешь из курса:

  1. Принципы работы CSS.
  2. Как подключать 3 базовых селектора.
  3. Что такое групповые селекторы.
  4. Что такое селекторы потомков.
  5. Что такое псевдоселекторы ссылок.
  6. Какие бывают семейства шрифтов.
  7. Как выравнивать текст.
  8. Как задавать высоту строки.
  9. Как делать сокращенную запись.
  10. Как делать рамки.
  11. Как работать со списками.
  12. Что такое наследование.
  13. Каскадность и приоритетность.
  14. Блочная модель, margin и padding.
  15. Ширина и высота блока, выравнивание.
  16. Конфликты полей.
  17. Блочные и встроенные элементы.
  18. Фоновый цвет и изображение.
  19. Повтор фонового изображения.
  20. Позиционирование фонового изображения.
  21. Фиксация фона.
  22. Краткая запись фоновых свойств.
  23. Как делать таблицы.
  24. Как создавать простой каркас на основе float.
  25. Что такое чистка обтекания.
  26. Колонки одной высоты.
  27. Позиционирование.
  28. Абсолютное позиционирование.
  29. Относительное позиционирование.
  30. Фиксированное позиционирование.
  31. Z-индексы.
  32. Видимость элементов.
  33. Максимальная и минимальная ширина сайта.
  34. Два способа подключения стилей
  35. Что такое наследование ненаследуемых свойств.
Читать еще:  Курсы кулинарии бесплатно

№9. Курс HTML для начинающих

Кто проводит: Артём Ивашкевич, программист компании Lamoda.

Формат: пошаговые статьи-уроки.

Сколько длится: 55 уроков.

Какие уроки есть в курсе:

  1. Создаём свою первую HTML-страницу.
  2. Теги как основа HTML-страницы.
  3. Тег doctype: указываем версию HTML.
  4. Из чего должна состоять любая страница в HTML.
  5. Заголовок HTML-страницы.
  6. Кодировка HTML-страницы.
  7. Ключевые слова (кейворды, keywords).
  8. Тег description: краткое описание страницы.
  9. Комментарии в HTML.
  10. Подключение CSS-стилей к HTML.
  11. Подключение скриптов JavaScript в HTML.
  12. Итог второго уровня курса по HTML.
  13. Разметка текста.
  14. Делаем абзацы в HTML.
  15. Делаем заголовки в HTML.
  16. Маркированные списки в HTML.
  17. Нумерованный список в HTML: тег ol.
  18. Делаем вложенный список в HTML.
  19. Выделяем важное жирным шрифтом.
  20. Курсив в HTML: теги em и i.
  21. Переносы и разделители в HTML: теги br и hr.
  22. Используем цитаты в HTML.
  23. Верхние и нижние индексы: оформляем формулы.
  24. Выводим текст как есть: тег pre.
  25. Учимся делать ссылки в HTML.
  26. Что такое абсолютные и относительные ссылки.
  27. Делаем ссылку на файл.
  28. Ссылка с якорем.
  29. Всплывающая подсказка для ссылок.
  30. Как вставлять картинки в HTML.
  31. Делаем картинку ссылкой.
  32. Описание картинки в HTML.
  33. Создаём таблицу в HTML: тег table.
  34. Делаем границы для таблицы в HTML.
  35. Горизонтальные и вертикальные границы в таблице HTML.
  36. Отступы в таблицах.
  37. Название таблицы в HTML.
  38. Ячейки-заголовки в таблице HTML.
  39. Объединение ячеек в таблицах.
  40. Выравниваем текст в таблице HTML.
  41. Способы выравнивания таблицы по центру в HTML.
  42. Учимся изменять цвет таблицы в HTML.
  43. Изменяем размер таблицы в HTML.
  44. Учимся создавать формы в HTML.
  45. Как задать значение по умолчанию для поля в форме.
  46. Как правильно сделать подписи к полям ввода.
  47. Создаём форму авторизации на HTML.
  48. Многострочное поле ввода: тег textarea.
  49. Поле-галочка в HTML.
  50. Поле-переключатель в форме HTML.
  51. Делаем раскрывающийся список в HTML.
  52. Форма для загрузки файлов.
  53. Используем скрытое поле в форме.
  54. Табличная вёрстка HTML-страничек. Прототип сайта.
  55. Как выложить сайт в Интернет: простая инструкция.

№10. Курс HTML и CSS — вёрстка сайтов для начинающих

Кто проводит: PHP-School.

Формат: статьи-уроки + домашние задания.

Сколько уроков: 11.

Продолжительность: 20 часов.

№11. Free HTML and CSS tutorial

Кто проводит: Джереми Томас, американский фронтенд-разработчик и фрилансер, сотрудничающий с такими компаниями, как Microsoft и Sony.

Формат: текстовые уроки (на английском языке).

Сколько уроков: 50 уроков.

Продолжительность: зависит от тебя.

Что ты узнаешь на курсе:

  1. Синтаксис HTML.
  2. Его семантические элементы.
  3. Всё о создании ссылок.
  4. Основы форматирования текста.
  5. Как позиционировать элементы в CSS.
  6. Как менять шрифты.
  7. Как делать задний фон на сайте.
  8. И многое другое.

№12. Курсы по HTML от HTML Dog

Кто проводит: англоязычный сайт для обучения программированию.

Формат: текстовые уроки.

Сколько уроков: 3 курса (для начинающих, середнячков и профи) примерно по 10 уроков.

Продолжительность: зависит от тебя.

№13. Курсы по CSS от HTML Dog

Кто проводит: HTML Dog.

Формат: статьи-уроки.

Сколько уроков: также 3 курса 8-15 уроков.

Продолжительность: зависит от тебя.

Специалист | HTML5 и CSS3 (Уровень 1,2,3) (2016) (PCRec)

Автор (режиссер): Специалист
Жанр: Верстка

Описание:
— HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3
— HTML и CSS. Уровень 2. Кроссбраузерная верстка, основы юзабилити, HTML5 и CSS3
— HTML и CSS. Уровень 3. Продвинутые методологии и инструменты верстки

Преподаватели: Игорь Борисов, Валентин Гривцов, Сергей Алмазов

Продолжительность: 47:07:20
Качество видео: PCRec

Видео: AVC/H.264, 1024×768,

120 kbps
Аудио: AAC, 2 ch, 122 kbps

Общее
Полное имя : D:[Специалист]HTML5 и CSS3 (2016)HTML и CSS. Уровень 1html-1-1.mp4
Формат : MPEG-4
Профиль формата : Base Media
Идентификатор кодека : isom (isom/iso2/avc1/mp41)
Размер файла : 431 Мбайт
Продолжительность : 4 ч. 3 м.
Режим общего битрейта : Переменный
Общий поток : 248 Кбит/сек
Программа кодирования : Lavf57.24.101

Видео
Идентификатор : 1
Формат : AVC
Формат/Информация : Advanced Video Codec
Профиль формата : High 4:4:4 Predictive@L3.1
Параметр CABAC формата : Да
Параметр ReFrames формата : 4 кадра
Идентификатор кодека : avc1
Идентификатор кодека/Информация : Advanced Video Coding
Продолжительность : 4 ч. 3 м.
Битрейт : 120 Кбит/сек
Ширина : 1024 пикселя
Высота : 768 пикселей
Соотношение сторон : 4:3
Режим частоты кадров : Постоянный
Частота кадров : 20,000 кадров/сек
Цветовое пространство : YUV
Субдискретизация насыщенности : 4:4:4
Битовая глубина : 8 бит
Тип развёртки : Прогрессивная
Бит/(Пиксели*Кадры) : 0.008
Размер потока : 209 Мбайт (49%)
Библиотека кодирования : x264 core 148 r2665 a01e339
Настройки программы : cabac=1 / ref=3 / deblock=1:0:0 / analyse=0x3:0x113 / me=hex / subme=7 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=1 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=4 / threads=6 / lookahead_threads=1 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=2 / keyint=250 / keyint_min=20 / scenecut=40 / intra_refresh=0 / rc_lookahead=40 / rc=crf / mbtree=1 / crf=23.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / ip_ratio=1.40 / aq=1:1.00
Язык : Russian

Аудио
Идентификатор : 2
Формат : AAC
Формат/Информация : Advanced Audio Codec
Профиль формата : LC
Идентификатор кодека : 40
Продолжительность : 4 ч. 3 м.
Вид битрейта : Переменный
Битрейт : 122 Кбит/сек
Максимальный битрейт : 128 Кбит/сек
Каналы : 2 канала
Channel(s)_Original : 1 канал
Расположение каналов : Front: C
Частота : 44,1 КГц
Частота кадров : 43,066 кадра/сек (1024 spf)
Метод сжатия : С потерями
Размер потока : 212 Мбайт (49%)
Язык : Russian
Default : Да
Alternate group : 1

HTML and CSS. Level 1. Creation of sites in HTML 5 and CSS 3

Планируете сделать веб-технологии своей профессией? Хотите создавать сайты? Работать верстальщиком, web-дизайнером, а может, интернет-маркетологом? У вас есть онлайн-проект, который Вы продвигаете сами? В любом случае, Вам не обойтись без знания HTMLи CSS – языков разметки веб-страниц и их внешнего оформления.

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

Во время обучения Вы получите начальные навыки работы в HTML и CSS, а также научитесь применять интерактивные возможности последних версий – HTML 5 и CSS 3.

По окончании курса Вы будете уметь:

создавать web-страницы, содержащие все необходимые компоненты: текст, изображения и гиперссылки;
определять правильную иерархию страниц для создания сайта;
использовать интерактивные элементы для улучшения его юзабилити;
применять возможности CSS для эффективного оформления сайта и совершенствования его функциональности;
работать с фреймами;
применять новый функционал HTML 5 и CSS 3.

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

А еще во время обучения Вы узнаете, что важнее – дизайн или чёткая структура? И как спроектировать сайт таким образом, чтобы он успешно продвигался в дальнейшем?

Программа курса соответствует требованиям профессионального стандарта.

HTML и CSS. Level 2. Cross-browser development, usability fundamentals, HTML5 и CSS3

HTML и CSS — основные языки, с помощью которых разрабатываются веб-страницы. Формально HTML и CSS являются разными языками, но применяются в тесной связи друг с другом и на практике составляют единый комплекс технологий. Этот учебный курс даст вам представление о современных технологиях HTML и CSS, которые совместимы со стандартами Консорциума W3C и поддерживаются в браузерах, распространённых на сегодняшний день.

Рассматриваются продвинутые технологии вёрстки веб-страниц и специальные эффекты, в том числе с использованием абсолютного и относительного позиционирования, переполнения и обрезки блоков, внедрённых объектов, изображений в CSS. Также рассматриваются вопросы профессиональной разработки кода: настройка инструментов разработки, организация технического процесса, разработка технических требований, проектирование макетов, тестирование и контроль качества веб-страниц.

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

HTML and CSS. Level 3 Advanced methodologies and tools typesetting

На данном курсе вы научитесь работать с большим объемом кода, получите необходимое представление о том, как пишется быстрый, эффективный и качественный код HTML/CSS. Узнаете о возможностях использования 3D на страницах, а также о том, как можно быстро разрабатывать HTML-код. На курсе рассматриваются следующие технологии: Bower, WebComponents, OOCSS, Yandex.БЭМ, FlexBox, 3D, Parallax, Polymer. Курс поможет научиться культуре разработки кода, а также методологии, чтобы научиться грамотно структурировать информацию и закладывать прочный фундамент для больших сайтов.

Скриншоты:

Ссылка на основную публикацию
Adblock
detector