HTML/CSS - Гостевой режим

1

Базовый HTML синтаксис

Основные HTML теги и структура документа

1

Практика: базовая структура 2

2

HTML текст и списки

Текстовые теги и списки

1

<strong></strong>

2

<em></em>

3

<u></u>

4

<s></s>

5

<code></code>

6

<pre></pre>

7

<blockquote></blockquote>

8

<a href="url">link</a>

9

<a href="#id">anchor</a>

10

<ul><li></li></ul>

11

<ol><li></li></ol>

12

<dl><dt></dt><dd></dd></dl>

13

Практика: текст 1

14

Практика: текст 2

15

Практика: текст 3

3

HTML изображения и медиа

Изображения, видео, аудио

1

<img src="image.jpg" alt="text">

2

<img src="img.jpg" width="100" height="100">

3

<video src="video.mp4" controls></video>

4

<audio src="audio.mp3" controls></audio>

5

<iframe src="url"></iframe>

6

<picture><source><img></picture>

7

Практика: медиа 1

8

Практика: медиа 2

9

Практика: медиа 3

4

HTML таблицы

Создание и форматирование таблиц

1

<table><tr><td></td></tr></table>

2

<table><thead><tr><th></th></tr></thead></table>

3

<table><tbody><tr><td></td></tr></tbody></table>

4

<table><tfoot><tr><td></td></tr></tfoot></table>

5

<td colspan="2">

6

<td rowspan="2">

7

Практика: таблицы 1

8

Практика: таблицы 2

5

HTML формы

Элементы форм и их атрибуты

1

<form action="url" method="post"></form>

2

<input type="text" name="field">

3

<input type="email" name="email">

4

<input type="password" name="pass">

5

<input type="number" name="num">

6

<input type="checkbox" name="check">

7

<input type="radio" name="radio">

8

<input type="submit" value="Send">

9

<input type="button" value="Click">

10

<textarea name="text"></textarea>

11

<select name="select"><option>Option</option></select>

12

<label for="id">Label</label>

13

<fieldset><legend>Title</legend></fieldset>

14

<input type="date" name="date">

15

<input type="file" name="file">

16

<input type="hidden" name="token" value="value">

17

Практика: формы 1

18

Практика: формы 2

6

HTML семантика

Семантические HTML5 теги

1

<header></header>

2

<nav></nav>

3

<main></main>

4

<article></article>

5

<section></section>

6

<aside></aside>

7

<footer></footer>

8

<figure><figcaption></figcaption></figure>

9

<time datetime="2024-01-01">Date</time>

10

<mark></mark>

11

Практика: семантика 1

12

Практика: семантика 2

7

CSS базовый синтаксис

Подключение CSS и базовые селекторы

1

<style>body { }</style>

2

<link rel="stylesheet" href="style.css">

3

element { property: value; }

4

.class { color: red; }

5

#id { color: blue; }

6

* { margin: 0; }

7

element.class { }

8

element, element { }

9

Практика: CSS базовый 1

10

Практика: CSS базовый 2

11

Практика: CSS базовый 3

8

CSS селекторы

Комбинаторы и псевдоклассы

1

div p { }

2

div > p { }

3

div + p { }

4

div ~ p { }

5

[attribute] { }

6

[attribute="value"] { }

7

[attribute^="value"] { }

8

[attribute$="value"] { }

9

[attribute*="value"] { }

10

:hover { }

11

:focus { }

12

:first-child { }

13

:last-child { }

14

:nth-child(2) { }

15

Практика: селекторы 1

9

CSS свойства текста

Стилизация текста

1

color: red;

2

font-size: 16px;

3

font-weight: bold;

4

font-family: Arial, sans-serif;

5

text-align: center;

6

text-decoration: underline;

7

line-height: 1.5;

8

letter-spacing: 2px;

9

text-transform: uppercase;

10

Практика: текст 1

11

Практика: текст 2

10

CSS свойства блоков

Размеры, отступы, рамки, фон

1

width: 100px;

2

height: 100px;

3

margin: 10px;

4

padding: 10px;

5

border: 1px solid black;

6

border-radius: 5px;

7

background: #fff;

8

background-color: red;

9

background-image: url("img.jpg");

10

display: block;

11

display: inline;

12

display: inline-block;

13

display: none;

14

Практика: блоки 1

15

Практика: блоки 2

11

CSS Flexbox

Flexbox layout и выравнивание

1

display: flex;

2

flex-direction: row;

3

flex-direction: column;

4

justify-content: center;

5

align-items: center;

6

flex-wrap: wrap;

7

flex: 1;

8

gap: 10px;

9

Практика: flexbox 1

10

Практика: flexbox 2

11

Практика: flexbox 3

12

CSS Grid

Grid layout и позиционирование

1

display: grid;

2

grid-template-columns: 1fr 1fr 1fr;

3

grid-template-rows: 100px 200px;

4

grid-gap: 10px;

5

grid-column: 1 / 3;

6

grid-row: 1 / 2;

7

grid-area: header;

8

Практика: grid 1

9

Практика: grid 2

13

CSS позиционирование

Position и z-index

1

position: static;

2

position: relative;

3

position: absolute;

4

position: fixed;

5

position: sticky;

6

top: 10px;

7

left: 10px;

8

z-index: 10;

9

Практика: позиционирование 1

10

Практика: позиционирование 2

14

CSS анимации и переходы

Transitions, transforms, animations

1

transition: all 0.3s;

2

transition: color 0.3s ease;

3

transform: translateX(10px);

4

transform: scale(1.2);

5

transform: rotate(45deg);

6

@keyframes name { from { } to { } }

7

animation: name 1s infinite;

8

Практика: анимации 1

9

Практика: анимации 2

15

Практические примеры

Реальные комбинации HTML и CSS

1

Карточка товара

2

Навигационное меню

3

Форма входа

4

Модальное окно

5

Адаптивная сетка

6

Кнопка с hover

7

Практика: комбинации 1

8

Практика: комбинации 2

9

Практика: комбинации 3

10

Практика: комбинации 4

11

Практика: комбинации 5

12

Клавиатурный тренажёр: HTML/CSS

Базовый HTML синтаксис

<html></html>

<head></head>

<body></body>

<title></title>

<meta charset="utf-8">

<div></div>

<span></span>

<p></p>

<h1></h1>

<h2></h2>

<br>

<hr>

Практика: базовая структура 1

Практика: базовая структура 2

HTML текст и списки

<strong></strong>

<em></em>

<u></u>

<s></s>

<code></code>

<pre></pre>

<blockquote></blockquote>

<a href="url">link</a>

<a href="#id">anchor</a>

<ul><li></li></ul>

<ol><li></li></ol>

<dl><dt></dt><dd></dd></dl>

Практика: текст 1

Практика: текст 2

Практика: текст 3

HTML изображения и медиа

<img src="image.jpg" alt="text">

<img src="img.jpg" width="100" height="100">

<video src="video.mp4" controls></video>

<audio src="audio.mp3" controls></audio>

<iframe src="url"></iframe>

<picture><source><img></picture>

Практика: медиа 1

Практика: медиа 2

Практика: медиа 3

HTML таблицы

<table><tr><td></td></tr></table>

<table><thead><tr><th></th></tr></thead></table>

<table><tbody><tr><td></td></tr></tbody></table>

<table><tfoot><tr><td></td></tr></tfoot></table>

<td colspan="2">

<td rowspan="2">

Практика: таблицы 1

Практика: таблицы 2

HTML формы

<form action="url" method="post"></form>

<input type="text" name="field">

<input type="email" name="email">

<input type="password" name="pass">

<input type="number" name="num">

<input type="checkbox" name="check">

<input type="radio" name="radio">

<input type="submit" value="Send">

<input type="button" value="Click">

<textarea name="text"></textarea>

<select name="select"><option>Option</option></select>

<label for="id">Label</label>

<fieldset><legend>Title</legend></fieldset>

<input type="date" name="date">

<input type="file" name="file">

<input type="hidden" name="token" value="value">

Практика: формы 1

Практика: формы 2

HTML семантика

<header></header>

<nav></nav>

<main></main>

<article></article>

<section></section>

<aside></aside>

<footer></footer>

<figure><figcaption></figcaption></figure>