Но что, если вы работаете не на своем ноутбуке/PC/боже упаси телефоне, и на нем стоят жесткие ограничения по правам, месту, оперативе, мощности или вам просто лень каждый раз устанавливать пакеты/плодить папки? Конечно, если причина объективная, то окей, но в остальных случаях, осуждаю, ибо на проекте вам придется все это делать, и советую сразу приучаться делать такие простые действия, как установка проекта.

https://codesandbox.io/

Решение простое - использовать Sandbox, где вы сможете писать код прямо в браузере и быстро инициализировать новые проекты. Там, вы сможете инициализировать виртуальную среду разработки, используя готовый шаблон, например, простой HTML/CSS проект, React, Next JS.

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

Видите, как круто придумал? Понимая это, у вас будет меньше отмазок, что “нууу я не дома весь день, до компуктера не могу дойти, нет сил”, ведь пока у вас есть силы днем, можете изучать программирование откуда угодно! 😈

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

Быстро пройдемся по интерфейсу. Мы зашли на Sandbox, видим такой экран

image.png

Мне, лично, удобнее всего заходить через Google, но решайте сами.

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

image.png

В правом верхнем углу нажимаем на кнопку Create

image.png

Тут мы видим множество готовых шаблонов, которые мы можем использовать. Для первого раздела про HTML/CSS, нам понадобится выбрать очевидно, HTML + CSS, а когда перейдем к React → React (TS), для JS → JavaScript.

Для начала, выберем HTML + CSS

image.png

От нас, понадобится только выбрать понятное имя для проекта, чтобы не перепутать с другими, и все! Садимся и пишем, идем на тренировку и пишем, сидим в перерыве на работе и пишем, пишем и пишем!

image.png

Задания

  1. Попробуйте создать проект, выполняя все шаги, которые я показал.