Привет! Настало время написать свой первый код! Для этого ты можешь использовать онлайн редактор для фронтендеров - CodePen.io. Это “песочница” в которой ты можешь экспериментировать с HTML, CSS и JS!

Перед тобой окно с редактором кода от CodePen.io. И в нём уже создана кнопка с текстом "Go", но наш сайт для рускоязычной аудитории и тебе нужно перевести текст на кнопке. Замени текст "Go" на русский аналог этого слова - "Поехали!"(привет от Юры!🚀) и посмотри результат!

See the Pen Lesson 1 by Klava Web (@KlavaWeb) on CodePen.

👍Отлично! У тебя всё получилось! Поехали дальше!

Ниже, в редакторе таже кнопка, но с добавлеными к ней "красивостями". Стили кнопки описываются в файле "style.css". В окне результата справа видно, что сейчас кнопка серая. Как-то это слишком печально. Исправь стили во вкладке CSS так, чтобы кнопка стала красной. Цвет текста менять не будем, пусть будет белым.

See the Pen Lesson 1 by Klava Web (@KlavaWeb) on CodePen.

👍Супер! Теперь ты можешь жмакать по красной кнопке!🔴

Но при нажатии на кнопку ничего не происходит. Для исправления этой ситуации тебе нужен скрип на языке JavaScript(JS), его пишут в отдельном файле. Обычно этот файл называется "script.js", помимо кода программисты оставляют клментарии для того что-бы в дальнейшем самим вспомнить для чего написан тот или иной код, а так же коментарии помогают сторонним разработчикам быстрей понять задумку автора.

В "script.js" описан сценарий, который будет взаимодействовать со свойствами кнопки. После нажатия скрипт изменит цвет текста и фона кнопки. Попробуй прямо сейчас и убедись в этом!

Проблема в том что код намписан не совсем правильно и если повторно нажать на кнопку, то ничего не произойдёт. Попробуй исправить код! Тебе нужно поменять "white" на "red" и "black" на "white" в блоке "else" во вкладке JS

See the Pen Lesson 3 by Klava Web (@KlavaWeb) on CodePen.

Огонь!🔥 У тебя получилось!🥇