Здравствуй, дорогой читатель!
С чего же все таки стоит начать? Конечно же с установки необходимого программного обеспечения (далее ПО). В первую очередь нам потребуется текстовый редактор, да не простой - а специальный. Лично я посоветую любому новичку сделать выбор в пользу Visual Studio Code.
Перепробовав кучу всевозможных редакторов текста и кода, я все таки вернулся к VS Code. Почему? Только за то что в нем встроен по умолчанию плагин "Emmet" (данный плагин делает половину работы за вас, но есть и свои нюансы).
p.s. О плагинах, нужных и не очень, я расскажу позднее ;)
В пункте "скачать и установить в директорию по умолчанию", думаю, ни у кого не возникнет вопросов. Переходим по ссылке, скачиваем и устанавливаем. Все просто.
Наверняка вы уже придумали что в первую очередь хотели бы создать.
А создать вы хотите - портфолио или сайт-визитку про себя любимого, чтобы показать всему миру кто вы и зачем.
Для начала создадим папку для нашего проекта. Так как это ваше портфолио и ближайшее свободное время вы будете уделять именно ему, то не стоит глубоко закапывать папку с вашим будущим проектом. Создайте прямо на рабочем столе и отведите ей место (например - правый верхний угол рабочего стола). Всегда под рукой, удобно, практично.
Есть пара правил для именования вашей папки!
- Не используйте пробелы (пишите слова через дефис: my-first-project);
- Не используйте ЗАГЛАВНЫЕ буквы (так проще, поверьте);
- Не используйте кириллицу или еще какой-либо нестандартный алфавит (только латиница, только хардкор).
Готовы? Отлично!
Открываем наш текстовый редактор.
При первом запуске программы, нас встречает такая картина.
Переходим в пункт верхней панели "File"
В выпадающем меню выбираем пункт "Open Folder"
Выбираем папку с нашим будущим проектом "my-first-project", выделяем и нажимаем кнопочку "Выбор папки"
Вот мы открыли наш проект в среде разработки VS Code. Браво!!!
p.s. Окно приветствия "Welcome" можно закрыть, оно нам не понадобится.
Подготовка к следующему уроку.
Вы как и я закрыли окно-вкладку "Welcome".
Теперь кликните левой кнопкой мыши (ЛКМ) по экрану слева. И он подсветится тонкой голубой рамкой. Так мы убедимся что последующие действия будут совершатся непосредственно в нашей папке "my-first-project"
Далее в этом же поле кликните правой кнопкой мыши (ПКМ) и выберите пункт "New Folder" (Новая папка)
Заполним появившееся поле
Назовем данную папку "images" и нажмем на клавиатуре Enter
Далее. Подобным образом создадим еще пару папок с названиями "styles" и "scripts". И у нас должна получиться следующая структура
А "на десерт" создадим самый главный файл в нашем проекте - "index.html". Для этого кликаем ПКМ в поле нашего проекта и выбираем пункт "New File", даем ему имя - "index", а так же добавляем расширение ".html". Все вместе у нас должно получится "index.html"
Нажимаем Enter
Пока что в нашем файле ничего нет. Создадим базовую разметку (как раз в этом нам и поможет предустановленный плагин "Emmet").
Кликните ЛКМ в правом окне и введите с клавиатуры восклицательный знак "!" (должна появиться подсказка).
Теперь просто нажмите Enter
Вуаля! Базовая разметка готова.
А мой небольшой урок подошел к концу.
Послесловие
Почему я выбрал такой формат? Почему не записал видео, а "по-старинке" делал скриншоты и расписывал каждый шаг?
Все просто. В самом начале пути - это лучший вариант впитать информацию. Человеку которому все это в новинку, не придется по несколько раз перематывать видео назад, чтобы пересмотреть и запомнить один из шагов, для последующего его выполнения.
По крайней мере, так было для меня.
До скорых встреч.