Привет, джуниор!
Если вы наткнулись на эту статью, значит вы, также как и я когда-то начал задавать себе вопросы, как создать свой веб-сайт или веб-приложение? Что для этого нужно знать? Какие технологии используются в вебе?
Наверняка, у вас куча вопросов и вы не знаете с чего начать.
На этом канале, я проведу вас по увлекательному миру веб-разработки с самых азов до использования современной библиотеки React.
Сразу скажу, путь будет непростой. Во время своего обучения, я неоднократно задумывался о том, чтобы бросить разработку, особенно часто такие мысли посещают после очередной неудачной попытки заставить работать свой код. Если же у вас возникла такая мысль, то не стоит отчаиваться, достаточно сделать небольшой перерыв. Полезный совет, не стоит браться за все подряд: HTML, CSS, JavaScript, React, Redux, различные CSS-препроцессоры, веб-сборщики Webpack или Gulp и т.д. и т.п.
Предлагаю сразу определиться с форматом статей, чтобы было проще ориентироваться на канале.
HTML - статьи, в которых будет описан процесс разметки веб-страницы;
CSS - статьи, в которых будет описан процесс стилизации веб-страницы;
JavaScript - статьи, в которых будет описан процесс написания скрипта для взаимодействия с веб-страницей.
В дальнейшем, я введу ещё несколько дополнительных обозначений для статей, относящихся с кем или иным технологиям.
Пожалуй, стоит начать.
Первым делом предлагаю скачать удобный, компактный и бесплатный редактор кода Visual Studio Code. Перейдите на сайт https://code.visualstudio.com/
В левой части страницы, нажмите на кнопку "Download for...", выберите место сохранения и загрузка начнется автоматически.
После загрузки файла, откройте установочный пакет. Выберите место установки и инсталируйте программу на ваш компьютер.
После установки, откройте редактор Visual Studio Code. Советую сразу перейти в раздел "Extensions" (расширения) и установить русский языковой пакет, как показано на скриншотах ниже:
После установки языкового пакета, нужно перезапустить редактор кода, чтобы изменения вступили в силу.
Следующий нашим шагом, будет созданием нашей первого веб-сайта. Конечно, веб-сайт, это слишком громкое название, но с чего нам ведь нужно начинать.
Итак, на верхней панели инструментов, выберите "Файл" - "Открыть папку". Укажите место для хранение файлов вашего проекта:
Сделали? Отлично, переходим к следующему шагу. Создание главного документа нашего сайта. Откройте проводник, кликните правой кнопкой мыши, на свободную область в проводнике и выберите пункт "Создать файл". В качестве имени задайте index.html и нажмите клавишу Enter.
Пришло время написать структуру нашей страницы. Благодаря чудесному инструменту Emmet, поставляемым с Visual Studio Code, вам достаточно ввести символ "!" (восклицательного знака) и нажать на клавишу Tab.
В результате ваш код будет выглядеть так:
В завершении статьи предлагаю добавить немного текста в документ и открыть нашу страницу. Внутри тега <body></body> вам необходимо написать тег <h1>Я люблю фронтенд</h1>
Сохраняем файл, открываем в проводнике вашей операционной системы папку с проектом и запускаем файл страницы. Браузер откроет этот файл и вы можете похвалить себя. Начала положено.
В следующей статье мы будем разбираться с тем, что же мы все таки написали... До скорых встреч =)