Современный HTML и CSS с самого начала - Видеоуроки

Modern HTML & CSS From The Beginning
Duration 17:03:44
Открыть все курсы от udemy
Облачный хостинг на SSD с лучшей техподдержкой! Развернуть приложение в один клик

Создавайте современные адаптивные веб-сайты и пользовательские интерфейсы с помощью HTML5 и CSS3, включая Flexbox и CSS Grid. Этот курс предназначен как для начинающих, так и для опытных разработчиков, которые хотят научиться создавать адаптивные веб-сайты и пользовательские интерфейсы с использованием современных технологий HTML5 и CSS3 +, таких как Flexbox и CSS Grid. Этот курс включает в себя часы как обучения, так и изучения, а также проекты из реальной жизни. Перестаньте полагаться на фреймворки, такие как Bootstrap, для своего пользовательского интерфейса и узнайте, как создавать собственные макеты и служебные классы для создания настраиваемых адаптивных веб-сайтов и пользовательских интерфейсов приложений.

Первые несколько разделов предназначены для начинающих, поэтому, даже если вы никогда ничего раньше не создавали, вы изучите все основы. Если у вас уже есть опыт работы с базовыми HTML и CSS, просто перейдите к разделу 3 или 4 и начните.

Вещи, которые мы покрываем

  • Как работают сайты
  • Настройка Visual Studio code, ярлыки, Live Server и Emmet
  • HTML5 Semantic Layout
  • Основы CSS
  • Адаптивный дизайн с медиа-запросами
  • CSS-единицы - rem, em, vh, vw...
  • Flexbox
  • CSS Grid
  • Анимация с ключевыми кадрами и переходами
  • Переменные CSS
  • Полные проекты и мини-проекты
  • Развертывание веб-сайта на общий хостинг и Netlify с Git
  • и намного больше

Разделы о Sass будут добавлены в ближайшее время!


Полный список уроков Развернуть / Свернуть
  • Урок 1. Welcome To The Course 00:04:58
  • Урок 2. How The Web Works (Summarized) 00:07:39
  • Урок 3. The Roles Of HTML & CSS In Web Development 00:06:35
  • Урок 4. Getting Setup With Visual Studio Code 00:07:13
  • Урок 5. Section Intro 00:02:30
  • Урок 6. Create & Open HTML Pages 00:08:47
  • Урок 7. Doctype & Basic Layout 00:07:48
  • Урок 8. Setting Up Live Server (VSCode Extension) 00:04:34
  • Урок 9. Meta Tags & Search Engines 00:09:10
  • Урок 10. Headings, Paragraphs & Typography 00:09:43
  • Урок 11. Links, Images & Attributes 00:10:26
  • Урок 12. Lists & Tables 00:08:47
  • Урок 13. Forms & Input 00:17:25
  • Урок 14. Block & Inline Level Elements 00:05:51
  • Урок 15. Divs & Spans, Classes & Ids 00:09:59
  • Урок 16. HTML Entities 00:07:56
  • Урок 17. HTML5 Semantic Tags & Challenge 00:05:36
  • Урок 18. HTML5 Semantics Solution & Wrap Up 00:03:38
  • Урок 19. Section Intro 00:03:04
  • Урок 20. Implementing CSS 00:08:48
  • Урок 21. Basic CSS Selectors 00:10:25
  • Урок 22. Dev Tools Introduction 00:05:40
  • Урок 23. Fonts In CSS 00:12:12
  • Урок 24. Color Types 00:08:46
  • Урок 25. Backgrounds & Borders 00:16:40
  • Урок 26. Box Model, Margin & Padding 00:15:04
  • Урок 27. Float & Alignment 00:13:16
  • Урок 28. Link State & Button Styling 00:09:20
  • Урок 29. Navigation Menu Styling 00:11:11
  • Урок 30. Inline, Block & Inline-Block Display 00:08:15
  • Урок 31. Positioning 00:10:33
  • Урок 32. Form Style Challenge 00:04:56
  • Урок 33. Form Style Solution 00:09:12
  • Урок 34. Aside: Visibility, Order & Negative Margin 00:05:44
  • Урок 35. Project Intro 00:04:07
  • Урок 36. Aside: Design & Ideas 00:03:40
  • Урок 37. File Structure & Navbar 00:21:02
  • Урок 38. Showcase & Home Info 00:22:25
  • Урок 39. Features & Footer 00:12:15
  • Урок 40. About Page 00:20:04
  • Урок 41. Contact Page 00:11:55
  • Урок 42. What Is Responsive Design? 00:03:24
  • Урок 43. Getting Started With Media Queries 00:15:07
  • Урок 44. Em & Rem Units 00:15:40
  • Урок 45. Vh & Vw Units 00:14:45
  • Урок 46. Making The Hotel Website Fully Responsive 00:19:10
  • Урок 47. What Is Flexbox? 00:03:10
  • Урок 48. Flex Basics 00:09:11
  • Урок 49. Flex Alignment & Order 00:11:52
  • Урок 50. Project Intro 00:03:19
  • Урок 51. File Structure & Flex Navbar 00:16:38
  • Урок 52. Showcase Header 00:13:41
  • Урок 53. What We Do Section 00:11:22
  • Урок 54. Who We Are & Clients Sections 00:14:19
  • Урок 55. Contact Form, Map & Footer 00:18:07
  • Урок 56. Smooth Scrolling With JS 00:11:34
  • Урок 57. Widescreen & Tablet View 00:06:46
  • Урок 58. Smartphone View 00:14:09
  • Урок 59. Types Of Web Hosting 00:08:00
  • Урок 60. Shared Hosting Setup 00:09:52
  • Урок 61. Setting Up Email 00:04:46
  • Урок 62. Upload Your Site via FTP 00:05:37
  • Урок 63. BONUS: Contact Form Submission (PHP Script) 00:06:14
  • Урок 64. Targeted Selectors 00:09:39
  • Урок 65. nth-child Pseudo Selectors 00:06:53
  • Урок 66. before & after Pseudo Selectors 00:10:52
  • Урок 67. Box Shadows 00:08:20
  • Урок 68. Text Shadows 00:05:36
  • Урок 69. CSS Variables (Custom Properties) 00:10:50
  • Урок 70. Keyframe Animation 1 00:10:45
  • Урок 71. Keyframe Animation 2 00:07:16
  • Урок 72. CSS Transitions 00:07:52
  • Урок 73. Transform Property 00:07:18
  • Урок 74. Presentation Website [1] - Intro & HTML 00:07:34
  • Урок 75. Presentation Website [2] - Page CSS 00:09:04
  • Урок 76. Presentation Website [3] - Text Animation 00:08:39
  • Урок 77. Hamburger Menu Overlay [1] - HTML & Base CSS 00:20:19
  • Урок 78. Hamburger Menu Overlay [2] - Creating The Hamburger 00:11:38
  • Урок 79. Hamburger Menu Overlay [3] - Animating The Hamburger Lines 00:04:43
  • Урок 80. Hamburger Menu Overlay [4] - Menu Overlay 00:15:01
  • Урок 81. Knowledge Timeline [1] - HTML & Base CSS 00:07:55
  • Урок 82. Knowledge Timeline [2] - Boxes & Arrows 00:14:33
  • Урок 83. Knowledge Timeline [3] - Responsive Media Queries 00:05:52
  • Урок 84. Knowledge Timeline [4] - Scroll In Animation 00:09:46
  • Урок 85. Quick Dropdown Menu Project 00:18:44
  • Урок 86. What Is CSS Grid? 00:04:05
  • Урок 87. Grid Basics & Columns 00:09:27
  • Урок 88. Grid Rows 00:04:00
  • Урок 89. Spanning Columns & Rows 00:06:48
  • Урок 90. Auto-Fit & Minmax 00:03:40
  • Урок 91. Grid Template Areas 00:07:19
  • Урок 92. Media Queries & The Grid 00:05:04
  • Урок 93. Project Intro 00:03:15
  • Урок 94. Setup & Favicon 00:07:14
  • Урок 95. Core Styles, Variables & Navbar 00:13:24
  • Урок 96. Showcase With Overlay & Button Styles 00:13:25
  • Урок 97. Home Articles Grid 00:17:58
  • Урок 98. Footer With Grid 00:11:56
  • Урок 99. About Page & Page Container 00:08:17
  • Урок 100. Article Page 00:09:02
  • Урок 101. Responsive Media Queries 00:18:20
  • Урок 102. Bonus: Intro To Photoshop (NewsGrid Logo) 00:12:01
  • Урок 103. How It Works 00:03:00
  • Урок 104. Git & Pushing To Github 00:07:08
  • Урок 105. Netlify Deploy & Form Submission 00:06:51
  • Урок 106. Custom Domain Name 00:06:04
  • Урок 107. Where To Go From Here 00:02:25
Этот курс находится в платной подписке!

И будет доступен в бесплатном просмотре 21.02.2019. Если у тебя еще нет у нас аккаунта - зарегистрируйся и оформи премиум подписку в своем личном кабинете, и смотри этот, а также многие другие курсы, прямо сейчас.

Следи за последними обновлениями и новостями в нашем coursehunter-club.net (Ex coursehunters.club), или вступай в наш канал telegram.

Комментарии

Похожие курсы

04-04-2018 ru 26 уроков
htmlacademy Интенсивный онлайн-курс "Профессиональный HTML и CSS" - Уровень 1
В этом курсе вы найдете для себя все то, что нужно знать перед началом карьеры фронтенд разработчика. Научитесь работать с HTML и CSS так, как не умеют даже опытные фронтендеры, так как в этом курсе вы узнаете о современных практиках верстки и работы со стилями от одной из ведущих учебных платформ - html-academy.
Duration 30:59:30
151 6
21-02-2018 ru 11 уроков
htmlacademy Интенсивный онлайн-курс "Профессиональный HTML и CSS" - Уровень 2
В этом уровне вы перейдете к более сложным темам и более ответственной разработке веб-сайтов, приближенной к реалиям работы фронтенд разработчика. Новый проект «Кэт Энерджи», векторная графика, и полный переход на Flexbox уже в этом курсе. Присоединяйтесь.
Duration 23:18:03
58 1
05-12-2018 en 123 урока
udemy Web Components & Stencil.js - Build Custom HTML Elements
Полное введение в создание пользовательских HTML-элементов / веб-компонентов с StencilJS и даже без него. Посмотрим правде в глаза: у вас есть тысячи HTML-тегов, но некоторые полезные (<tabs>, <side-drawer>, <modal>, ...) отсутствуют.  Что, если вы можете создавать собственные HTML-теги. Без таких фреймворков, как Angular, библиотеки React или знания JavaScript в целом. Просто с волшебной функцией native-JavaScript,...
Duration 08:19:40
7 0
30-11--0001 en 265 уроков
udemy CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
Изучите CSS в первый раз или поднимите свои навыки CSS и погрузитесь еще глубже. КАЖДЫЙ веб-разработчик должен знать CSS.CSS - сокращение от Cascading Style Sheets - это «язык программирования», который вы используете, чтобы превратить ваши необработанные HTML-страницы в настоящие красивые веб-сайты.Этот курс охватывает все это - мы начинаем с самых основ (что такое CSS?) Как это работает? Как вы его используете? и постепенно...
Duration 20:46:03
50 0
15-12-2017 en 124 урока
udemy Advanced CSS and Sass: Take Your CSS to the Next Level!
Самый продвинутый и современный курс CSS в Интернете: анимация, flexbox, отзывчивый дизайн и многое другое.  Вы какое-то время писали CSS, но хотите перенести свою игру на следующий уровень? Чувствуете ли вы путаницу с CSS-жаргоном, как наследование, специфика или каскад? Что если бы был один ресурс, одно место, где вы могли бы изучить все современные методы и свойства CSS, о которых вы читали? Хорошая новость: вот он! Добро пожаловать в...
Duration 28:06:58
156 4
30-11--0001 en 17 уроков
leveluptutorials Modern CSS Layouts
В этой серии уроков «Современные CSS Сетки» мы покроем тему современных CSS Layouts. Мы будем строить сетки таких сайтов как Facebook, Instagram и моего персонального сайта (leveluptutorials.com) используя разные техники - от flexbox до CSS-Grid. Мы рассмотрим все самое свежое и самое лучшее что есть сейчас в CSS.
Duration 03:34:32
21 0
21-11-2018 en 66 уроков
udemy Build Responsive Real World Websites with HTML5 and CSS3
Самый простой способ шаг за шагом освоить современный веб-дизайн, HTML5 и CSS3.  # 1 HTML5 и CSS3 курс в официальном рейтинге Udemy!
Duration 11:52:45
1 0

Последнее добавленное

Полный курс по программированию на Python для начинающих

Полный курс по программированию на Python для начинающих

en
Изучите Python для AI, машинного обучения, науки о данных и разработки приложений. Математики, ученые и инженеры любят Python. Почему? Потому что он делает сложные вычисления и повторяющиеся задачи действительно простыми для написания и выполнения. Разработчики любят его, потому что он простой...
Python для анализа данных

Python для анализа данных

ru
«Данные — это новая нефть». Они помогают усовершенствовать продукт, привлечь новых пользователей и являются драйвером роста любой компании. Компании во всем мире используют Python для сбора и анализа данных. В Uber, Yandex и Facebook, знание Python является обязательным требованием при приеме...
Flutter и Dart: полноценное мобильное приложение™

Flutter и Dart: полноценное мобильное приложение™

en
Изучение того, как создавать приложения для iOS и Android, с полным демонстрационным примером на основе Dart и Flutter Framework. Flutter - это SDK для мобильных приложений, предназначенный для создания высококачественных собственных интерфейсов на iOS и Android в рекордно короткие сроки. Flutter ра
Flutter: кроссплатформенное приложение iOS / Android

Flutter: кроссплатформенное приложение iOS / Android

en
Создавайте кроссплатформенные красивые нативные приложения в рекордно короткие сроки. Flutter - это SDK для мобильных приложений, в комплекте с фреймворком, виджетами и инструментами, который предоставляет разработчикам простой и продуктивный способ создания и развертывания красивых мобильных...
Программирование на Dart от новичка до эксперта

Программирование на Dart от новичка до эксперта

en
Изучите Dart с уровня Beginner и станьте экспертом, который может начать изучать Flutter, AngularDart и многое другое. В этом курсе вы узнаете все, что вам нужно знать о Dart. Dart - это язык, который становится популярным день ото дня, и разработчики по всему миру стремятся к этому языку...
Понятный JavaScript (Middle)

Понятный JavaScript (Middle)

ru
Хочешь стать JavaScript разработчиком, систематизировать знания и выйти на совершенно новый уровень! Курс «Понятный JavaScript» — это комплексная программа обучения, которая позволит тебе полностью изучить с нуля главный язык Frontend разработчика. Уже через 3 месяца ты будешь знать JavaScript...
chat
logo