Поехали!
Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.
Наша академия посвящена изучению искусства по созданию веб-страниц. Веб-страницы (или HTML-страницы) — это простейшие кирпичики, из которых состоят все сайты, а значит, весь Интернет.
Для создания веб-страниц используются языки HTML и CSS. HTML отвечает за структуру и содержание страницы, CSS — за внешний вид.
Мы будем развивать ваши умения владения HTML и CSS. Начнём с простейших вещей, а затем доведём ваши навыки до совершенства с помощью сложнейших испытаний.
Перед собой вы видите учебный интерфейс. Он состоит из нескольких частей.
- Слева находятся вкладки переключения двух редакторов кода, в которых вам предстоит работать.
- Справа — мини-браузер, где отображается страница, полученная из вашего кода в редакторах.
- А в нижней части мини-браузера находятся задачи:
- Измените в 7 строке код
Заголовок
на
Поехали!
.
Когда вы выполняете задачу, она выделяется зелёным цветом. Чтобы пройти задание, нужно выполнить все задачи.
Заголовок
Язык HTML достаточно простой. Сначала может показаться, что в нём слишком много тегов. Но не волнуйтесь. Мы постепенно познакомимся с ними на практике. А на практике всё запоминается легко.
Посмотрите на нижнюю часть мини-браузера, там вы увидите окошко с задачами, которые нужно выполнить, чтобы пройти задание.
Измените строку Заголовок на Поехали! внутри h1. Если вы всё сделали правильно, то появится кнопка перехода к следующему заданию.
Спасибо! Мы скоро всё исправим)
a1ip / script.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| const submitButton = document . querySelector ( ‘.submit-button’ ) ; |
| const error = document . querySelector ( ‘.error’ ) ; |
| const reviews = document . querySelectorAll ( ‘.review’ ) ; |
| for ( let review of reviews ) |
| review . onchange = function ( ) |
| if ( review . dataset . evaluation === ‘bad’ ) |
| submitButton . disabled = true ; |
| error . classList . add ( ‘shown’ ) ; |
| > else |
| submitButton . disabled = false ; |
| error . classList . remove ( ‘shown’ ) ; |
| > ; |
| > ; |
| > ; |
| /* |
| 1. У всех радиокнопок есть класс review. |
| 2. Чтобы отслеживать переключение радиокнопок, нужно добавить обработчик событий onchange |
| каждой радиокнопке. |
| 3. У каждой радиокнопки есть атрибут data-evaluation. Если отзыв хороший, |
| значение этого атрибута – ‘good’, а если плохой — ‘bad’. |
| 4. Кнопка отправки имеет класс submit-button. Если пользователь выбрал плохой отзыв, |
| кнопку нужно заблокировать, а если хороший — разблокировать. |
| 5. Чтобы показать сигнал об ошибке, элементу с классом error нужно добавить класс shown. |
| Сигнал нужно показывать, если пользователь выбрал плохой отзыв. Если выбран хороший отзыв, |
| сигнал об ошибке нужно спрятать. |
| */ |
a1ip / script.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| let list = document . querySelector ( ‘.todo-list’ ) ; |
| let input = document . querySelector ( ‘.todo-input’ ) ; |
| let form = document . querySelector ( ‘.todo-form’ ) ; |
| let priority = document . querySelector ( ‘.todo-priority’ ) ; |
| priority . onclick = function ( ) |
| priority . classList . toggle ( ‘is-important’ ) ; |
| if ( priority . classList . contains ( ‘is-important’ ) ) |
| priority . textContent = ‘Важная задача’ ; |
| > else |
| priority . textContent = ‘Обычная задача’ ; |
| > |
| > ; |
| form . onsubmit = function ( evt ) |
| evt . preventDefault ( ) ; |
| > ; |
| form . onsubmit = function ( evt ) |
| evt . preventDefault ( ) ; |
| let task = document . createElement ( ‘li’ ) ; |
| task . textContent = input . value ; |
| if ( priority . classList . contains ( ‘is-important’ ) ) |
| task . classList . add ( ‘is-important’ ) ; |
| > else |
| task . classList . remove ( ‘is-important’ ) ; |
| > |
| list . append ( task ) ; |
| input . value = » ; |
| > ; |
| /* |
| 1. Каждая задача в списке — это элемент li. При отправке формы (переменная form) новая задача добавляется в конец списка (переменная list). |
| 2. Текст задачи берётся из поля ввода (переменная input). |
| 3. Если у переключателя приоритета (переменная priority) есть класс is-important, то новой задаче также добавляется класс is-important. |
| 4. Бонус: после того, как задача добавится в список, поле ввода можно очистить. Но можно не очищать. Подходят оба варианта. |
| */ |
Интерактивные онлайн-курсы HTML Academy
Научитесь создавать и программировать современные веб-интерфейсы, начните карьеру в IT, оттачивайте своё мастерство.
Подробнейшие тренажёры
по HTML, CSS и JavaScript
Мы выбрали одно направление — фронтенд — и сделали самые подробные тренажёры о веб-технологиях. Одну тысячу пятьсот заданий в среднем проходят за три месяца.
8 частей тренажёров — бесплатно
Сто тридцать интерактивных заданий — бесплатные. После их прохождения вы сможете создать свой сайт.
Обучение на практике
С самого начала мы учим работать с живым кодом и самостоятельно решать задачи, приближённые к реальным. Также вас ждут испытания, принцип которых — «сверстай, как показано в образце».
От новичка до профессионала
Разобравшись с тренажёрами вы сможете принять участие в профессиональных курсах. Это профессиональные программы, где под руководством личного наставника вы научитесь создавать современные сайты и веб-приложения по критериям качества, принятым в веб-индустрии.
Учиться весело
Интересные, наглядные и затягивающие курсы, интерактивные интерфейсы, достижения — всё для обучения с удовольствием. И конечно же, Инструктор Кекс. Заскучать не получится.
1 507 Заданий и испытаний
1 291 946 Пользователей
103 762 250 Заданий выполнено
Всё начинается с сущей шалости. «Я только попробую», — говоришь ты. А утром обнаруживаешь себя за компьютером и не можешь ответить, как долго просидел за ним, проходя онлайн‑курсы один за другим. Именно в этот момент всё выходит из-под контроля: базовый интенсив, продвинутый, JavaScript. И вот ты уже меняешь свою работу, жизнь и мечтаешь теперь об одном: стать ниндзя веб-разработки, в арсенале которого HTML, CSS, SVG и JavaScript. Ребятам из HTML Academy удалось невозможное: увлечь за собой многих «скучающих и сомневающихся» и занять их сложным, современным и очень классным делом. Ирина Смирнова, фронтенд-разработчик в Bookmate
Обучаясь в Академии, вы сэкономите огромное количество времени и научитесь правильно писать код, работать с реальными проектами и очень легко сможете продолжить свою карьеру фронтенд-разработчика самостоятельно. А также работа с наставником даёт большой опыт работы с кодом, потому что он всегда готов помочь в трудную минуту. Богдан Васкан, веб-разработчик в Synergic Software
Курсы Академии мне порекомендовали. Всегда скептически относился к вебинарам, но обучение в Академии изменило это представление. Учиться действительно интересно, занимательно, и, самое главное, не скучно. Интенсив Академии просто «вбивает» в голову нужные и современные навыки и знания, которые пригодятся вам в любимом деле. Павел Цыганов, преподаватель
Для меня знакомство с миром вёрстки началось с книжек и скринкастов на YouTube. Это было интересно, но непросто. И вызывало больше вопросов, чем ответов. В процессе появилось понимание, что без структуры и обратной связи от опытных практиков обучение может растянуться до бесконечности. В какой-то момент я наткнулся на сайт Академии. Это было что-то принципиально новое, интересное и увлекательное. Я стал проходить курсы по HTML и CSS. Это напоминало увлекательную игру, в которой хочется пройти на новый уровень. Сразу вспомнилась моя любимая игра World of Warcraft. Выполнил задание — получил достижение. В какой-то момент захотелось большего, и естественным продолжением стал интенсив. Месяц бессонных ночей, взорванный мозг, и вот, я смотрю на мой первый сайт. Потом на второй. И этот загадочный мир вёрстки начинает становиться понятным и уже родным. Для меня Академия стала прекрасным стартом, и я уверен, что будет отличным продолжением! Сергей Фоменко, ученик Академии
Если бы в школьную программу добавили обучение по таким интерактивным курсам, думаю, дети быстрей поняли, что им нравится, и лучше усваивали. Регулярно захожу на сайт, чтобы отдохнуть и вдобавок вспомнить, что давно не использовал в вёрстке. Советую всем тем, кто хочет держать себя в тонусе, и тем, кто учится. Поверьте такой подход обучения покажет свой результат, а если вы добавите ещё видео и книги, то пойдёт как по маслу. Поехали! Владислав Ридвановский, младший фронтенд-разработчик
HTML Academy — это новый уровень в онлайн-обучении. Я даже представить не мог, что такой уровень подачи материала может быть в онлайн. Академия учит тебя думать как профессионал, делать как профессионал. Плюс ко всему Академия — это семья и сообщество в одном лице, где каждый найдёт себе собеседника, ответ на волнующий его вопрос. Ни разу не пожалел, что год тому назад решил попробовать их курсы! Дмитрий Руднев, фронтенд-разработчик в Greensight
Обучение в HTML Academy позволяет быстро погрузиться и качественно прокачаться в сфере фронтенда. Круто стать частью огромного волшебного мира и так скоро уже оказаться одним из лучших среди новых коллег. Артемий Альтигин, системный администратор