В этой статье предполагается, что читатель ничего не знает о том, как работают веб-сайты. Нет никаких предпосылок для прочтения этой статьи.

Я избегал использования каких-либо официальных определений, чтобы это выглядело как история.

К концу этой статьи вы:

  • Сможете оценить работу, которую HTML, CSS и JavaScript делают для нас
  • Уметь объяснить процесс создания веб-сайта с нуля.
  • Четко разграничивайте работу HTML, CSS и JavaScript

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

  • Веб-сайт. В основном содержит статический контент. В основном для отображения информации конечному пользователю.
  • Веб-приложения. Веб-приложение предназначено для взаимодействия с конечными пользователями. Это может быть игра, приложение для отслеживания расходов, список дел и так далее.

Теперь давайте посмотрим, как создается веб-приложение с нуля.

  • Мальчик по имени Элон хочет создать веб-приложение, которое принимает два числа и возвращает результат их суммы.
  • Например. Пользователь вводит два ввода: 2, 3 ; так что результат будет (2 + 3 = 5)

Что даст Илону HTML? 🤔

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

Что сделает CSS для Илона? 🤔

  • Он сможет украсить приложение: добавляя цвета, устанавливая пробелы между полями ввода и т. д. с помощью CSS.
  • Улучшение будет включать в себя создание пространства между двумя полями ввода, добавление цвета фона, стилизацию кнопки вычисления суммы и так далее.
  • Это важный шаг, так как Илону нужно удобное веб-приложение, в котором каждый мог бы легко перемещаться.
  • Если украшение не сделано должным образом, многие люди могут столкнуться с проблемами при навигации по веб-приложению.

Что даст Илону JavaScript? 🤔

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

В целом можно сказать: представьте себе человеческое тело. Затем :

HTML — это скелет, CSS — это тело, а JavaScript заставляет тело двигаться. 💻

Вот как, используя HTML, CSS и JavaScript, Илон сможет создать свое веб-приложение. 👩🏻‍💻