Привет! Марафон по основам frontend-разработки стартовал: желаем успехов в первых шагах в программировании и надеемся, тебе понравится свой результат работы!
Здесь ты найдешь подсказки и "шпаргалки" к материалу, который изучаешь на занятиях. Они будут полезны для выполнения домашних заданий.
Помни: ты всегда можешь пересмотреть видео, почитать конспекты или обратиться с вопросами к сообществу и куратору в специальном чате в Телеграме. Удачи!
Вот какие расширения нам понадобятся:
Теги в HTML – это специальные маркеры, которые используются для создания и организации элементов веб-страницы. Они указывают браузеру, как отображать текст, изображения и другие элементы. Теги заключаются в угловые скобки, например,
Вот несколько основных тегов в HTML:
2. Некоторые теги одиночные: в некоторых тегах закрывающий тег не нужен. К ним относятся
3. Атрибуты тегов: теги могут содержать атрибуты, которые предоставляют дополнительную информацию. Атрибуты пишутся внутри открывающего тега и заключаются в кавычки.
Тег
4. Правильная вложенность тегов: убедись, что теги правильно вложены друг в друга и не пересекаются.
Правильный пример:
Тег
Тег
2. Маркированный список
info-box и info-value — это классы, которые часто используются в веб-разработке для структурирования и стилизации информационных блоков на странице.
Info-box: этот класс обычно используется для обертки информационного блока. Он может содержать текст, изображения и другие элементы, связанные с определенной информацией.
Пример:
HTML:
- Подготовка к марафону
- Конспект к занятию #1
- Конспект к занятию #2
- Конспект к занятию #3
- Конспект к занятию #4
- Конспект к занятию #5
- Конспект к занятию #6
Подготовка к марафону
Убедись, что до начала занятий у тебя настроены все нужные инструменты для работы с кодом и выполнения домашних заданий. Прежде всего скачай Visual Studio Code для той операционной системы, которой пользуешься. Установи програму и запусти ее. Теперь перейдем к загрузке необходимых для работы плагинов внутри VS Code. Вот как это сделать:- В левой боковой панели нажми на иконку Extensions (выглядит как четыре маленьких квадрата).
- В верхней части панели Extensions есть поле для поиска. Введи название нужного плагина.
- Найди нужное расширение (плагин) в результатах поиска и нажми на кнопку 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 – это “краска” и декор для автомобиля, которые делают его красивым.
<tagname>
.

<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>
<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="Описание изображения">
<a>
используется для создания гиперссылок.
Пример:
HTML
<a href="https://www.example.com" target="_blank">Перейти на Example.com</a>
<div>
<p>Абзац внутри блока div.</p>
</div>
Не правильный пример:
<div>
<p>Абзац внутри блока div.</div>
</p>
Создание нового проекта в Visual Studio Code
Напомним, как создать проект в VS Code, с которым ты будешь работать на протяжении нескольких дней марафона:- Создай папку для проекта: это можно сделать где угодно, хоть и на рабочем столе — для удобства.
- Запусти Visual Studio Code.
- Открой папку проекта в VS Code:
- нажми File (Файл) -> Open Folder... (Открыть папку...).
- выбери созданную папку и нажмите Select Folder (Выбрать папку).
- ИЛИ перетащи папку прямо с рабочего стола в VS Code.
- Создай новый файл: нажми правой кнопкой мыши в области 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
- Сделать свою копию макета в онлайн-редакторе Figma и создать новый проект в Visual Studio Code.
- Перенести в проект несколько блоков текста со страницы:
- Имя (заголовок страницы, <H1>)
- Блоки “Обо мне”, “Мой хозяин” и приветственный текст
- Задача со звездочкой: добавить в проект блок “Любимые игры”
Конспект к занятию #2
На этом занятии мы продолжили работу с HTML-версткой и перенесли весь текстовый контент страницы (с основного блока и сайдбара) к себе в проект. Большинство нужной для этой задачи теории мы уже раскрыли в конспекте к первому занятию, однако появились новые теги, о которых тебе стоит знать.Как структурировать контент на веб-странице
Для нашего проекта нам понадобится всего 2 тега:<main>
Тег <main>
используется для обозначения основного содержимого веб-страницы. Этот тег содержит главную информацию, уникальную для данной страницы, исключая такие элементы, как боковые панели, меню навигации, футеры и т.д. В документе должен быть только один тег <main>
.
В нашем проекте — это основная информация, включая имя, контакты, приветствие, любимые игры, достижения, прочее.
<aside>
Тег <aside>
используется для обозначения дополнительного содержимого, которое связано с основным, но не является его частью. Обычно это боковые панели с дополнительной информацией, рекламу, ссылки на связанные материалы и т.п.
В нашем проекте — это сайдбар (боковая панель) с фотографией профиля, друзьями и интересами.
Как оформить списки в HTML
1. Нумерованный список<ol>
:- Используется для создания упорядоченного списка.
- Каждый элемент списка внутри
<ol>
отмечается тегом<li>
.
HTML
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
<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">
Описание атрибутов
src:
указывает URL или путь к изображению. Это может быть относительный или абсолютный путь.
Пример:src="images/photo.jpg"
alt:
текстовое описание изображения, которое будет отображаться, если изображение не загрузится. Важно для доступности и SEO.
Пример:alt="Красивый пейзаж"
width
иheight
: задают размеры изображения в пикселях. Эти атрибуты опциональны.
Пример:width="800"
иheight="500"
Как оформить комментарий к коду
Тут все просто — воспользуйтся нужной комбинацией клавиш. Горячие клавиши для комментариев в Visual Studio Code:- Для Windows/Linux:
- Однострочный комментарий: Ctrl + /
- Многострочный комментарий: выдели текст и нажми Ctrl + Shift + /
- Для Mac:
- Однострочный комментарий: Cmd + /
- Многострочный комментарий: выдели текст и нажми Cmd + Option + /
Домашнее задание №2
- Повторить все, что сделал ментор на занятии:
- добавить в проект текст основного блока страницы, а также сайдбара
- добавить в сайдбаре картинку профиля и картинку с друзьями
- Самостоятельно доверстать пункты 2 и 3 в блоке “Достижения”.
- Самостоятельно добавить блок “Любимое угощение в проект.
Конспект к занятию #3
На этом занятии мы познакомились с CSS-стилями, узнали, как их добавлять в наш проект, чтобы сделать его красивее. Также мы подключали нужные шрифты, чтобы проект стал более похожим на макет.Что такое CSS стили
CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида HTML-документов. С его помощью можно задавать цвет текста, размер шрифтов, расположение элементов на странице и многое другое.Как добавить CSS стили в проект в Visual Studio Code
Повторим теорию с занятия. Чтобы добавить CSS стили в свой проект, выполни такие шаги:- Создай новый файл CSS:
- щелкни правой кнопкой мыши на папке вашего проекта.
- выбери "New File" и назови его styles.css.
- Подключи CSS файл к HTML:
- открой свой HTML файл – файл с твоим проектом. В нашем случае — index.html.
- вставь следующую строку внутри тега
<head>
:<link rel="stylesheet" href="styles.css">
— начни писать link, с остальным поможет автодополнение.
- Начни писать 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
- Повторить все действия за ментором:
- добавить стили кнопкам
- расставить нужные отступы между сайдбаром и основным блоком, между разделами сайдбара
- Закончить оформление блока "Интересы"
Конспект к занятию #5
На этом занятии мы закончили применение всех стилей к основному блоку страницы. Если все сделаешь правильно, твой проект будет вылядеть в точности как макет!При выполнении домашнего задания обрати особое внимание на выравнивание контента в блоках. |
<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
- Повторить все действия за ментором:
- оформить информацию в блоках основной части страницы в соответствии с макетом
- доработать все необходимые отступы в основной части страницы
- проверить соответствие стилей шрифтов макету
- Самостоятельно добавить стили для третьего пункта в блоке “Достижения” и в последнем блоке на основной странице – “Любимое угощение”.
Конспект к занятию #6
Поздравляем! Твой проект готов, и осталась только одна небольшая деталь — залить готовую страничку онлайн. Для этого используй Netlify: платформу для разработки и размещения веб-приложений и сайтов. Не забудь зарегистрироваться на платформе и повторить все действия за ментором. Всего несколько минут — и твой проект в онлайне, и ты сможешь поделиться ссылкой на результаты своих трудов с кем угодно!Домашнее задание №6
Залить готовый проект на онлайн-хостинг с помощью сервиса Netlify. Надеемся, тебе понравился наш Frontend-марафон, и этот проект станет первым из множества, над которым ты будешь работать!Если тебя заинтересовала HTML/CSS верстка, и ты хояешь пойти дальше в изучении фронтенда, приглашаем учиться вместе с JavaRush на курсе по Frontend-разработке. Пройти путь с нуля до Middle-разработчика в течение года — реально! |
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ