Яндекс.Практикум: «HTML, CSS, JavaScript: бесплатный вводный курс» — Тема 1




Приветствую, посетителей ресурса PribylvSeti. Давно ничего не выкладывал, но вот решил-таки обновить блог. Решился пройти «HTML, CSS, JavaScript: бесплатный вводный курс» для веб-разработчиков в сервисе Яндекс.Практикум; просто увидел объявление на странице поиска и решил попробовать. Конечно же, обладаю базовыми знаниями перечисленных HTML плюс CSS (столько лет веду сайты), умею «ковыряться» в коде (спокойно корректировал шаблоны под себя), однако хотелось постигнуть азы программирования, например популярного языка JS, освежить и пополнить полученные ранее знания.

Как сообщает автор, после прохождения курса пользователь освоит HTML-разметку, научится работать с CSS-стилями (например: цвет, размер шрифта), компоновать элементы (блоки) страницы и на примере двух проектов изучит минимально необходимое количество тэгов и стилей.

Итак, описать весь цикл, состоящий из 7-ми тем (в каждой 5-20 уроков) общей продолжительностью 20 часов в одной статье проблематично, таким образом, он будет разбит на соотвествующее количество частей, посему блог придётся периодически обновлять. Постараюсь описать важные моменты, ощущения от подачи и нового опыта. На самом деле интриговала возможность пройти обучающий курс так сказать прямо в браузере и посмотреть как это реализовано в Яндекс.Практикум. Сегодня познакомимся с интерфейсом и выполним вводные первые 5 уроков.

Тема 1: Первый код

Начало, как и положено весьма романтичное, пользователя вводят в основные категории и предлагают выполнить несколько простых интуитивно понятных заданий в специальном конструкторе. Отмечу, что здесь всё будет предельно интуитивно понятно.

HTML, CSS, JavaScript: бесплатный вводный курс

Примечательно, что дебют от Яндекс.Практикум несколько отличается от классического варианта, представленного в других курсах. Например, пока не изучите тэги и стили, вы никуда не сможете двинуться и вообще ничего не поймёте.

Тут как бы всё играючи немного по-детски, с забавными картинками и шутками, однако кажется, что такой подход формирует правильные представления; у ученика не возникает ощущение чего-то реально непонятного и страха постигать новые термины.

Меню ↑

Что делают разработчики

Кликнув по кнопке «Учиться» ученика перенесёт на страничку, на которой будет происходить своеобразный диалог пользователя и практикумом. Введение повествует о том, откуда берутся сайты в интернете. Собеседник поведает, что сайты состоят из HTML-кода, распознаваемого браузерами, который пишут веб-разработчики, используя в основном языки: HTML, CSS и JavaScript.

Следующим моментом станет демонстрация возможностей редактора, в котором и придётся выполнять уроки.

Функционал (стр. 1):

  • Задание — описание квеста.
  • Окно результата — здесь виден результат (такой же как в браузере).
  • Теория — забыли теорию, освежите не выходя из редактора.
  • Проверить ответ — обязательная проверка, чтобы пройти в следующий урок.

Функционал (стр. 2):

  • Навигация — удобный доступ ко всем доступным курсам и отдельным урокам.
  • Подсказка — смело кликайте сюда, если сходу не можите решить задание или испытываете затруднение в кодинге.
  • Раскрыть на весь экран — без комментариев; открывает полученный результат на всю ширину вкладки браузера.
  • Начать заново — сбрасывает изменённый код до состояния по умолчанию.
  • Чат поддержки — если вообще ничего не понятно, задавайте вопросы в поддержку.

После знакомства с редактором и базовыми понятиями, переходим к практике в предстоящем уроке.

Меню ↑

Базовые элементы. HTML

В описании рассказывается о файле index.html, содержащий различные элементы (видео, картинки, текст) код к которому создаётся на языке HTML. Любая веб-страница открытая в браузере в первую очередь загружает HTML-код. То есть если код отсутствует или написан с ошибками пользователь, либо ничего не увидит вообще или получит на экране какие-то кракозябры.

Чтобы разобраться, как выглядит язык HTML в жизни, приводится пример с кнопкой <button>Кнопка с надписью</button>, здесь начинающий узнаёт о существовании тэгов, описывающих элементы сайта, для каждого свои, например, для текста (<p>бла-бла-бла</p>). Из представленного примера с кнопкой открывающий тэг <button>сообщает браузеру, что перед ним начало той самой кнопки, а тэг</button> — кнопка «закрылась».

В общем с этого момента начинается самое интересное — кодинг.

Задание: «В начале было Слово». Потом HTML-код.

Описание: Перед нами загруженный файл index.html с одним элементом в виде кнопки Like.

Решение: Измените «Like» на «Нравится».

После успешной проверки переходим к следующему уроку.

Меню ↑

Мысли о стилях. CSS

Если HTML-файл отвечает за вывод элементов, то отдельный CSS-файл (style.css) за то, как они будут выглядеть и как располагаться относительно друг друга. Для наглядности даётся пример из которого ясно, что тэгу button (кнопке) задаётся синий фон с белым шрифтом.

button {
  background-color: blue;
  color: white;
}
Задание: Если бы песню «Оранжевое небо» сочинили на веб-факультете, она бы называлась иначе.

Описание: Перед нами кнопка оранжевого цвета с белым шрифтом, выглядящая слишком броско. Сделайте кнопку чёрной, оставив текущий цвет шрифта.

Код:

button {
  background-color: orange;
  color: white;
}
Решение: В строке background-color файла style.css меняем orange на black.

Обратите внимание, что в редакторе появилось два файла, один отвечающий за содержимое второй за стили. В качестве дополнительного задания, кликните по вкладке index.html и посмотрите, как на самом деле выглядит, наверное самый простой правильный код HTML-файл.

Меню ↑

Сценарное мастерство. JavaScript

В прошлых занятиях мы создали кнопку и задали ей соответствующие стили, однако она совершенно не функционирует. Как же оживить её? Для этих целей существует язык JavaScript, код которого называют «скрипт», «сценарий» в переводе. То есть имеется возможность написать в некий сценарий уже в файле script.js для определённых элементов страницы, выполнение которого возложено на браузер. К слову практически все динамичные эффекты на сайтах — JavaScript (как правила код содержит комментарии).

Задание: Теперь кнопка нажимается по-настоящему. Убедитесь сами!.

Описание: в отдельном файле script.js выложен сценарий, управляющий поведением кнопки. После клика по кнопке скрипт изменит её цвет.

Код:

// при клике по кнопке скрипт запустит код
button.onclick = function () {
  // если фон кнопки чёрный
  if (button.style.backgroundColor == 'black') {
    // изменим его на белый, а текст сделаем чёрным
    button.style.backgroundColor = 'white';
    button.style.color = 'black';
  } else {
    // иначе сделаем фон чёрным, а текст белым
    button.style.backgroundColor = 'black';
    button.style.color = 'white';
  }
}

Решение:
1. Копируем строки 6-7:

button.style.backgroundColor = 'white';
button.style.color = 'black';

2. Вставляем в строки 10-11 и меняем white на black:

button.style.backgroundColor = 'black';
button.style.color = 'white';

Ниже обратите внимание как подключаются стили и скрипты в HTML-файле.

<!-- подключение файла стилей -->
<link rel="stylesheet" href="style.css"/>
<!-- подключение скрипта -->
<script src="script.js"></script>

Меню ↑

Трюки и финты

Пришло время заключительного урока первой темы курса, где будут продемонстрированы возможности JavaScript-библиотеки заточенной под рисование.

Задание: иногда человек и программирование нравятся друг другу.

Описание:

Код:

// при клике по кнопке скрипт запустит код
button.onclick = function () {
  // если фон кнопки чёрный
  if (button.style.backgroundColor == 'black') {
    // изменим его на белый, а текст сделаем чёрным
    button.style.backgroundColor = 'white';
    button.style.color = 'black';
  } else {
    // иначе сделаем фон чёрным, а текст белым
    button.style.backgroundColor = 'black';
    button.style.color = 'white';
  }
}
Решение: поразвлекайте немного и кликайте проверить.

Теперь поделитесь с друзьями своими результатами в социальных сетях.

Меню ↑

Получилось

Всё! Базовые уроки в тренажёре пройдены! По идее у начинающего веб-разработчика уже должен сформироваться образ об устройстве веб-страницы, а также о кодинге позволяющего их создавать и настраивать под свои конкретные нужды. Упражнение с кнопкой дают реально понять, что собой представляют HTML, CSS и JavaScript. Предстоящая Тема 2: «Нужен плейлист», состоящая из 20 уроков, заложит базовые концепции HTML и CSS.

Успехов Вам!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *