Теоретическая часть

Верстка — это процесс создания структуры и оформления веб-страницы на основе макета. Основные понятия:

Bootstrap — популярный фреймворк для создания адаптивных веб-интерфейсов
Сетка (Grid) — система расположения элементов на странице с использованием строк и колонок
Компоненты Bootstrap — готовые стилизованные элементы интерфейса (кнопки, карточки, навигация)

Bootstrap 5 предоставляет следующие основные возможности:

Адаптивная сетка (12-колоночная)
Готовые компоненты (кнопки, карточки, навигация)
Утилиты для быстрого оформления (отступы, цвета, видимость)
Поддержка современных браузеров

В этой лабораторной работе мы сверстаем главную страницу сайта "Языковой портал" на основе макета, созданного в предыдущей работе.

Задание

Создать компонент Home.js с девизом, кнопкой "Записаться", преимуществами компании и подвалом.

Пошаговая инструкция

Установите Bootstrap

Откройте терминал в папке проекта и выполните команду:

npm install bootstrap

Эта команда установит Bootstrap 5 в ваш проект.

Подключите Bootstrap

Откройте файл src/index.js и добавьте импорт Bootstrap:

// Добавьте эту строку в начало файла
import 'bootstrap/dist/css/bootstrap.min.css';

Это подключит стили Bootstrap ко всему проекту.

Создайте компонент Home

В папке src создайте папку pages, а внутри нее файл Home.js.

# В терминале
mkdir src/pages
touch src/pages/Home.js

Напишите компонент Home

Откройте файл src/pages/Home.js и добавьте следующий код:

import React from 'react'; function Home() { return (

Изучайте языки с носителями!

✅ Квалифицированные преподаватели

Многие из них имеют опыт работы за рубежом или являются носителями языка.

✅ Удобный график

Занятия в группах с комфортной наполняемостью (6-8 человек) или индивидуально.

✅ Гибкие скидки

Отсутствие скрытых платежей, гибкая система скидок.

Отзывы учеников

"Отличные преподаватели! За 3 месяца улучшила свой английский до уровня Upper-Intermediate."

Анна, студентка

); } export default Home;

Создайте компонент для навигации

В папке src/components создайте файл Navigation.js и добавьте следующий код:

import React from 'react'; import { Link } from 'react-router-dom'; function Navigation() { return ( ); } export default Navigation;

Настройте маршрутизацию

Установите React Router:

npm install react-router-dom

Откройте файл src/App.js и замените его содержимое на:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Navigation from './components/Navigation';

function App() {
  return (
    
          } />
        
  );
}

export default App;

Проверьте результат

Запустите проект, если он еще не запущен:

npm start

Откройте браузер и убедитесь, что главная страница отображается корректно и соответствует макету.

Критерий	Баллы
Использован Bootstrap	3
Верстка по макету	4
Адаптивность (col-md)	3
Итого	10

Связь с демонстрационным экзаменом

Эта лабораторная работа связана с профессиональной компетенцией:

ПК: Создавать структуру кода веб-страницы информационных ресурсов в соответствии с дизайн-макетом

На демонстрационном экзамене вам потребуется сверстать все страницы сайта в соответствии с дизайн-макетом, что оценивается в 16 баллов из 80.

Согласно документу КОД 09.02.09-1-2025, на экзамене оценивается:

Навык разработки программного кода веб-страниц информационного ресурса, в том числе с использованием готовых технических решений
Умение применять специализированное программное обеспечение для верстки страниц информационных ресурсов
Умение создавать адаптивный интерфейс веб-ресурса

Лабораторная работа №6: Верстка главной страницы по макету

Цель работы

Теоретическая часть

Задание

Пошаговая инструкция

Изучайте языки с носителями!

✅ Квалифицированные преподаватели

✅ Удобный график

✅ Гибкие скидки

Отзывы учеников

Критерии оценки

Связь с демонстрационным экзаменом