Итак, наконец приступаю именно к закреплению обучения, не прошло и месяца. Блоки буду разбирать отдельно в каждой статье и начнем с вводного блока.

Блок разделён на три части — «Основы HTML и CSS», «Основы JavaScript» и «Основы PHP». Внутри почти каждой части, и это сохранится в дальнейшем в остальных блоках, есть Теория и Практика. Именно к практике нужно покупать доступ, поэтому её мы будем оценивать отдельно, ибо уплОчены шекели. :)

Основы HTML и CSS

HTML

«Язык HTML отвечает за структуру и содержание страницы» — стандартное определение HTML. Если подробнее и проводить какую-то метафору, то HTML это каркас здания, отвечающий за то в каком порядке и где будут располагаться квартиры, лестницы и окна — структурные элементы, но базово не отвечающий за то, как будут выглядеть эти элементы — белые стены, пол с плиткой, деревянные поручни и т. д.

HTML состоит из тегов, которые бывают парные — <h1> открывающий и </h1> закрывающий тег, и одиночные — <img> чаще всего не имеющие закрывающий тег.

У тегов HTML есть правила вложенности — вложенный тег должен закрываться внутри родительского, то есть до его закрывающего тега. Однако, не все теги можно вкладывать друг в друга.

У подавляющего большинства тегов есть задаваемые атрибуты, которые пишутся внутри открывающего (или, в данном случае, одиночного) тега:

<ul> <!-- открывающий тег списка -->
  <li> <!-- открывающий тег элемента списка, вложен в <ul> -->
      <img src="pic.png"> <!-- одиночный тег изображения с атрибутом src и его значением "pic.png" -->
  </li><!-- закрывающий тег элемента списка, закрыт до </ul> -->
</ul><!-- закрывающий тег списка -->

В символы < !- - и - - > заключаются комментарии, которые Teletype даже в блоке кода зачем-то форматирует, и трансформирует два дефиса (- -) в тире и стрелочку, из-за чего пришлось написать их с пробелами.

CSS

«Язык CSS отвечает за внешний вид страницы» — в моей метафоре со зданием, CSS отвечает за отделку, то как выглядят структурные элементы — фасад, внутренняя отделка стен, настил полов, цвет окон, дверей и т. д.

С помощью CSS можно задать параметры (или чаще всего пишут/говорят «стиль») для любого тега, описывая его свойства в формате свойство: значение;. Например:

color: red; /* дословно – цвет: красный; */
padding: 10px; /* внутренний отступ: 10 пикселей; */

Задать стиль тегу можно несколькими способами:

1. С помощью атрибута style="color: red;" вписаный непосредственно в тег. Самый не оптимальный вариант при вёрстке сайта. Такой вариант используется только в крайне редких случаях, например, при вёрстке писем для email-рассылок.
2. С помощью внешнего стилевого файла с расширением .css, где описаны все свойства и атрибута тега который связывает стиль с ним. Чаще всего используется атрибут class="warning-text", но забегая вперёд, я знаю, что привязать стиль можно и к другим атрибутам, например к id="123".

Основной способ всё-таки номер 2 и в отдельном стилевом файле всё построено с помощью CSS-правил (CSS-rule) имеющих вид:

селектор {
  свойство1: значение;
  свойство2: значение;
  }

Селектором называют указатель на тег к которому будут применены стили, описанные в фигурных скобках { }. В качестве селектора могут выступать сами теги или определённые атрибуты тега – чаще всего class:

p {             /* селектор тега <p> */
  color: red;   /* покрасит ВСЕ <p> на странице в красный*/
    }
  
.warning-text { /* селектор класса */
  color: red;   /* покрасит теги с этим классом на странице в красный*/
    }
  
#123 {          /* селектор ID */
  color: red;   /* покрасит тег с этим ID на странице в красный*/
    }

Атрибут class может иметь несколько значений, то есть тег может иметь несколько классов и, следовательно, принимать свойства стилей от нескольких селекторов. Классы в атрибуте пишуться просто через пробел:

<li class="product">Товар</li>
<li class="product hit">Товар, а ещё хит продаж</li>
<li class="product hit sale">Товар, хит продаж и со скидкой!</li>

Чаще всего несколько классов используются для модификации одного структурного элемента, выделяя его из подобных ему. Хотя, мне кажется, можно очень по разному использовать, тут только практика покажет.

Комментарии в CSS, как уже выше видно, вносятся между символами /* и */

Практическая часть и Испытание

В начальном блоке всего 4 задания и только в «Основы HTML и CSS», то есть практики по JS и PHP нету. Плюс после первой части есть «Испытание», которое, по сути, просто еще одно задание, возможно чуть более комплексное. Не помню было ли испытание бесплатным, возможно в этом разница еще.

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

1. Выполнить задания по списку, как в теоретических уроках, но без подсказки, где и что менять / исправлять. Пока что вообще ничего сложного, занимают 2-3 минуты.
2. Сделать по образцу — списка заданий нет, но есть образец и пояснения в задании. Это уже сильно интересней. Грубо говоря, нужно сделать как в образце, нажать кнопку «сравнить» и при 80%-м совпадении (вроде) урок засчитан. При этом предполагается, что ты используешь знания из предыдущих уроков, но в принципе можно реализовать как хочешь, главное, что бы совпадало с образцом.

«Испытание» относится ко 2-му виду и как раз-таки испытание у меня корректно не работает. Вообще судя по форуму, есть проблемы со 2-м видом заданий. Я стараюсь делать на 100% совпадения все задания, но конкретно в этом испытании зачем-то в образце заголовку задали кернинг.

Возможно, я утюг и не понимаю что-то, а пыхчу, но выше 98% не получилось даже с letter-spacing о котором не было речи в теории.

Касаемо «Домашней работы» в тренажёрах — это микро-статьи из разряда «Как зарегистрировать домен?», «Как загрузить сайт на хостинг?» и т. п. На мой взгляд немного лениво сделано и не вызывает интереса совсем. Для супер-новичков полезно, наверное, но я не буду акцентировать на них внимание в статьях. Я их делаю во время обучения, но здесь расписывать не буду.

Основы JavaScript

JavaScript (JS) в отличие от HTML/CSS уже является языком программирования, то есть код на JS описывает выполнение ряда последовательных инструкций, которые понимает браузер. Иными словами, JS отвечает за то, как изменяется страница и её элементы в зависимости от времени, каких-либо событий или других условий.

И если в нашей метафоре HTML и CSS это само здание и как оно выглядит, то JavaScript это очень умелый бригадир, который по запросу может изменять практически любые элементы здания «на ходу».

Список инструкций JS или «скрипт», можно написать непосредственно в HTML коде страницы с помощью тега <script> ... </script>, но, как и в случае с CSS это не очень оптимальный вариант, к которому стоит прибегать в крайнем случае.

Лучше использовать внешний файл с расширением .js который можно прикрепить к странице с помощью атрибута src, прописанного в открывающем теге:

<script src="адрес_файла"></script>

Касаемо того, где прописывать теги <script></script> — в тренажёре рекомендуют перед закрывающим тегом </body>, но насколько я знаю это не железобетонное его положение. Вообще где-то видел во время своих поисков исправления заруиненых виджетов, что современная спецификация рекомендует указывать все внешние файлы в <head></head>, в том числе .js. Поэтому буду относиться к этому скептически, но сильно умничать не буду — как пишут умные дядьки/тётьки так и сделаю, пока что.

Синтаксис инструкций

Далее я отклонюсь от конспекта в тренажёре и немного напишу от себя, то как я понял синтаксис инструкций, или «методов», в JavaScript. На мой взгляд это очень важно, возможно, что к этому стоит приступать сильно позже, но в какой-то момент меня заинтересовало именно это и я начал разбираться. Не факт, что я все понял правильно и, возможно, в дальнейшем я себя поправлю.

В тренажёре нас знакомят с методом querySelector, который ищет указанный селектор по странице, вид метода такой:

document.querySelector('селектор');

Где первая часть до точки — элемент или область в котором будет искать метод querySelector, в скобках указан параметр метода, в данном случае какой селектор искать.

Следом нас знакомят с методом console.log, который выводит в консоль браузера заданные в параметре данные:

console.log('Привет от JavaScript!');

Даже по этим двум методам можно проследить закономерность, несмотря на то, что метод console.log с подсветкой синтаксиса не имеет желтой области. Я полез в Google и в общем-то сразу нашел подверждение своей догадке. Например, я возьму другой метод с сайта w3schools:

document.getElementById("demo").innerHTML = "Hello JavaScript";

Метод getElementById ищет на странице элемент, у которого в теге задан атрибут id="demo", затем найдя его, меняем свойство innerHTML — «содержимое тега» на указанные данные, в данном случае это строка «Hello JavaScript».

Если попробовать перевести на русский, что бы было понятнее, получится примерно так (картинка, чтобы понять по подсветке синтаксиса что где):

То есть, если уж совсем обобщать и по пунктам описывать синтаксис:

1. Если это необходимо, первым указывается объект или область изменений, то есть пункт отвечает на вопрос «Где?» или «С чем?» предстоит работать дальше.
2. Далее, опять же если это необходимо, указывается метод или функция (возможно, по сути это одно и то же), то есть пункт отвечает на вопрос «Что сделать?» исходя (или не исходя) из заданных параметров.
3. Наконец, и опять же если это необходимо, указывается свойство которое будет как-то использовано или в котором будут последующие изменения — замена параметра, вложенная функция или еще чего.

Исходя из этого, можно предположить (и на самом деле так и есть), что в методе console.log() также есть область изменений и фукнция и, несмотря на другую подсветку синтаксиса, «дословно» получается так:

Количество объектов, методов и свойств огромное, более того объекты и методы можно задавать свои — с помощью переменных и функций.

Переменные в JS можно объявить с помощью ключевого слова let:

let header = document.querySelector('header');

Что дословно можно перевести как — «давай-ка переменная с именем header это в документе найденный селектор по тегу <header>». Всё, постараюсь больше без дословных переводов. :)

Переменные не должны начинаться с цифры и кроме цифр и латинских букв можно использовать только _ и $. Имя переменных в JS чувствительны к регистру, то есть header, Header и HEADER - это будут разные переменные. Так же есть зарезервированные слова, которые нельзя использовать как название переменных.

Возвращаемся к тренажёру

Так как JS для новичков не самая простая тема, то в вводной части нас просто знакомят с интересными методами и свойствами, которые мы уже можем применить к нашим знаниям из HTML/CSS.

Методы для изменения класса элемента:

элемент.classList.remove('класс');  // убрать класс из элемента
элемент.classList.add('класс');     // добавить класс к элементу
элемент.classList.toggle('класс');  // переключить – убрать если есть, добавить если нет

Свойства текстового содержимого элемента и данные поля ввода:

let paragraph = document.querySelector('p');     // объявили, что переменная paragraph это элемент с селектором <p> 
paragraph.textContent = 'Здесь был Кекс. Мяу!';  // изменили содержание эелемента, то есть текст в теге <p></p>

let input = document.querySelector('input');     // аналогично, переменна с селектором <input>
paragraph.textContent = input.value;             // содержимое <p></p> заменится на данные введенные в поле <input>

Обработчики событий – это очень для меня интересная тема, часто сталкивался с ней при работе с Google Tag manager, насколько знаю их там достаточно дофига. В тренажёре нам показывают работу двух, наверное, самых понятных и простых. Первое – свойство событие по клику:

let button = document.querySelector('button');  // переменная с селектором <button>
button.onclick = function() {                   // запустить ф-цию при клике на селектор
  console.log('Кнопка нажата!');                // сделать запись в консоль
  };

И второе – свойство событие при отправке формы:

let form = document.querySelector('form');  // селектор <form>
form.onsubmit = function() {                // все аналогично
  console.log('Форма отправлена!');
};

Еще упомянута конкатенация, это + , работает она как в математике. Также чуть не забыл про комментарии – однострочные с помощью //, а многострочные так же, как в CSS с помощью /* и */.

Основы PHP

«PHP — препроцессорный язык» — попытаюсь упростить страшное слово «препроцессорный» и своими словами описать для чего нужен PHP.

HTML — каркас, CSS — внешний вид, вместе все они отвечают за готовый вариант страницы, которая показывается пользователю в браузере. JS — отвечает за интерактивность и может менять страницу в моменте, но базово, только готовую страницу в браузере.

Готовой к загрузке в браузере страницу базово собирает ручками верстальщик, но это не оптимально, например, если страниц на сайте много. А если надо реализовать возможность создавать страницы не верстальщику, а контент-менеджеру и периодически их редактировать, то совсем повеситься можно.

PHP — это решение таких задач. Он запускает предварительный процесс сборки воедино информации о сайте, будь то куски каркаса, стили, скрипты, которые могут быть разбросаны по базе данных на сервере.

Самый простой пример и то, что чаще всего используется, это три основных сегмента страницы, которые с помощью команды require мы вызываем в тренажёре:

<?php                    // открывающий PHP-тег
require('header.php');   // вызов "шапки" сайта
require('content.php');  // вызов основной части страницы
require('footer.php');   // вызов "подвала" сайта
?>                       // закрывающий PHP-тег

Где-то на сервере хранятся три указанных файла и связвнные с ними .css и .js, в файлах находится HTML-код структуры отдельно шапки, подвала и контента какой-либо страницы. С помощью PHP мы собрали их в один готовый HTML файл и «отдали» браузеру, что бы он показал его посетителю.

В PHP тоже есть переменные и объявляются они с помощью символа $ перед названием переменной:

$name = 'Саша';

С помощью переменных можно шаблонизировать не только какие-то крупные структурные сегменты сайта, но и минимальные сущности, например, с помощью команды echo даже слова в тексте параграфа:

<p>Меня зовут <?php echo($name); ?></p>  // полная запись php-тега
<p>Меня зовут <?= $name ?></p>           // короткая запись php-тега

Но PHP работает не только с «видимой» частью сайта и базой данных на сервере, ко всему прочему, он может обращаться к адресной строке браузера. Это важно, так как в ней очень часто много информации помимо самого «адреса» сайта. Например, параметры запроса, которые пишутся после ? в адресной строке:

Информацию из адресной строки можно получить с помощью команды $_GET. Например, что бы получить значение из примера выше, нужно написать:

$_GET['q']  // получит значение "php"

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

Резюмируя о блоке «Знакомство с веб-разработкой» — мне понравилось, но есть спорные моменты. Я бОльшую часть из вышеописанного знал в какой-то мере, интересно было бы узнать, как оно даётся совсем новичкам. Мне кажется, в некоторых местах могут быть проблемы.

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

Спасибо за внимание тем, кто каким-то магическим образом залетел в эту статью и еще более волшебным образом её дочитал. Если вы залетели сюда как-то случайно, то вот тут написано подробно обо мне, а вот здесь о том почему я выбрал тренажёры от HTML Academy.

Ссылки на некоторые другие статьи по HTML Academy:

Знакомство с Веб-разработкой <- Вы здесь
Знакомство с HTML и CSS
Знакомство с JavaScript
Знакомство с PHP
Таблицы и подробно о формах
Наследование, каскады и селекторы
Блочная модель, поток и сетка на float
Гибкие флексбоксы display: flex
Удобные сетки на гридах display: grid
Пропуск блока «Погружение»
Позиционирование и двумерные трансформации
Теневое искусство и линейные градиенты
CSS-фильтры и Кекстаграм
Мастерские
Продвинутые Мастерские
...

Также мои соц. сетки, которые я продолжаю вести:

Мой Twitter
Мой Telegram
Мой Паблик ВК

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!