Бесплатные курсы от школ

1. “Как стать frontend-разработчиком с нуля?” от Skillfactory

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

2. “Основы HTML и CSS” от Stepik

   Основы программирования на HTML и CSS от Тимура Гудиева на платформе Stepik. Чтобы ввести участников в кодинг, автору потребуется всего 10 видеоуроков, а для активной практики он подготовил 34 теста по каждой из тем.

3. “Введение в HTML5” от Курсера

   Курс — введение в HTML5 от Колин ван Лент и Чарльз Северанс на платформе Coursera. В этой программе при поддержке Мичиганского университета длительность в 3 недели преподаватели расскажут о базовых навыках владения языком, а по окончании всех участников ждет электронный сертификат.

4. “Создание сайта на HTML” от ItProger

   Данный курс по верстке сайта от itProger.com предлагает базовые знания сразу по четырем направлениям: HTML, CSS, JS и jQuery — с реальным продуктом по итогам обучения — собственным сайтом. Вся программа рассчитана на 11 видеоуроков и 108 практических заданий.

5. “Верстка сайта” от ItProger

6. "Курс HTML для начинающих" от PHP.ZONE

7. "Веб-разработка для начинающих: HTML и CSS" от Stepik

8. "Знакомство с HTML и CSS" от HTML академии

9. "Курс HTML / CSS" от Beonmax

10. "Уроки HTML5" от ItProger

11. "Основы HTML, CSS и веб-дизайна" от Хекслет

12. "Курс HTML и CSS - верстка сайтов для начинающих" от School PHP

13. "Уроки CSS" от ItProger

14. "Введение в веб-разработку" от Hexlet

15. "Вводный курс по HTML и CSS для начинающих" от ShowSkill

Курсы с Youtube

1. Создаем сайт на основе CSS3 + HTML5

   Краткий курс по созданию сайта на HTML5 и CSS3. За 14 видео автор канала Гоша Дударь расскажет все о верстке своего сайта, а также поделится общей информацией о профессии Frontend-разработчика

2. HTML для начинающих

   Это курс для веб-программистов, поделенный на две части. В первой части объясняет и показывает автор канала loftblog, а во второй инсайтами и важной информацией для HTML-верстальщиков поделится Анастасия Редченкова.

3. Верстка сайта #7 Создание лендинга для свадебного фотографа

   YouTube-курс "Верстка сайта" от FrontCoder. За 17 видео автор канала объяснит и покажет, как создать свой сайт на HTML и CSS всего за несколько часов на реальном примере — сайте свадебного ведущего.

4. Верстка сайтов || Лендинги, интернет-магазины, портфолио

   Курс по верстке сайтов на HTML и CSS от LectorWeb. Плейлист содержит 17 коротких YouTube-видео со всем необходимым для начинающих Frontend-разработчиков.

5. Курс HTML & CSS

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

6. HTML для начинающих

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

7. Бесплатный курс по верстке сайтов (Front End). Уроки HTML CSS JS

8. HTML 2021 - Свежий курс веб-разработки

9. ФРОНТЕНД. Введение во Frontend | Технострим от VK Team

10. Web разработка

11. Учим HTML за 1 Час! #От Профессионала

12. БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS // Фрилансер по жизни

13. Веб-разработчик 10.0

14. Web разработка

15. Front-End разработка. Курсы по HTML, CSS, JavaScript

16. Фронтенд разработка (осень 2017)

17. Web-разработка

Что можно делать с помощью HTML и CSS?

Применяя HTML и CSS в верстке и веб-программировании, разработчики могут:

• Применяя HTML и CSS в верстке и веб-программировании, разработчики могут:

• Менять стиль и дизайн веб-проектов;

• Отлаживать код

Сколько приносит верстка HTML и CSS в 2023 году?

По данным HH.ru, в феврале 2023 года средняя зарплата верстальщика на HTML и CSS составляет 46 000 рублей. Senior-программисты могут получать до 70 000 рублей, а вот Junior — примерно 35 000.

В то же время, рынок труда предлагает около 1 600 вакансий для позиции верстальщиков HTML и CSS каждый месяц.

Почему HTML?

Выступая практически универсальным решением в программировании, Java представляет собой:

• Язык с понятной структурой — у Java несложный синтаксис;

• Широкий выбор фреймворков — есть готовый набор решений для любых проектов;

• Безопасный кодинг — JVM блокирует попытки навредить коду;

• Обратно совместимый язык — все коды полностью функционируют вне зависимости от даты написания.

Почему HTML и CSS?

HTML и CSS — наиболее популярные языки во всех формах веб-программирования. Так, они:

• Экономно расходуют ресурсы сервера сайта — из-за своей структуры код занимает мало места в системе;

• Упрощают разработку сайтов — один файл стилей можно применить сразу на все страницы;

• Ускоряют загрузку сайта — браузер кеширует стили, а далее загружает только данные;

• Совмещают любые устройства — если они имеют доступ к редакторам HTML- и CSS-файлов.

Details

<details> - создает интерактивный элемент при нажатии на который пользователю будет показана дополнительная информация. Обычно используется в паре с тегом <summary>. Этот элемент практически не используется так как является стандартным и тяжел для стилизации через CSS. Обычно если нужен элемент с подобным функционалом его создают из базовых тегов используя HTML + CSS + JavaScript.

<details> 
<summary>Описание</summary> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
</details>

Имеет атрибут open при наличии которого браузер сразу будет показывать скрытый контент

<details open>
<summary>Описание</summary>
<p>content</p>
</details>

Как вы могли заметить текст из тега <summary> стал заголовком <details>

Dialog

<dialog> - создает интерактивный элемент при нажатии на который пользователю будет показано всплывающее окно с контентом. Этот элемент практически не используется так как является стандартным и тяжел для стилизации через CSS.

Обычно если нужен элемент с подобным функционалом его создают из базовых тегов используя HTML + CSS + JavaScript.

В данном случае мы ничего не увидим так как по-умолчанию диалог скрыт

<dialog>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consequatur cupiditate eos, excepturi inventore iste libero perferendis quibusdam reiciendis soluta vel veritatis voluptate voluptates! Blanditiis laborum quos repellat vero voluptatem?
</dialog>

Для того, чтобы открыть диалог, нам нужно добавить ему атрибут open

<dialog id="favDialog" open>  dialog content  </dialog>

Menu

Тег <menu> является семантической заменой тега <ul>, на данный момент тег <menu> является экспериментальной технологией и его лучше не использовать, так как не все браузеры его могут поддерживать.

<menu type="context" id="popup-menu">
<menuitem>Action</menuitem>
<menuitem>Another action</menuitem>
<hr/>
<menuitem>Separated action</menuitem>
</menu>

<menu type="toolbar">
<li>
<button type="menu" menu="file-menu">File</button>
<menu type="context" id="file-menu">
<menuitem label="New..." onclick="newFile()"></menuitem>
<menuitem label="Save..." onclick="saveFile()"></menuitem>
</menu>
</li>

<li>
<button type="menu" menu="edit-menu">Edit</button>
<menu type="context" id="edit-menu">
<menuitem label="Cut..." onclick="cutEdit()"></menuitem>
<menuitem label="Copy..." onclick="copyEdit()"></menuitem>
<menuitem label="Paste..." onclick="pasteEdit()"></menuitem>
</menu>
</li>
</menu>

В спецификации HTML4 <menu> работал по другом, но с выходом стандарта HTML5 логика тега <menu> была изменена, но на данный момент его практически не поддерживают никакие браузеры.

Более подробная информация о данных тегах рассказана в видео

Файлы с урока

Мой Телеграм канал