Автор оригинала: FreeCodeCamp Community Member.
Кевином Кононенко
Если вы когда-нибудь посещали ресторан, это руководство поможет вам понять, как инструменты DEV, такие как инструменты Chrome DEV и текстовые редакторы, такие как возвышенные текстовые работы.
Когда вы создаете свой первый веб-сайт с HTML и CSS, вы можете легко охватить все новые технологии, которые необходимы для развертывания даже базового сайта.
Хостинг Услуги?
Текстовые редакторы?
Все эти технологии выходят за пределы учебников, которые вы, возможно, попробовали на таких сайтах, как FreeCodecamp и Кодекадемия !
Итак, я полагал, что быстрый учебник по использованию текстовых редакторов и инструменты DEV удалят одну запутанную часть процесса.
На самом деле, все это тесно напоминает способ, которым ресторан Chef может создать новые блюда для обслуживания клиентов. Подумайте о концепции рецепта. Рецепт – это определенный набор инструкций и ингредиентов, которые будут создавать точную же еду и снова. Как вы собираетесь увидеть, процесс разработки нового рецепта выглядит как строить веб-сайт с HTML и CSS.
Чтобы понять этот учебник, вам просто нужно знать основ HTML и CSS. Давайте прыгнем в него.
Сравнение рецепта и переднего кода
Давайте подумаем о фундаментальной цели быть шеф-поваром. Ваша цель – переводить рецепты в вкусную еду для клиентов. Конечно, становится трудно, когда вы рассматриваете все факторы, которые вам нужно жонглировать одновременно: входящие заказы, разные сроки и т. Д., Но давайте забываем об этом на мгновение.
Вот какая система ресторана может выглядеть.
- Шеф-повар развивает рецепт, который будет использоваться каждой ночью в ресторане. Он может быть воспроизведен снова и снова на кухонном персонале, и превратился в одно и то же еду каждую ночь.
- Кухонный персонал следует по инструкциям по рецепту
- Окончательный продукт – это еда (похоже на макароны и фрикадельки в этом случае, какой это шеф-повар?)
Точно так же, когда вы создаете веб-сайт, вы должны написать код, который можно интерпретировать браузером, так что то же самое веб-сайт можно подавать посетителям по всему миру.
- Вы пишете код, используя HTML, CSS и JavaScript, который будет производить полную веб-страницу
- Браузер интерпретирует этот код и преобразует его в графический интерфейс (графический интерфейс пользователя)
- Посетитель сайта испытывает сайт (например, Google.com)
Каждый раз, когда вы посещаете определенный сайт, называется « сессия ». Каждый раз, когда вы открываете страницу на новом домен (Как Google.com или Facebook.com) новая сессия начинается и длится до тех пор, пока вы не покинете домен. Таким образом, один человек может посетить несколько страниц на сессии. Сессия как визит в ресторан.
Что такое инструменты DEV, то?
Инструменты DEV позволяют осматривать базовый код сайта и играть с ним. Если вы используете веб-браузер Chrome, то вы можете использовать Chrome Dev Tools , Например. Просто щелкните правой кнопкой мыши в любом месте на странице и выберите «Проверьте», последний вариант в меню.
Инструменты DEV позволяют манипулировать стилью, структурой и JavaScript на странице в пределах отдельных сеансов. Но эти изменения не будут длиться, если вы обновляете страницу и начните новую сессию.
В этом случае я поменял цвет фона вход элемент на синий. Довольно скучные вещи. Вы можете пойти на любой другой веб-сайт и делать то же самое. Конечно, изменения никогда не будут длиться за пределами вашей индивидуальной сессии.
Это вроде как то, чтобы быть тем человеком в ресторане, который берет вкусному еду … и помещает на него горячий соус. Потому что вы тот тип человека, который любит горячий соус на все. ?
Ваша любовь к горячему соусу не повлияет на сам рецепт. Он не повлияет на другие подобные блюда, которые будут поданы той ночью. И, если вы пойдете в другой ресторан, вам придется задать горячий соус снова и снова.
Таким же образом, вы можете использовать инструменты разработчиков для игры с кодом в другом домене, но оно не будет никакого влияния за пределы этого конкретного сеанса в этом домене.
Использование инструментов Dev во время создания вашего первого сайта
Как шеф-повар, это ваша работа, чтобы придумать рецепты, которые приведут к еде, которые клиенты любят. Но ты наверное Не хочу понимать это, изобретение рецепта, отдавая его кухонному персоналу и учиться позже, понравилось ли клиенты или нет.
Вместо этого вы, вероятно, хотите проверить кучу рецептов на своей собственной кухне, а затем выпустить тот, который, кажется, лучше всего.
Это удаляет всю сложность работы с кухонным персоналом и производит большой объем пищи. Вы действуете как шеф-повар, так и клиент одновременно.
Обратите внимание, что в этом случае у вас есть контроль над рецептом, так и конечным продуктом. Таким образом, вместо того, чтобы вытащить один прием пищи клиентам, вы можете составить часть рецепта, затем объединить ингредиенты по-разному. Затем вы можете настроить рецепт, когда вы идете, чтобы отразить комбинации, которые работают.
Когда вы создаете свой первый веб-сайт, вы также должны использовать оригинальный код рядом с инструментами разработчиков, чтобы настроить свой веб-сайт на вашем ноутбуке или настольном компьютере.
Текстовый редактор (например, Sublime Text, Vim или Emacs) – это инструмент, который позволяет вам изменить оригинальный рецепт – файлы HTML, CSS и JavaScript.
Однако, поскольку вы регулируете свой браузер в режиме реального времени, вы, вероятно, не захотите изменить «рецепт», сохранить файл и перезагрузить страницу каждый раз. Это утомительно!
Вместо этого вы можете сократить этот цикл обратной связи, внес изменения, используя инструменты разработчика, а затем регулировка «рецепта» после того, как вы создадите что-то, чего стоит сохранить в самом браузере.
Помните, что если вы построете что-то ценное, используя инструменты разработчика, но затем обновите страницу, ваши изменения будут исчезнуть. Даже если файл размещен локально на вашем компьютере.
Инструменты разработчики работают только для интерфейса
Конечно, ресторан имеет много процессов, которые сразу же поддерживают шеф-повар. Есть человек, который приветствует вас у двери, серверы, экипаж очистки, бармен и так далее.
Это люди, которые не участвуют в перевод рецептов в еду, но все же помогают запускать операции ресторана.
Это вроде как код сервера, или Задний конец Отказ Хотя вы пишете Server-Side Code с текстовым редактором, вы не можете внести какие-либо изменения через инструменты разработчика.
Почему это? Ну, можете ли вы представить, если бы отдельных клиентов разрешили изменить правила ресторана, как они могут изменить их еду? Это было бы безумие! Клиенты не могут изменить то, как работает ресторан, независимо от того, насколько плохо они хотят.
Инструменты разработчика позволяют вам настроить HTML, CSS и JavaScript. Они не раскрывают Server-Side Code, поскольку это позволило бы никому определить любые наличие уязвимостей безопасности в веб-приложении. Но серверный код также написан в текстовом редакторе.
Если вы хотите узнать больше о настройке кода сервера в первый раз, ознакомьтесь с моим Руководство по концепции локального хоста Отказ
Получите последние руководства
Вам понравилось это руководство? Дайте ему «хлопать»? Или зарегистрируйтесь здесь, чтобы получить последнее визуальное руководство по темам веб-разработки.