Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 2 из 70 · 8 мин
Что установить, чтобы писать HTML: браузер с инструментами разработчика, VS Code и пара полезных расширений.
Что нужно установить?
Браузер у тебя уже есть. Поставь VS Code — бесплатный редактор кода. И выучи один фокус, который сэкономит тебе часы.
Фокус? Люблю фокусы 🎩
Пишешь короткое сокращение, жмёшь Tab — получаешь готовую разметку. Встроено в VS Code. Посмотри:
Курсор уже в первом пункте — печатай. Ввод «ul>li*3», затем клавиша Tab. Результат: <ul> <li></li> <li></li> <li></li> </ul>
`.имя` превращается в `class="имя"`. Ввод «p.price», затем клавиша Tab. Результат: <p class="price"></p>
`#имя` превращается в `id="имя"`. Ввод «section#menu», затем клавиша Tab. Результат: <section id="menu"></section>
`[атрибут=значение]` и `{текст}`. Ввод «a[href=/menu]{Меню}», затем клавиша Tab. Результат: <a href="/menu">Меню</a>
`+` ставит следующий элемент рядом, на том же уровне. Ввод «h1+p», затем клавиша Tab. Результат: <h1></h1> <p></p>
`$` превращается в номер повтора: 1, 2, 3. Ввод «ul>li.item$*3», затем клавиша Tab. Результат: <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> </ul>
Курсор уже в первом `href` — вписывай адрес. Ввод «nav>ul>li*3>a», затем клавиша Tab. Результат: <nav> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </nav>
Это и правда фокус 😮
Шпаргалка: > внутрь, + рядом, *3 повтор, . класс, # id, [] атрибуты, {} текст, $ номер.
Emmet превратил бы ul>li*3 в список. Сделай то же самое руками: меню ul из трёх товаров — блокнот, ручка и пенал.
ul — пока нетli — пока нетВыберите один ответ.
Что получится в VS Code, если в пустом .html-файле ввести ! и нажать Tab?
Выберите один ответ.
Какое расширение VS Code обновляет страницу в браузере при каждом сохранении файла?
Проверяем состояние обучения…