В 2019 году русский сегмент веб-разработки на уровне фриланса начал только раскручиваться и делать уверенные шаги. На самом деле эта сфера достаточно свободна и проста для вхождения. Уже сегодня любой желающий может найти бесплатный курс или скачать Solo Learn и написать свой первый сайт.
В этой серии статей мы изучим азы HTML, коснемся CSS и JavaScript. Разберем список скиллов настоящего вебера, напишем первые простые веб-страницы, узнаем сколько зарабатывают веб-разработчики и многое другое!
В сегодняшнем материале мы разберем общие понятия и установим среду разработки, а также посмотрим полезные образовательные ресурсы и источники вдохновения для ваших будущих сайтов.
Общие понятия
HTML (HyperText Markup Language) - язык разметки. В нем хранится все содержимое сайта: текст, списки, ссылки, формы и пр.
CSS (Cascade Style Sheet) - язык стилизации веб-документа. В нем находятся все стили вашего сайта: отступы, цвета, обводки, границы и пр.
Если HTML скелет, хранящий только текст, то CSS содержит все оформление без текста
Текст-рыба - этот шаблон текста, который нужен для того, чтобы заполнить элемент контентом. Выглядит он примерно так: Sunt nesciunt repellat molestias vitae nostrum aliquid laudantium quo voluptatem provident voluptate tenetur illo. Это набор слов на латыни, не несущий в себе смысловой нагрузки.
Создадим файловую структуру нашего сайта- для этого создадим папку и в ней создадим два файла- index.html и main.css. Первый файл будет отвечать за разметку, второй - за стили.
Вот как это выглядит:
Установим среду разработки!
В принципе, для написания HTML-разметки вам достаточно стандартного блокнота на вашем компьютере. Но мы будем умнее и установим специальную среду разработки "Sublime Text 3"
Данная среда разработки удобна тем, что помечает теги, автоматически закрывает их, помогает подбирать содержимое контейнеров (не беспокойтесь: эти понятия мы разберем в следующих статьях). Перейдите в раздел Download, выберете версию, подходящую под вашу ОС, загрузит и установите. Выполните простую первичную настройку и всё: мы готовы начинать! Просто вставьте туда два созданных ранее файла.
Вот так выглядит наша среда разработки. Для удобства мы разделим ее на две части- в верхнем левом углу вкладка “index.html” - тут будет разметка, в правом верхнем углу вкладка “main.css” - тут будут наши стили. У файлов разметки разрешение .html, у файлов стилей - .css
Достаточно о коде. Теперь поговорим о том, где вы можете взять дополнительный материал для изучения:
SoloLearn (полностью бесплатно)
HTML-academy (часть материалов доступна бесплатно)
SkillBox (есть бесплатные материалы, но большая часть платная)
С одним только SoloLearn вы можете освоить и HTML, и CSS, и JS, и даже получить некоторое количество практики в этом деле. В следующей статье мы изучим HTML теги, атрибуты и значения. Поэтому подпишись на канал, чтобы не пропустить следующие материалы!
Поддержи автора: подпишись на канал и поставь лайк!
