Привет! Марафон по основам frontend-разработки стартовал: желаем успехов в первых шагах в программировании и надеемся, тебе понравится свой результат работы! Здесь ты найдешь подсказки и "шпаргалки" к материалу, который изучаешь на занятиях. Они будут полезны для выполнения домашних заданий. Помни: ты всегда можешь пересмотреть видео, почитать конспекты или обратиться с вопросами к сообществу и куратору в специальном чате в Телеграме. Удачи!

Подготовка к марафону

Убедись, что до начала занятий у тебя настроены все нужные инструменты для работы с кодом и выполнения домашних заданий. Прежде всего скачай Visual Studio Code для той операционной системы, которой пользуешься. Установи програму и запусти ее. Теперь перейдем к загрузке необходимых для работы плагинов внутри VS Code. Вот как это сделать:
  1. В левой боковой панели нажми на иконку Extensions (выглядит как четыре маленьких квадрата).
  2. В верхней части панели Extensions есть поле для поиска. Введи название нужного плагина.
  3. Найди нужное расширение (плагин) в результатах поиска и нажми на кнопку Install (Установить).
Ты также можешь использовать комбинацию клавиш Ctrl + Shift + X, чтобы быстро открыть вкладку Extensions.
Вот какие расширения нам понадобятся:
  • Prettier – Code Formatter: автоматически форматирует код, делая его аккуратным и читабельным. Prettier поддерживает множество языков программирования и настроек форматирования, что обеспечивает единый стиль кода в твоем проекте.
  • HTML CSS Support: улучшает работу с HTML и CSS в Visual Studio Code. Он помогает автодополнениями и подсказками для HTML и CSS, поэтому тебе будет удобнее и быстрее писать код.
  • Formatting Toggle: позволяет легко включать и выключать автоматическое форматирование кода.
Теперь все готово!

Конспект к занятию #1

На этом занятии мы познакомились с Figma — онлайн-сервисом для совместной работы над дизайном интерфейсов и прототипирования. Он позволяет дизайнерам создавать и редактировать макеты сайтов, приложений и других дизайнерских продуктов прямо в браузере. Наш макет соцсети для домашних любимцев собран в Figma. Чтобы начать работу над домашним заданием, не забудь:
  • зарегистрироваться в Figma
  • установить и подключить плагин Inspect Styles для отображения стилей в макете
  • скопировать макет страницы
  • само собой, открыть Visual Studio Code и приступить к написанию первого кода!

Ключевые понятия, которые стоит знать

HTML (HyperText Markup Language) — язык разметки, который используется для создания структурных элементов веб-страниц. Он позволяет добавлять тексты, изображения, ссылки и другие элементы на веб-страницу. HTML — это что-то вроде чертежа автомобиля, который определяет (размечает), где и что будет находиться. CSS (Cascading Style Sheets) – язык стилей, который используется для оформления и дизайна веб-страниц. С его помощью можно изменять цвета, шрифты, размеры и расположение элементов на странице. CSS делает сайт красивее. Представь, что CSS – это “краска” и декор для автомобиля, которые делают его красивым. Конспект к марафону “Frontend с нуля”: создаем соцсеть для домашних любимцев - 1 Теги в HTML – это специальные маркеры, которые используются для создания и организации элементов веб-страницы. Они указывают браузеру, как отображать текст, изображения и другие элементы. Теги заключаются в угловые скобки, например, <tagname>. Конспект к марафону “Frontend с нуля”: создаем соцсеть для домашних любимцев - 2 Вот несколько основных тегов в HTML:
  • <h1>...<h6> – теги заголовков, где <h1> – самый крупный заголовок, а <h6> – самый мелкий.
  • <p> – тег абзаца, используется для создания текстовых блоков.
  • <a> – тег ссылки, используется для создания гиперссылок.
  • <img> – тег изображения, используется для добавления изображений на страницу.
  • <div> – тег блока, используется для группировки элементов и создания контейнеров.
  • <span> — тег для выделения части текста или другого содержимого внутри элемента без изменения его внешнего вида.
Пример:
HTML

      <h1>Главный заголовок страницы</h1>
      <h2>Подзаголовок уровня 2</h2>
      <h3>Подзаголовок уровня 3</h3>
      <p>Это первый параграф текста. Он содержит некоторое количество информации.</p>
      <p>Это второй параграф текста. Он отделен от первого параграфа.</p>
      <p><a href="https://www.example.com" target="_blank">Ссылка на Example.com</a></p>
    

Правила оформления HTML-тегов

1. Открывающий и закрывающий теги: у большинства HTML-тегов есть открывающий тег и закрывающий тег. Скажем, <p> — открывающий тег для абзаца, а </p> — закрывающий тег для его завершения. Контент располагается между этими тегами. Пример:
HTML

      <p>Это первый параграф текста. Он содержит некоторое количество информации.</p>
      <p>Это второй параграф текста. Он отделен от первого параграфа.</p>
    
2. Некоторые теги одиночные: в некоторых тегах закрывающий тег не нужен. К ним относятся <img> для изображений и <br> для переноса строки.
  • src — указывает путь к изображению
  • alt — описывает изображение, что полезно для поисковых систем и для случаев, когда изображение не может быть загружено
Пример:

      <img data-max-width="512" data-id="edb57226-1285-4ee4-b02e-616fabfedeb1" src="https://cdn.javarush.com/images/article/edb57226-1285-4ee4-b02e-616fabfedeb1/512.jpeg" alt="example image">
HTML

      <img src="cat.jpg" alt="Описание изображения">
3. Атрибуты тегов: теги могут содержать атрибуты, которые предоставляют дополнительную информацию. Атрибуты пишутся внутри открывающего тега и заключаются в кавычки. Тег <a> используется для создания гиперссылок. Пример:
HTML

      <a href="https://www.example.com" target="_blank">Перейти на Example.com</a>
4. Правильная вложенность тегов: убедись, что теги правильно вложены друг в друга и не пересекаются. Правильный пример:

<div>
   <p>Абзац внутри блока div.</p>
</div>
Не правильный пример:

<div>
   <p>Абзац внутри блока div.</div>
</p>

Создание нового проекта в Visual Studio Code

Напомним, как создать проект в VS Code, с которым ты будешь работать на протяжении нескольких дней марафона:
  1. Создай папку для проекта: это можно сделать где угодно, хоть и на рабочем столе — для удобства.
  2. Запусти Visual Studio Code.
  3. Открой папку проекта в VS Code:
    • нажми File (Файл) -> Open Folder... (Открыть папку...).
    • выбери созданную папку и нажмите Select Folder (Выбрать папку).
    • ИЛИ перетащи папку прямо с рабочего стола в VS Code.
  4. Создай новый файл: нажми правой кнопкой мыши в области Explorer (Проводник) и выбери New File (Новый файл). Дай имя новому файлу: index.html.
Все готово — можно писать код.

Базовая структура проекта

Когда ты создаешь новый файл в Visual Studio Code и используеешь Emmet для генерации базовой HTML-структуры, появляется что-то вроде этого:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
Не будем уходить в дебри объяснений, но все же пройдемся по основным элементам этой структуры:
  • <!DOCTYPE html>: определяет тип документа как HTML5.
  • <html lang="en">: начало HTML-документа и указание языка контента (в данном случае английский).
  • <head>: секция документа, где размещаются метаданные, такие как кодировка символов, параметры просмотра и заголовок страницы.
  • <meta charset="UTF-8">: указывает кодировку символов, чтобы обеспечить правильное отображение текста.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: настраивает отображение страницы на мобильных устройствах.
  • <title>Document</title>: заголовок страницы, который отображается в браузере.
  • <body>: основная часть документа, где размещается весь видимый контент страницы.
Именно с такой базовой структуры начинается создание веб-страницы.

Домашнее задание №1

  1. Сделать свою копию макета в онлайн-редакторе Figma и создать новый проект в Visual Studio Code.
  2. Перенести в проект несколько блоков текста со страницы:
    • Имя (заголовок страницы, <H1>)
    • Блоки “Обо мне”, “Мой хозяин” и приветственный текст
    • Задача со звездочкой: добавить в проект блок “Любимые игры”

Конспект к занятию #2

На этом занятии мы продолжили работу с HTML-версткой и перенесли весь текстовый контент страницы (с основного блока и сайдбара) к себе в проект. Большинство нужной для этой задачи теории мы уже раскрыли в конспекте к первому занятию, однако появились новые теги, о которых тебе стоит знать.

Как структурировать контент на веб-странице

Для нашего проекта нам понадобится всего 2 тега:

<main>

Тег <main> используется для обозначения основного содержимого веб-страницы. Этот тег содержит главную информацию, уникальную для данной страницы, исключая такие элементы, как боковые панели, меню навигации, футеры и т.д. В документе должен быть только один тег <main>. В нашем проекте — это основная информация, включая имя, контакты, приветствие, любимые игры, достижения, прочее.

<aside>

Тег <aside> используется для обозначения дополнительного содержимого, которое связано с основным, но не является его частью. Обычно это боковые панели с дополнительной информацией, рекламу, ссылки на связанные материалы и т.п. В нашем проекте — это сайдбар (боковая панель) с фотографией профиля, друзьями и интересами.

Как оформить списки в HTML

1. Нумерованный список <ol>:
  • Используется для создания упорядоченного списка.
  • Каждый элемент списка внутри <ol> отмечается тегом <li>.
Пример:
HTML

<ol>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ol>
2. Маркированный список <ul>:
  • Используется для создания неупорядоченного списка.
  • Каждый элемент списка внутри <ul> отмечается тегом <li>.
Пример:
HTML

<ul>
    <li>Пункт первый</li>
    <li>Пункт второй</li>
    <li>Пункт третий</li>
</ul>

Описание тегов

  • <ol> (ordered list): этот тег используется для создания нумерованного списка. Элементы внутри нумерованного списка идут последовательно, начиная с номера 1.
  • <ul> (unordered list): этот тег используется для создания маркированного (неупорядоченного) списка. Элементы в таком списке отмечаются маркерами (точками).
  • <li> (list item): тег для обозначения элементов списка, используемый внутри <ol> и <ul>.

Как оформить контактную информацию в HTML

Как сделать кликабельный email-адрес

Для создания кликабельного email-адреса используют тег <a> с атрибутом href, который начинается с mailto: и указывает на нужный email-адрес. Пример:
HTML

<a href="mailto:example@example.com">Написать нам</a>

Как сделать кликабельный номер телефона

Для этой цели используют тег <a> с атрибутом href, который начинается с tel: и указывает на нужный номер телефона. Пример:
HTML

<a href="tel:+1234567890">Позвонить нам</a>

Описание тегов

  • <a> используется для создания гиперссылок. Атрибут href указывает на адрес, на который должна вести ссылка.
  • протокол mailto: используется в атрибуте href тега <a> для создания кликабельных email-адресов.
  • протокол tel: используется в атрибуте href тега <a> для создания кликабельных номеров телефона.

Как добавить изображение в HTML

Добавить изображение в HTML верстке можно с помощью тега <img>. Это одиночный (самозакрывающийся) тег, которому нужно несколько атрибутов для корректного отображения изображения. Вот основные атрибуты, которые используются для вставки изображения:
  • src: указывает путь к файлу изображения.
  • alt: альтернативный текст, который отображается, если изображение не может быть загружено. Также полезен для улучшения доступности веб-сайта.
  • width и height (опционально): задают размеры изображения.
Пример:

    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
HTML

      <img src="images/sunset.jpg" alt="Фотография красивого заката" width="800" height="500">

Описание атрибутов

  1. src: указывает URL или путь к изображению. Это может быть относительный или абсолютный путь.
    Пример: src="images/photo.jpg"
  2. alt: текстовое описание изображения, которое будет отображаться, если изображение не загрузится. Важно для доступности и SEO.
    Пример: alt="Красивый пейзаж"
  3. width и height: задают размеры изображения в пикселях. Эти атрибуты опциональны.
    Пример: width="800" и height="500"

Как оформить комментарий к коду

Тут все просто — воспользуйтся нужной комбинацией клавиш. Горячие клавиши для комментариев в Visual Studio Code:
  1. Для Windows/Linux:
    • Однострочный комментарий: Ctrl + /
    • Многострочный комментарий: выдели текст и нажми Ctrl + Shift + /
  2. Для Mac:
    • Однострочный комментарий: Cmd + /
    • Многострочный комментарий: выдели текст и нажми Cmd + Option + /

Домашнее задание №2

  1. Повторить все, что сделал ментор на занятии:
    • добавить в проект текст основного блока страницы, а также сайдбара
    • добавить в сайдбаре картинку профиля и картинку с друзьями
  2. Самостоятельно доверстать пункты 2 и 3 в блоке “Достижения”.
  3. Самостоятельно добавить блок “Любимое угощение в проект.

Конспект к занятию #3

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

Что такое CSS стили

CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида HTML-документов. С его помощью можно задавать цвет текста, размер шрифтов, расположение элементов на странице и многое другое.

Как добавить CSS стили в проект в Visual Studio Code

Повторим теорию с занятия. Чтобы добавить CSS стили в свой проект, выполни такие шаги:
  1. Создай новый файл CSS:
    • щелкни правой кнопкой мыши на папке вашего проекта.
    • выбери "New File" и назови его styles.css.
  2. Подключи CSS файл к HTML:
    • открой свой HTML файл – файл с твоим проектом. В нашем случае — index.html.
    • вставь следующую строку внутри тега <head>:<link rel="stylesheet" href="styles.css"> — начни писать link, с остальным поможет автодополнение.
  3. Начни писать CSS код.
Открой styles.css и добавь стили. Например:

css
body {
  background-color: lightblue;
}
h1 {
  color: darkblue;
  text-align: center;
}
Теперь при открытии HTML страницы в браузере ты увидишь стили, которые применили в styles.css.

Как задавать CSS стили для класса

Чтобы задать CSS стили для класса, нужно использовать селектор класса в вашем CSS файле. Селектор класса начинается с точки (.), за которой следует имя класса. Возьмем класс wrapper, который мы создали в проекте, и зададим для него некоторые стили. У тебя есть следующий HTML элемент:

<div class="wrapper">
  Содержимое обертки
</div>
Теперь мы можем определить стили для класса wrapper в твоем CSS файле styles.css. Например (в примере параметры случайные, не из нашего макета):

css
.wrapper {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
Вот что эти стили делают:
  • width: 80%; — ширина контейнера составляет 80% от ширины родительского элемента.
  • margin: 0 auto; — горизонтальные отступы автоматически центрируют контейнер на странице.
  • padding: 20px; — внутренние отступы внутри контейнера.
  • background-color: #f0f0f0; — светло-серый фон контейнера.
  • border: 1px solid #ccc; — рамка толщиной 1 пиксель серого цвета.
  • border-radius: 10px; — скругленные углы рамки.
  • box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); — тень под контейнером для создания эффекта объема.

Домашнее задание #3

Применить все нужные стили, повторяя действия за ментором:
  • разделить контент на сайдбар и основную часть страницы
  • добавить нужные отступы в сайдбаре и основной части страницы
  • сделать цвет фона в сайдбаре в соответствии с макетом
  • оформить кнопки в сайдбаре (расположение одна под другой, отступы
  • установить нужные шрифты с помощью Google Fonts

Конспект к занятию #4

На этом занятии мы дорабатывали имплементацию CSS стилей в соответствии с макетом: добавляли нужный цвет бекграунда страницы, прописывали нужные отступы между сайдбаром и основной частью страницы, копировали стили для кнопок в сайдбаре и контента раздела “Интересы”. Тебе уже знакома вся необходимая база теории на данный момент марафона, так что сфокусируйся на оттачивании использования CSS стилей в вашем проекте. Если выполнишь все действия за ментором, получишь готовый сайдбар, как на макете.

Домашнее задание #4

  1. Повторить все действия за ментором:
  2. добавить стили кнопкам
  3. расставить нужные отступы между сайдбаром и основным блоком, между разделами сайдбара
  4. Закончить оформление блока "Интересы"

Конспект к занятию #5

На этом занятии мы закончили применение всех стилей к основному блоку страницы. Если все сделаешь правильно, твой проект будет вылядеть в точности как макет!
При выполнении домашнего задания обрати особое внимание на выравнивание контента в блоках.
info-box и info-value — это классы, которые часто используются в веб-разработке для структурирования и стилизации информационных блоков на странице. Info-box: этот класс обычно используется для обертки информационного блока. Он может содержать текст, изображения и другие элементы, связанные с определенной информацией. Пример: HTML:

<div class="info-box">
  <div class="info-value">42</div>
  <div class="info-label">Ответ на вопрос</div>
</div>
CSS:

.info-box {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
}
Info-value: этот класс используется для стилизации значений внутри информационного блока. Это может быть число, текст или другой элемент, который представляет собой важное значение. Пример CSS:

.info-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}
В этом примере элемент с классом info-box будет содержать значение и метку, стилизованные соответственно.

Домашнее задание #5

  1. Повторить все действия за ментором:
    • оформить информацию в блоках основной части страницы в соответствии с макетом
    • доработать все необходимые отступы в основной части страницы
    • проверить соответствие стилей шрифтов макету
  2. Самостоятельно добавить стили для третьего пункта в блоке “Достижения” и в последнем блоке на основной странице – “Любимое угощение”.

Конспект к занятию #6

Поздравляем! Твой проект готов, и осталась только одна небольшая деталь — залить готовую страничку онлайн. Для этого используй Netlify: платформу для разработки и размещения веб-приложений и сайтов. Не забудь зарегистрироваться на платформе и повторить все действия за ментором. Всего несколько минут — и твой проект в онлайне, и ты сможешь поделиться ссылкой на результаты своих трудов с кем угодно!

Домашнее задание №6

Залить готовый проект на онлайн-хостинг с помощью сервиса Netlify. Надеемся, тебе понравился наш Frontend-марафон, и этот проект станет первым из множества, над которым ты будешь работать!

Если тебя заинтересовала HTML/CSS верстка, и ты хояешь пойти дальше в изучении фронтенда, приглашаем учиться вместе с JavaRush на курсе по Frontend-разработке.

Пройти путь с нуля до Middle-разработчика в течение года — реально!