Урок 1.1 — Как проходить курс
Добро пожаловать! В этом уроке мы расскажем, как устроен этот курс, что вам понадобится для занятий и как получать максимум пользы от каждого урока. Никакого кода — только подготовка.
Здравствуйте, будущий веб-разработчик!
Поздравляю: вы сделали первый шаг к тому, чтобы научиться создавать свои собственные веб-сайты. Этот курс создан специально для людей, которые никогда раньше не писали код. Совсем никогда. Если вы не знаете, чем отличается HTML от CSS, а браузер от сервера — вы попали точно по адресу.
Мы будем двигаться очень медленно и очень подробно. Каждый урок объясняет ровно одну небольшую тему. Никакой воды, никаких сложных терминов. Вы будете не просто читать — вы будете писать код руками и сразу видеть результат в браузере. Именно так учатся настоящие разработчики.
Курс состоит из 7 модулей и 24 уроков. Вы проходите их по порядку, от простого к сложному. Всё, что вы узнаете в одном уроке, пригодится в следующем. Поэтому не перескакивайте — идите последовательно.
Чего вы достигнете после курса
К концу курса вы сможете создать свою первую веб-страницу с нуля. Не просто нажать пару кнопок в конструкторе, а написать код в текстовом редакторе, открыть страницу в браузере и увидеть результат своей работы. Это звучит просто, но для новичка это огромное достижение.
Вот что конкретно вы будете уметь:
Что вам понадобится
🌐 Браузер
Браузер — это программа, в которой вы смотрите сайты. Chrome, Firefox, Safari, Edge — всё это браузеры. Для наших уроков мы рекомендуем Google Chrome. Он бесплатный, самый популярный, и у него отличные инструменты для разработчика. Скачать можно здесь: https://www.google.com/chrome/. Если у вас уже стоит Chrome — отлично, ничего менять не нужно. Подойдёт любой современный браузер, просто Chrome мы будем использовать в примерах.
📝 Текстовый редактор
Код пишут в специальных программах — текстовых редакторах. Можно писать даже в обычном Блокноте (Windows) или TextEdit (Mac), но это очень неудобно. Мы будем использовать VS Code (Visual Studio Code) — это бесплатный, мощный и очень популярный редактор кода. Скачать: https://code.visualstudio.com/. Установите его прямо сейчас, если ещё не сделали этого. Не бойтесь — он на русском (ну, почти), и мы научимся в нём работать.
📁 Папка для проектов
Создайте на компьютере отдельную папку для всех уроков. Например, html-css-course на рабочем столе. Внутри неё вы будете создавать файлы для каждого урока. Это поможет не потерять ваши работы. Совет: внутри папки курса создавайте отдельные папки для каждого урока: lesson-1-1, lesson-1-2 и так далее.
На этом этапе вам больше ничего не нужно. Никаких сложных программ, серверов или баз данных. Только браузер, редактор кода и ваше желание учиться. Всё остальное мы установим и настроим по ходу курса.
Как создавать и открывать HTML-файлы
Это самый важный навык для начала. Запомните этот порядок действий, он будет повторяться в каждом уроке:
<h1>Привет, мир!</h1>. Пока не важно, что это значит — скоро узнаете.index.html. Важно! Расширение должно быть .html, а не .txt. В VS Code выберите тип файла «HTML».💡 Важно про расширение .html
Компьютер определяет тип файла по его расширению — части имени после точки. Файл index.html — это HTML-файл. Если вы сохраните его как index.txt, браузер просто покажет ваш код как обычный текст, а не как веб-страницу. Всегда проверяйте расширение! В VS Code расширение добавляется автоматически, если вы выбрали тип «HTML» при сохранении.
Попробуйте прямо сейчас: создайте файл, напишите <h1>Моя первая страница</h1>, сохраните как test.html и откройте в браузере. Вы увидите текст «Моя первая страница» крупными буквами. Поздравляю — это ваша первая веб-страница! Вы только что стали веб-разработчиком (ну, почти).
<h1>Моя первая веб-страница!</h1>Да, это всё! Всего одна строчка. Браузер понимает, что <h1> — это заголовок, и показывает текст крупно и жирно. Не волнуйтесь, если пока непонятно, как это работает. В следующих уроках мы всё разберём по кирпичикам.
Как устроен каждый урок
Все уроки курса построены по единому шаблону. Это сделано специально, чтобы вам было проще ориентироваться. Вот что вы найдёте в каждом уроке:
<pre><code> — так их легко отличить от обычного текста.Пять советов для успешного обучения
⌨️ 1. Пишите код руками
Самая большая ошибка новичков — читать примеры и думать «я всё понял». Понимание приходит только через пальцы. Всегда набирайте код самостоятельно. Не копируйте, не вставляйте. Каждый символ, каждая скобка должны быть напечатаны вами. Мышцы пальцев запоминают синтаксис, а мозг — логику. Первое время будет медленно и с ошибками — это нормально! Ошибки — лучший учитель.
🔄 2. Экспериментируйте
После того как пример заработал, измените что-нибудь. Напишите другой текст. Добавьте ещё один заголовок. Уберите закрывающий тег и посмотрите, что будет. Сломайте код и почините его. Страх «сломать» — главный враг обучения. Хуже сломанного кода может быть только полное отсутствие кода. Экспериментируйте смело — вы ничего не испортите.
⏰ 3. Регулярность важнее интенсивности
Лучше заниматься по 30 минут каждый день, чем 5 часов раз в неделю. Мозгу нужно время, чтобы переварить информацию. Когда вы спите, ваш мозг закрепляет новые нейронные связи. Короткие, но регулярные занятия дают лучший результат, чем редкие и изнурительные марафоны. Поставьте напоминание на телефоне: каждый день в одно и то же время — 30 минут на урок.
📝 4. Делайте заметки
Заведите блокнот (физический или в телефоне) и записывайте новые термины своими словами. Например: «Тег — это команда для браузера, которая говорит, как показывать элемент». Когда вы формулируете своими словами, информация усваивается гораздо лучше, чем при простом чтении. Через неделю вернитесь к записям и перечитайте — это закрепит знания.
❓ 5. Не бойтесь не знать
Вы не обязаны всё знать и помнить. Даже опытные разработчики постоянно гуглят и сверяются с документацией. Если что-то непонятно — перечитайте раздел ещё раз. Если всё равно непонятно — запишите вопрос и вернитесь к нему после практики. Часто ответ приходит, когда вы начинаете делать. И помните: каждый эксперт когда-то был новичком, который не знал, что такое тег.
Установка VS Code: пошаговая инструкция
Если у вас ещё нет VS Code, давайте установим его прямо сейчас. Это займёт 5 минут.
https://code.visualstudio.com/ в вашем браузере.💡 Полезная настройка: автосохранение
В VS Code есть функция автосохранения. Включите её: File → Auto Save. После этого файлы будут автоматически сохраняться при каждом изменении. Это очень удобно: вы меняете код, переключаетесь в браузер, нажимаете F5 — и видите обновлённую страницу. Никаких лишних действий.
Полезные ссылки
Вот несколько ресурсов, которые пригодятся вам на протяжении всего курса и после него. Не пытайтесь изучить их сейчас — просто сохраните эту страницу, чтобы вернуться потом.
MDN Web Docs
Самая полная документация по HTML, CSS и JavaScript. С примерами, объяснениями и ссылками. Есть на русском. https://developer.mozilla.org/ru/
W3Schools
Более простой и наглядный справочник. Можно прямо на сайте редактировать примеры и смотреть результат. https://www.w3schools.com/
CodePen
Онлайн-песочница для HTML, CSS и JavaScript. Пишете код в браузере — сразу видите результат. Удобно для экспериментов. https://codepen.io/
Google Chrome
Браузер, который мы будем использовать. https://www.google.com/chrome/
VS Code
Наш редактор кода. https://code.visualstudio.com/
Can I Use
Проверяет, поддерживается ли определённая возможность HTML/CSS в разных браузерах. https://caniuse.com/
Чего бояться не стоит
😨 «У меня не получится, я гуманитарий»
HTML и CSS — не языки программирования, а языки разметки. Там нет сложной математики, алгоритмов или логических конструкций. С этим справляются люди любых профессий: дизайнеры, журналисты, учителя, бухгалтеры. Если вы умеете читать и печатать — вы справитесь.
😨 «Я слишком стар, чтобы учиться новому»
Возраст не имеет значения. Многие успешные веб-разработчики начинали после 30, 40 и даже 50 лет. Гораздо важнее мотивация и регулярность занятий. Ваш жизненный опыт и дисциплина — ваше преимущество, а не недостаток.
😨 «Английский мешает»
Для HTML и CSS достаточно знать базовые английские слова (header — заголовок, paragraph — абзац, image — изображение, color — цвет). Почти все теги — это сокращения от английских слов. Вы выучите их в процессе. Наш курс на русском, так что языковой барьер не проблема. Основные термины мы будем переводить и объяснять.
😨 «Я не успеваю за темпом»
Вы учитесь в своём темпе. Никаких дедлайнов, никаких экзаменов. Если урок сложный — проходите его два дня. Если лёгкий — за один. Главное — не делайте перерывов дольше 2-3 дней. Регулярность важнее скорости.
Напутствие
Вы только что прочитали вводный урок. В нём нет кода, но он закладывает фундамент вашего обучения. Пожалуйста, выполните следующие шаги перед следующим уроком:
html-css-course для всех уроков.test.html с текстом <h1>Привет!</h1> и откройте его в браузере.В следующем уроке мы узнаем, что такое веб-разработка, как работает интернет и что вообще такое HTML. Будет интересно! До встречи.
Урок 1.1: Как проходить курс
9 вопросов