https://pastein.ru/t/Z8p
Загрузка данных
FRONTEND -
РАЗРАБОТКА
СПО 3 курс
ROAD-MAP КУРСА FRONTEND-РАЗРАБОТКА
ЧТО ТАКОЕ HTML
H TML язы к ра зм ет к и г и п ертекста H TM L
Чтобы создать страницу в интернете, разработчик Язык для создания web-страниц. С его помощью мы
должен уметь общаться с браузером. HTML – это объясняем браузеру, где и какие элементы должны
инструмент, как язык общения между находится на странице
разработчиком и браузером.
То, что мы хотим рассказать пользователю на
странице – это КОНТЕНТ. Но, чтобы его разместить
на странице браузеру нужно объяснить структуру:
рассказать про заголовки, про расположение текста
и рисунков и т.п.
ЧТО ТАКОЕ HTML
ИС ТОР ИЯ HTM L H T M L 5 : С о в р е м е н н ы й с т а н д а рт
HTML был создан в конце 1980-х годов Тимом HTML5, выпущенный в 2014 году, стал новым
Бернерс-Ли, британским ученым, работающим в стандартом для веб-разработки. Он добавил
ЦЕРН (Европейская организация по ядерным множество новых элементов и API, таких
исследованиям). В то время учёные нуждались в как <video>, <audio>, <canvas>, а также улучшил
способе обмена документами и информацией через поддержку мультимедийных и графических
интернет. Бернерс-Ли предложил использовать элементов. HTML5 также сделал акцент на
гипертекст для связывания документов, что стало семантической разметке, что улучшило доступность
основой для создания HTML. Его идея заключалась и SEO.
в том, чтобы создать язык разметки, который
позволял бы связывать документы с помощью http://info.cern.ch/hypertext/WWW/TheProject.html
гиперссылок, делая информацию более доступной
и связанной.
РАЗМЕТКА СТРАНИЦЫ
ЭТО ФУНДАМЕНТ ВСЕХ ВЕБ-САЙТОВ. БЕЗ
ПРАВИЛЬНОГО ПОНИМАНИЯ ТОГО КАК СТРОИТСЯ
РАЗМЕТКА НЕВОЗМОЖНО СДЕЛАТЬ ХОРОШИЙ
САЙТ, КОТОРЫЙ БУДЕТ ПОНЯТЕН И ПОЛЬЗОВАТЕЛЮ
И БРАУЗЕРУ.
СИНТАКСИС ТЕГОВ
С и н таксис HTM L H TM L п ра в ила за п и с и тего в
Это набор правил как нужно писать код. Используя
правильный синтаксис браузер (любой) будет
понимать код и правильно располагать и
отображать элементы.
Теги являются основой синтаксиса языка.
Объединение тега и содержимого (контента)
называется html-элементом.
Большинство тегов парные, т.е. Имеют
закрывающийся тег.
СИНТАКСИС ТЕГОВ
С и н таксис HTM L . А т р и б у ты Тег i m g с од н и м а т р и бу том
Дополнительная надстройка для тегов, которая Тег < img> предназначен для отображения на веб-
подсказывает браузеру, как правильно должен странице изображений в графическом формате GIF,
отработать тег. JPEG или PNG.
СИНТАКСИС ТЕГОВ
Тег i m g с н еско л ьким и а т р и бу там и
В теге < img> атрибуты width=”” и height=”” отвечают за ширину и высоту изображения.
Атрибуты можно располагать в любом порядке.
Важно – тип атрибута. Например, src – это только ссылка, а width – число. Если указать значение
атрибута неверного типа, то браузер его просто не выполнит.
ВЛОЖЕННЫЕ ТЕГИ
П р и м е р с т р у к т у р ы H T M L - с т ра н и ц ы К о д н а я з ы ке р а з м е т к и H T M L
Тег <ul></ul> используется для группировки
ненумерованных элементов.
Тег <li></li> задает элемент списка
Caninclude — онлайн-инструмент, который проверяет возможность вложения одного тега в
другой.
КОММЕНТАРИИ В HTML-КОДЕ
К о м м ен т ари и в ht ml -код е
Комментарии в HTML – это небольшие заметки, невидимые для пользователя сайта, которые
разработчик может оставить при написании кода.
Горячие клавиши для комментирования/раскомментирования части кода.
1. Выдели код, который нужно закомментировать (или наоборот)
2. Нажми ctrl+/
CODEPEN
Главная страница онлайн-
редактора «CodePen»
ЗАДАНИЕ 1.
1. Зарегистрируйтесь в codepen.io
2. Создайте свой первый pen и сохраните его под именем pen_1
3. Посмотрите вкладку Your Work
4. Откройте вкладку Trending. Выберите любую работу и
скопируйте ее себе (используйте Fork this Pen) и сохраните ее
под любым именем
5. Поделитесь ссылкой на работу. Нажмите на кнопку Share и
выберите Copy Link
6. Скопированную ссылку поместите в качестве ответа к
заданию в https://eos.bgitu.ru/
СОЗДАНИЕ HTML-ДОКУМЕНТА
Из этого м а тер и ала в ы у зн а ете:
• как создать первую HTML-страницу,
• как посмотреть её отображение в браузере,
• как превратить обычные текстовые файлы в настоящие HTML -страницы
Смотри инструкцию по ссылке: https://disk.yandex.ru/i/n6h4GI-vA4BBFA
КАРКАСНЫЕ ТЕГИ
К а р к асные тег и H TM L H TM L
С помощью каркасных тегов мы формируем структуру
страницы. Внутри них мы располагаем html-элементы.
Важен порядок расположения каркасных тегов.
Все, что внутри head – это не отображается в браузере.
Все, что записано внутри body – это то, что видит
пользователь.
!Doctype html – инструкция браeзеру, что перед ним документ,
написанный на языке html
html – родительский тег, обрамляющий, создающий каркас
всей страницы.
БАЗОВЫЕ ТЕГИ ТЕКСТОВЫХ БЛОКОВ
Б а зо в ые тег и текс тов ых б л о ко в H TM L H TM L
Большее количество информации на странице сайта – это
текст.
В языке разметки HTML есть набор тегов для работы с текстом:
теги заголовков, параграфы
Статья Skillbox: «Кто такой фронтенд-разработчик и как им стать»
CODEPEN
ЗАДАНИЕ 2.
1. Зайдите в онлайн-редактор кода CodePen.
2. Создайте заголовок первого уровня с текстом «Добро
пожаловать в мир HTML-тегов».
3. Создайте параграф с текстом «Тег — это специальное
служебное слово, заключённое в угловые скобки. Его ещё
называют элементом HTML».
4. Создайте заголовок второго уровня с текстом «Элементы
страницы».
5. Создайте нумерованный список из трёх пунктов —
«Заголовки», «Параграфы» и «Списки».
6. В третий пункт списка вложите ненумерованный список из двух
пунктов — «Нумерованный список» и «Ненумерованный
список».
7. Поделитесь ссылкой на работу. Нажмите на кнопку Share и
выберите Copy Link
8. Скопированную ссылку поместите в качестве ответа к
заданию 2 в https://eos.bgitu.ru/
СПАСИБО!
В ы п о лняйте в с е за д а ния в
ус т а н ов ленн ый с р о к ,
с а м о с то ятельно !
То л ько т а к м ож н о п о л у чи ть зн а н и я
и у мения в пр о цессе о б у чения!
FRONTEND -
РАЗРАБОТКА
СПО 3 курс
ПОДСК ЛЮЧЕНИЕ ШРИФТОВ С ВНЕШНИХ ИСТОЧНИКОВ
ПОДК ЛЮЧЕНИЕ ШРИФТОВ С ВНЕШНИХ ИСТОЧНИКОВ
Подключение шрифтов с
помощью Google Fonts
Самый известный и
популярный сайт с
нестандартными шрифтами —
Google Fonts.
Это бесплатный сервис с
обширной библиотекой
шрифтов, которые можно
подключить к своему проекту
без необходимости
скачивания или хранения
файлов на своём устройстве.
На гифке показано пошагово,
как добавить шрифт из
Google Fonts в свой проект.
Этот способ вы сможете без
труда повторить
самостоятельно.
ЧТО ТАКОЕ CSS
CSS – каскадная таблица стилей. Это некоторый свод правил, который рассказывает как будет выглядеть веб -
страница.
Html – каркас дома. Css – дизайн, внутренняя отделка.
Красочный сайт - https://unikorns.agency/
СИНТАКСИС CSS
В css для описания правил, как будет выглядеть элемент используют СВОЙСТВА и их ЗНАЧЕНИЯ.
Свойство определяет то, что мы будем менять у элемента – это может быть шрифт, цвет элемента, и т.п.
Значение указывает на то, что будет присвоено свойству. Например, менять цвет – зеленый – это значение.
Свойства и значения друг от друга отделяются двоеточием, а пары между собой разделяются ;
Для одного элемента часто используются несколько свойств, их объединяют в фигурные скобки.
Селектор – это элемент на странице html для которого мы
задаем свойства.
В примере селектор h1 выбирает все заголовки первого
уровня на странице и для них применяет свойства:
Размер шрифта – 20 px
Цвет текста - красный
СИНТАКСИС CSS
В примере селектор p выбирает все параграфы на странице
и для них применяет свойства:
Цвет текста – серый
Размер шрифта – 12 px
Селектор + блок кода, в котором описаны свойства и значения = CSS правило для элемента
Когда мы занимаемся стилизацией, наша задача сформировать CSS правила, чтобы сделать сайт красивым и удобным.
СИНТАКСИС CSS
ВВЕ ДЕНИЕ В КАСКА ДНОСТЬ И СЕ ЛЕКТОРЫ CSS
КАСКА ДНОСТЬ – это порядок.
Когда несколько одинаковых правил применяется к одному
элементу, то выполнится последний.
ВВЕ ДЕНИЕ В КАСКА ДНОСТЬ И СЕ ЛЕКТОРЫ CSS
СЕЛЕКТОР – это способ выбора определенного
элемента на странице html, чтобы к нему применить
стили.
СЕЛЕКТОРЫ по тегу – это когда имя тега = имя
селектора. На странице для всех одинаковых тегов
будут применены одинаковые правила css.
СЕЛЕКТОРЫ по классу – это когда нам нужно только
для конкретных html – элементов применить какие-то
правила.
Атрибут class – это некоторая метка, благодаря
которой можно выбрать конкретные элементы, чтобы
стилизовать.
Если нужно применить правила стилизации такие как Чтобы создать правила для СЕЛЕКТОРА по классу, нужно перед
уже описаны, то можно в разметке html просто для названием СЕЛЕКТОРА по классу ставить точку.
нужного элемента добавить нужный class и
применятся свойства. Точка – это указатель, что СЕЛЕКТОР по классу
ВЛОЖЕННЫЕ СЕ ЛЕКТОРЫ CSS
Вложенность – это особенность css. Позволяет
гибко и структурированно писать код.
Вложенные селекторы пишем через пробел.
Благодаря вложенным селекторам можем
указывать на взаимоотношения между
родительским и вложенным элементами на
странице.
Применяем правила для всех
элементов li , которые
находятся в блоке с классом
success
Чтобы понимать вложенные селекторы – читать их нужно
СПРАВО – НА ЛЕВО.
НАСЛЕ ДОВАНИЕ В CSS
Наследование позволяет дочерним элементам Пример наследования: определение семейства
принимать все css-свойства их родителей. шрифтов для всей страницы
Это позволяет писать более компактный код.
Наследование происходит только для
определенного набора свойств, которые
разработчики css заложили в этот язык.
В основном это свойства, которые относятся к
визуальному отображению текста.
Посмотреть наследуется свойство или нет можно
на сайте https://www.w3.org/TR/
ШРИФТЫ И ИХ СВОЙТСВА CSS
Font - семейство шрифта. В CSS это свойство
обозначено как font-family (другими словами,
название шрифта).
Weight - толщина (или «жирность») шрифта —
свойство font-weight.
Size - размер шрифта - свойство font-size.
Line-height - значение межстрочного интервала
(высота строки). В стилях это свойство обозначено
как line-height.
Также обратим внимание на свойство letter-spacing -
межбуквенный интервал. Оно встречается гораздо
реже остальных четырёх свойств шрифта.
БАЗОВЫЕ СОКРАЩЕНИЯ В CSS
https://docs.emmet.io/cheat-sheet/ Базовые сокращения для свойств css
СЕМЕЙСТВО, ВЕС И СТИЛЬ ШРИФТА CSS
Font - семейство шрифта. В CSS это
свойство обозначено как font-
family (другими словами, название
шрифта).
СЕМЕЙСТВО, ВЕС И СТИЛЬ ШРИФТА CSS
Font - семейство шрифта. В CSS это
свойство обозначено как font-
family (другими словами, название
шрифта).
При подключении шрифта на страницу
необходимо указать семейство
шрифтов, запасной шрифт (если вдруг
основной не сработает) и тип шрифта.
На сайте
https://www.w3schools.com/cssref/css_we
bsafe_fonts.php можно посмотреть
примеры безопасных шрифтов для веб-
ресурсов
СЕМЕЙСТВО, ВЕС И СТИЛЬ ШРИФТА CSS
Задача 1:
Для всего сайта подключить 2 шрифта: один
для всего текста на сайте, а второй для
заголовка h1.
Для body шрифт "Lora", запасной шрифт
"Garamond", тип шрифта - serif;
Для h1 – основной шрифт "Montserrat",
запасной - "Arial", тип шрифта - sans-serif;
Разметка для выполнения:
https://codepen.io/IlyaRaseh/pen/QwypjQg
ШРИФТЫ И ИХ СВОЙТСВА CSS
Weight - толщина (или «жирность») шрифта -
свойство font-weight.
Задача 2:
Сделать элементы списка жирными.
Посмотреть отличие использование стилей
и применения тегов в html.
Для тега описания картинок во всем
документе применить правило: текст курсив.
Разметка для выполнения:
https://codepen.io/IlyaRaseh/pen/wBMJKXg
РАЗМЕРНЫЕ СВОЙСТВА ШРИФТА И Е ДИНИЦЫ
ИЗМЕРЕНИЯ CSS
Size - размер шрифта - свойство font-size.
Line-height - значение межстрочного интервала
(высота строки). В стилях это свойство обозначено
как line-height. Значение можно задавать абсолютное
– в пикселях и относительное – в процентах.
Свойство letter-spacing - межбуквенный интервал.
Значение указывается в относительных единицах
измерения em, относительно размера шрифта.
ТРАНСФОРМАЦИЯ, ВЫРАВНИВАНИЕ И ДЕКОРИРОВАНИЕ
ТЕКСТА
Выравнивание текста - свойство text-align.
text-transform - регистр букв.
Свойство text-decoration - зачёркивание,
подчеркивание и т.п. декорирование текста.
ЦВЕТ ТЕКСТА , ФОНОВЫЕ ЦВЕТА И ГРА ДИЕНТЫ
ЗАДАНИЕ 1.
Стилизуйте готовую разметку текстового блока статьи «Как защитить деньги на своей банковской карте» для сайта
«Газпромбанка», основываясь на дизайне из предоставленного макета в Figma, и подключите шрифты с внешнего
источника.
Необходимые инструменты:
Макет Figma - https://www.figma.com/design/iMre3dJj2baCkqLn4q4QLN/Газпромбанк---Про-финансы--2-этап-?node-id=13-
751&t=BIoRkvv45JRP8M3A-0
Проект в Codepen - https://codepen.io/IlyaRaseh/pen/pvgegjZ
Шрифты https://fonts.google.com/noto/specimen/Noto+Sans
1. Сделайте fork (копию) проекта в CodePen
2. Откройте макет в Figma и и определите, какие шрифты и начертания используются на странице. В вашей копии проекта
подключите необходимые шрифты в разметку.
3. Стилизуйте содержимое элемента <div class=”text-block”> согласно макету.
Ожидаемые свойства для стилизации: font-family, font-weight, font-style, font-size, line-height, letter-spacing, text-decoration,
text-align, text-transform, color, background-color.
4. Поделитесь ссылкой на свою работу - поместите в качестве ответа к заданию 3 в https://eos.bgitu.ru/
СПАСИБО!
В ы п о лняйте в с е за д а ния в
ус т а н ов ленн ый с р о к ,
с а м о с то ятельно !
То л ько т а к м ож н о п о л у чи ть зн а н и я
и у мения в пр о цессе о б у чения!
Frontend
ЛАБОРАТОРНАЯ РАБОТА 14
Flexbox
Задание 1:
Откройте интерактивную шпаргалку по flexbox и повторите основные свойства flex
https://codepen.io/enxaneta/full/adLPwv
Перейдите по ссылке https://flexboxbouncingfroggy.vercel.app/
Пройдите все уровни интерактивной игры, чтобы закрепить знания о flex
Flexbox
Задание 2:
Откройте ссылку
https://wm-school.ru/tests/flex_test.php
Ответьте на вопросы теста.
Flexbox
ВАЖНО:
Сделайте снимок экрана, подтверждающий прохождение всех уровней игры + снимок экрана,
отражающий результат тестирования.
Загрузите эти 2 картинки в eos.bgitu.ru – это будет являться отчетом о выполнении заданий 1 и 2
Frontend
ЛАБОРАТОРНАЯ РАБОТА 13
Flexbox
Задание:
Создать Неадаптивную страницу с помощью flexbox (страница с фиксированными размерами по
ширине для одного устройства).
Откройте шаблоны в figma.com по ссылке:
https://www.figma.com/design/DHz7GqWvLBrAaow4I7XOfT/Resume-_-CV%E2%80%A8-Templates--
Community-?node-id=0-1&m=dev&t=Lhqcf76HOjiGutPR-1
Определите свой вариант шаблона для верстки (две последние цифры номера вашей зачетной
книжки разделите на 11 и определите остаток от деления – это и есть ваш вариант макета)
Например:
35:11 = 3 целых ….
Как найти остаток?
3*11 = 33
35-33=2
Остаток от деления 2 – это номер варианта.
Flexbox
Задание:
Изучите макет в Figma. Определите родительские и дочерние блоки. Посмотрите расположение
блоков на странице. Подумайте, какие блоки нужно располагать и стилизовать с помощью
технологии flex.
Откройте codepen.io Создайте новый документ. В нем сделайте первый главный блок с классом
container – этот блок будет как рамка, внутри которой вы будете вставлять все остальные блоки.
Т.к. страница по задания НЕАДАПТИВНАЯ – то для этого блока установите ширину (как в макете).
Далее выполните разметку и стилизацию элементов по макету (не забудьте про шрифты,
отступы и т.п.)
Flexbox
Подсказка: как сделать линию с прогрессом?
Самый простой вариант – это блок Эти блоки нужно наложить друг на друга.
div с установленными размерами
ширины и высоты. Родительский блок имеет свойство position:relative
Изначально светло серая заливка. Дочерний блок имеет свойство
position:absolute
Потом внутри него дочерний блок top:0
div – у которого ширина отличается left:0
и заливка темная.
Так элементы будут наложены одни на другой)
FRONTEND -
РАЗРАБОТКА
СПО 3 курс
КОНТРОЛЬНАЯ РАБОТА. Разметка, работа с текстом, работа с div и span.
Сверстайте ТОЛЬКО баннер с подпиской на рассылку новостей для сайта «Газпромбанка».
Если все получилось, то можете сделать верстку и стилизацию карточкек с новостями.
Необходимые инструменты:
Макет Figma – https://www.figma.com/design/y9gjegvEuZ3HJZ4mmWtJKC/Газпромбанк---Доработки-FWEB-3141?node-id=12-
166&t=JhR3dMuk14T9y5rp-0
Проект в Codepen - https://codepen.io/IlyaRaseh/pen/xbVmprQ
Шрифты определите и подключите самостоятельно при необходимости.
1. Сделайте fork (копию) проекта в CodePen
2. Откройте макет Figma и экспортируйте изображения в выделенной области в необходимом формате. Загрузите все
скачанные изображения на хостинг.
3. В своей копии проекта после комментария <!-- Баннер --> создайте разметку информационного баннера, наполните её
контентом из макета и графикой, которую вы уже подготовили и загрузили на хостинг.
4. Найдите список с классом <ul class="news-list"> и внутри каждого элемента списка создайте разметку блока с карточкой
«Новости». Наполните её контентом и графикой из макета, которую вы уже подготовили и загрузили на хостинг. !!!
Внимание, это задание только если вы полнили баннер. Это дополнительное, необязательное.
5. Застилизуйте размеченные информационные блоки согласно макету.
6. Поделитесь ссылкой на свою работу - поместите в качестве ответа к заданию в https://eos.bgitu.ru/
СПАСИБО!
В ы п о лняйте в с е за д а ния в
ус т а н ов ленн ый с р о к ,
с а м о с то ятельно !
То л ько т а к м ож н о п о л у чи ть зн а н и я
и у мения в пр о цессе о б у чения!
FRONTEND -
РАЗРАБОТКА
СПО 3 курс
ЗАДАНИЕ 1.
Доработайте текстовый блок новости для сайта «Паркинг - Достижение»: создайте разметку, наполните её контентом и застилизуйте,
основываясь на дизайне из предоставленного макета в Figma. Также подключите шрифты с внешнего источника.
Необходимые инструменты:
Макет Figma -
https://www.figma.com/design/laZJKAcDCkq3wclouzQEam/%D0%94%D0%BE%D1%81%D1%82%D0%B8%D0%B6%D0%B5%D0%BD%D0%B8%D0
%B5---%D0%92%D1%8B%D0%B4%D0%B0%D1%8E%D1%89%D0%B8%D0%B9%D1%81%D1%8F-%D0%B4%D0%BE%D0%BC-%D1%83-
%D0%B2%D1%8B%D0%B4%D0%B0%D1%8E%D1%89%D0%B8%D1%85%D1%81%D1%8F-
%D0%BF%D0%B0%D1%80%D0%BA%D0%BE%D0%B2?node-id=1-3&t=hZscxh3QuwTogQh0-1
Проект в Codepen - https://codepen.io/IlyaRaseh/pen/ogxgEVv
Шрифты https://fonts.google.com/
Сделайте fork (копию) проекта в CodePen
1. Изучите макет в Figma и определите, какие шрифты и начертания используются на странице. В вашей копии проекта подключите
необходимые шрифты в разметку
2. Экспортируйте изображения из макета Figma в выделенной области в необходимом формате.
3. Загрузите все скачанные изображения iimg.su
4. Создайте разметку внутри элемента <div class=”text-block”> и наполните её текстом из макета и изображениями, которые вы уже
подготовили и загрузили на хостинг.
5. Наполняйте шаблон контентом сверху вниз, начиная с первого элемента (обычно это заголовок или изображение). Далее соотнесите
параграфы, изображения, списки и другие заголовки из макета с подходящими тегами.
6. Стилизуйте содержимое элемента <div class=”text-block”> согласно присланному макету.
Ожидаемые свойства для стилизации: font-family, font-weight, font-style, font-size, line-height, letter-spacing, text-decoration, text-align,
text-transform, color, background-color.
7. Поделитесь ссылкой на свою работу - поместите в качестве ответа к лабораторной работе 8 в https://eos.bgitu.ru/
СПАСИБО!
В ы п о лняйте в с е за д а ния в
ус т а н ов ленн ый с р о к ,
с а м о с то ятельно !
То л ько т а к м ож н о п о л у чи ть зн а н и я
и у мения в пр о цессе о б у чения!
FRONTEND -
РАЗРАБОТКА
СПО 3 курс
ЗАДАНИЕ 1.
Сверстайте текстовый блок новости для сайта дома «Достижение»: создайте разметку, наполните её контентом и застилизуйте, основываясь
на дизайне из предоставленного макета в Figma. Также подключите шрифты с внешнего источника.
Необходимые инструменты:
Макет Figma - https://www.figma.com/design/laZJKAcDCkq3wclouzQEam/Достижение---Выдающийся-дом-у-выдающихся-парков?node-id=1-
2&p=f&t=5AKcKdmR38xUQbgE-0
Проект в Codepen - https://codepen.io/IlyaRaseh/pen/yyeqBod
Шрифты https://fonts.google.com/specimen/Jost
1. Сделайте fork (копию) проекта в CodePen
2. Изучите макет в Figma и определите, какие шрифты и начертания используются на странице. В вашей копии проекта подключите
необходимые шрифты в разметку
3. Экспортируйте изображения из макета Figma в выделенной области в необходимом формате.
4. Загрузите все скачанные изображения iimg.su
5. Создайте разметку внутри элемента <div class=”text-block”> и наполните её текстом из макета и изображениями, которые вы уже
подготовили и загрузили на хостинг.
6. Наполняйте шаблон контентом сверху вниз, начиная с первого элемента (обычно это заголовок или изображение). Далее соотнесите
параграфы, изображения, списки и другие заголовки из макета с подходящими тегами.
7. Стилизуйте содержимое элемента <div class=”text-block”> согласно присланному макету.
Ожидаемые свойства для стилизации: font-family, font-weight, font-style, font-size, line-height, letter-spacing, text-decoration, text-align,
text-transform, color, background-color.
8. Поделитесь ссылкой на свою работу - поместите в качестве ответа к лабораторной работе 7 Dop в https://eos.bgitu.ru/
СПАСИБО!
В ы п о лняйте в с е за д а ния в
ус т а н ов ленн ый с р о к ,
с а м о с то ятельно !
То л ько т а к м ож н о п о л у чи ть зн а н и я
и у мения в пр о цессе о б у чения!
FRONTEND -
РАЗРАБОТКА
СПО 3 курс
ЗАДАНИЕ 1.
Необходимо внутри текстового блока создать разметку страницы статьи «Кешбэк: как всё устроено и в чём выгода» для
сайта «Газпромбанка» и наполнить её текстом и изображениями из предоставленного макета в Figma.
Необходимые инструменты:
Макет Figma -
https://www.figma.com/design/Agi5VlEq5hKGH4qwK8eKuj/%D0%93%D0%B0%D0%B7%D0%BF%D1%80%D0%BE%D0%BC%D0%B
1%D0%B0%D0%BD%D0%BA---%D0%9F%D1%80%D0%BE-%D1%84%D0%B8%D0%BD%D0%B0%D0%BD%D1%81%D1%8B?node-
id=0-1&t=7sHZxjJOzF5C14Ov-1
Проект в Codepen - https://codepen.io/IlyaRaseh/pen/LEGVZwo
1. Сделайте fork (копию) проекта в CodePen
2. Откройте макет в Figma и экспортируйте изображения в выделенной области
3. Загрузите все скачанные изображения на хостинг https://iimg.su/
4. Найдите в своей копии проекта элемент <div class=”text-block”>
5. Последовательно создайте разметку внутри элемента <div class=”text-block”> и наполните её текстом из макета и
изображениями, которые вы подготовили и загрузили на хостинг
Создавать разметку лучше сверху вниз, начиная с первого элемента (обычно это заголовок или изображение). Далее
необходимо соотнести параграфы, изображения, списки и другие заголовки из макета с подходящими для них тегами.
6. Поделитесь ссылкой на свою работу - поместите в качестве ответа к заданию 3 в https://eos.bgitu.ru/
ЗАДАНИЕ 2.
Необходимо внутри текстового блока создать разметку страницы статьи «Кешбэк: как всё устроено и в чём выгода» для
сайта «Газпромбанка» и наполнить её текстом и изображениями из предоставленного макета в Figma.
Необходимые инструменты:
Макет Figma -
https://www.figma.com/design/Agi5VlEq5hKGH4qwK8eKuj/%D0%93%D0%B0%D0%B7%D0%BF%D1%80%D0%BE%D0%BC%D0%B
1%D0%B0%D0%BD%D0%BA---%D0%9F%D1%80%D0%BE-%D1%84%D0%B8%D0%BD%D0%B0%D0%BD%D1%81%D1%8B?node-
id=1-2&t=qwbYuiQZsUCaluSV-1
Проект в Codepen - https://codepen.io/IlyaRaseh/pen/pvgJEvp
1. Сделайте fork (копию) проекта в CodePen
2. Откройте макет в Figma и экспортируйте изображения в выделенной области
3. Загрузите все скачанные изображения на хостинг https://iimg.su/
4. Найдите в своей копии проекта элемент <div class=”text-block”>
5. Изучите содержимое элемента <div class=”text-block”> и определите, что необходимо исправить, ориентируясь на
новую версию макета.
Последовательно доработайте разметку внутри элемента <div class=”text-block”>: замените существующий контент на
текст из макета и изображения, которые вы подготовили и загрузили на хостинг.
Дорабатывать разметку лучше сверху вниз, начиная с первого элемента (обычно это заголовок или изображение). Далее
необходимо соотнести параграфы, изображения, списки и другие заголовки из макета с подходящими для них тегами.
6. Поделитесь ссылкой на свою работу - поместите в качестве ответа к заданию 3 в https://eos.bgitu.ru/
СПАСИБО!
В ы п о лняйте в с е за д а ния в
ус т а н ов ленн ый с р о к ,
с а м о с то ятельно !
То л ько т а к м ож н о п о л у чи ть зн а н и я
и у мения в пр о цессе о б у чения!
