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

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

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

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

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

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

Меню ↑

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

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

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

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

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

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

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

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

Меню ↑

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

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

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

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

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

Меню ↑

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

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

button {
  background-color: blue;
  color: white;
}

button {
  background-color: orange;
  color: white;
}

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

Меню ↑

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

В прошлых занятиях мы создали кнопку и задали ей соответствующие стили, однако она совершенно не функционирует. Как же оживить её? Для этих целей существует язык JavaScript, код которого называют «скрипт», «сценарий» в переводе. То есть имеется возможность написать в некий сценарий уже в файле script.js для определённых элементов страницы, выполнение которого возложено на браузер. К слову практически все динамичные эффекты на сайтах — 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';
  }
}

button.style.backgroundColor = 'white';
button.style.color = '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.

Успехов Вам!