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

Modern HTML & CSS From The Beginning
Duration 20:55:56
Открыть все курсы от udemy

Modern HTML & CSS From The Beginning - Полный список уроков

Развернуть / Свернуть
  • Урок 1. Welcome To The Course 00:05:35
  • Урок 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. What Is Sass? 00:06:20
  • Урок 108. Environment Setup With Node-Sass 00:05:42
  • Урок 109. Koala Sass Compiler - GUI Alternative 00:04:45
  • Урок 110. Variables & Partials 00:06:22
  • Урок 111. Nesting & Structuring 00:06:33
  • Урок 112. Inheritance & Contrast 00:05:10
  • Урок 113. Functions, Mixins & More 00:11:18
  • Урок 114. Project Intro 00:03:39
  • Урок 115. Project Setup 00:14:15
  • Урок 116. Header & Main Nav 00:23:01
  • Урок 117. Specialize & Stats Section 00:17:04
  • Урок 118. Process Section & Footer 00:26:08
  • Урок 119. About Page Info Section 00:13:23
  • Урок 120. About Page Logos & Testimonials 00:14:28
  • Урок 121. Work Gallery With Transitions 00:22:50
  • Урок 122. Contact Page 00:15:42
  • Урок 123. Responsive Media Queries 00:25:19
  • Урок 124. Deploy & Contact Form With Spam Filter 00:09:40
  • Урок 125. Where To Go From Here 00:02:21

Создавайте современные адаптивные веб-сайты и пользовательские интерфейсы с помощью 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 будут добавлены в ближайшее время!


Твоя оценка

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

Комментарии

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

04-04-2018 ru 26 уроков
htmlacademy Интенсивный онлайн-курс "Профессиональный HTML и CSS" - Уровень 1
В этом курсе вы найдете для себя все то, что нужно знать перед началом карьеры фронтенд разработчика. Научитесь работать с HTML и CSS так, как не умеют даже опытные фронтендеры, так как в этом курсе вы узнаете о современных практиках верстки и работы со стилями от одной из ведущих учебных платформ - html-academy.
Duration 30:59:30
164 6
21-02-2018 ru 11 уроков
htmlacademy Интенсивный онлайн-курс "Профессиональный HTML и CSS" - Уровень 2
В этом уровне вы перейдете к более сложным темам и более ответственной разработке веб-сайтов, приближенной к реалиям работы фронтенд разработчика. Новый проект «Кэт Энерджи», векторная графика, и полный переход на Flexbox уже в этом курсе. Присоединяйтесь.
Duration 23:18:03
63 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
8 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
60 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
172 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
22 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
5 0

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

Сертифицированный Microsoft Azure разработчик - экзамен AZ-203

Сертифицированный Microsoft Azure разработчик - экзамен AZ-203

en
Этот курс существует для того, чтобы вы могли приобрести навыки, необходимые для сдачи сертификационного экзамена AZ-203: Разработка решений для Microsoft Azure, который затем принесет вам сертификат Microsoft Certified Developer Associate.
Microsoft Azure Architect Technologies - Экзамен AZ-300

Microsoft Azure Architect Technologies - Экзамен AZ-300

en
Этот курс призван помочь вам освоить необходимые навыки, необходимые для сертификационного экзамена Microsoft Azure AZ-300. Экзамен AZ-300 - это экзамен на уровне экспертов, который проверяет кандидатов на продвинутые знания и опыт работы с различными аспектами Microsoft Azure.
Современный React Bootcamp (с Hooks, React Router и др.)

Современный React Bootcamp (с Hooks, React Router и др.)

en
Следуйте той же программе, которую я преподаю своим студентам в SF. 10+ проектов, включая одно ОГРОМНОЕ приложение! Добро пожаловать на лучший онлайн ресурс для изучения React! Этот курс, опубликованный в апреле 2019 года, является совершенно новым и охватывает последние новости React. Этот курс...
Профессиональный JavaScript, уровень 2 (18 февраля - 25 апреля 2019)

Профессиональный JavaScript, уровень 2 (18 февраля - 25 апреля 2019)

ru
Курс предназначен для тех, кто прошёл «Профессиональный JavaScript, уровень 1», или для разработчиков, желающих поднять свои навыки. После прохождения курса вы будете уверенно создавать современные веб-приложения, а также сможете попробовать себя в качестве наставника на наших курсах.
SymfonyCon 2018 - Лиссабонская Конференция (Видео)

SymfonyCon 2018 - Лиссабонская Конференция (Видео)

en
SymfonyCon 2018 Лиссабон имел огромный успех! Более 900 участников со всего мира собрались вместе, чтобы узнать, встретиться и поделиться своим опытом в Symfony. Более 25 докладчиков выступили по различным темам: от нового веб-сервера Symfony до Messenger, API-платформы и многого другого.
Все о загрузке файлов в Symfony

Все о загрузке файлов в Symfony

en
Нужно загрузить некоторые файлы в Symfony? Отлично! Вы пришли в нужное место! В наши дни загрузка файлов может быть простой... или невероятно сложной - с облачным хранилищем, личными файлами, миниатюрами, проверкой и так далее. Итак, давайте займемся ... всем этим!
Создание Reusable (и удивительных) Symfony пакетов

Создание Reusable (и удивительных) Symfony пакетов

en
Хотите поделиться кодом между проектами или со всем миром? Давай сделаем это! Создавая пакет Symfony! В этом руководстве мы узнаем о пакетах, их суперспособностях, о том, как добавлять сервисы и маршруты, а также о лучших практиках для создания наилучших возможных пакетов.
Формы Symfony 4: создавайте, визуализируйте и властвуйте!

Формы Symfony 4: создавайте, визуализируйте и властвуйте!

en
Да, формы! Одна из самых мощных и ... запутанных функций во всем Symfony. Вот правда: формы просто сложны. Вам нужно управлять элементами формы HTML, проверкой, преобразованием данных и многим другим. Компонент Form может быть самой сложной частью Symfony. Но чем больше с ним работаешь, тем...
chat
logo