Введение: что такое фронтенд

Фронтенд-разработчик создает то, что видит пользователь в браузере. Верстаешь страницы, делаешь их интерактивными, подключаешь к бэкенду.

Что делает фронтенд-разработчик:

• Верстает страницы по макетам дизайнера
• Делает интерфейсы интерактивными (кнопки, формы, анимации)
• Работает с API бэкенда для получения данных
• Оптимизирует производительность и скорость загрузки
• Обеспечивает адаптивность для разных устройств

Плюсы фронтенда:

• ✅ Результат виден сразу — пишешь код, видишь интерфейс
• ✅ Много вакансий и хорошие зарплаты
• ✅ Можно работать удаленно
• ✅ Хороший карьерный рост
• ✅ Много ресурсов для обучения

Минусы:

• ❌ Нужно постоянно изучать новые технологии
• ❌ Много конкуренции среди джунов
• ❌ Работа с дизайнерами может быть сложной
• ❌ Нужно учитывать разные браузеры и устройства

HTML и CSS: основы верстки

HTML и CSS — это основа фронтенда. Без них никуда.

HTML: структура страницы

HTML (HyperText Markup Language) — язык разметки для создания структуры веб-страницы.

Базовые теги:

  
  
  


  

    
Заголовок
    
  
  
  

    

      
Раздел
      
Текст параграфа.
    
  
  
  

Семантические теги:

• <header> — шапка страницы
• <nav> — навигация
• <main> — основное содержимое
• <section> — раздел
• <article> — статья
• <aside> — боковая панель
• <footer> — подвал

CSS: стилизация

CSS (Cascading Style Sheets) — язык стилей для оформления HTML.

Базовый синтаксис:

/* Селектор { свойство: значение; } */

h1 {
  color: blue;
  font-size: 32px;
  margin-bottom: 20px;
}

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

Flexbox: раскладка элементов

Flexbox — инструмент для создания гибких раскладок.

.container {
  display: flex;
  justify-content: center; /* горизонтальное выравнивание */
  align-items: center; /* вертикальное выравнивание */
  gap: 20px; /* расстояние между элементами */
}

.item {
  flex: 1; /* элемент занимает доступное пространство */
}

CSS Grid: сетка

Grid — инструмент для создания двумерных раскладок.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 колонки */
  gap: 20px;
}

.grid-item {
  grid-column: span 2; /* элемент занимает 2 колонки */
}

Адаптивная верстка

Адаптивная верстка — страница выглядит хорошо на всех устройствах.

/* Медиа-запросы для разных размеров экрана */

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  h1 {
    font-size: 24px;
  }
}

JavaScript: от основ до продвинутых тем

JavaScript — язык программирования, который делает страницы интерактивными.

Основы JavaScript

Переменные:

// const — константа, нельзя переприсваивать
const name = "Иван";

// let — переменная, можно переприсваивать
let age = 25;
age = 26;

// var — устаревший синтаксис, не используйте

Типы данных:

// Примитивные типы
const string = "Текст";
const number = 42;
const boolean = true;
const nullValue = null;
const undefinedValue = undefined;

// Объекты
const person = {
  name: "Иван",
  age: 25
};

// Массивы
const fruits = ["яблоко", "банан", "апельсин"];

Функции:

// Обычная функция
function greet(name) {
  return `Привет, ${name}!`;
}

// Стрелочная функция
const greet = (name) => {
  return `Привет, ${name}!`;
};

// Стрелочная функция (короткая запись)
const greet = (name) => `Привет, ${name}!`;

Работа с DOM

DOM (Document Object Model) — представление HTML в виде объектов JavaScript.

// Получить элемент
const button = document.querySelector('.button');

// Изменить текст
button.textContent = 'Нажми меня';

// Добавить обработчик события
button.addEventListener('click', () => {
  alert('Кнопка нажата!');
});

// Изменить стили
button.style.backgroundColor = 'blue';

// Создать новый элемент
const newDiv = document.createElement('div');
newDiv.textContent = 'Новый элемент';
document.body.appendChild(newDiv);

Асинхронность: Promises и async/await

Promises:

// Промис — объект для работы с асинхронным кодом
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Ошибка:', error);
  });

async/await:

// async/await — синтаксический сахар над промисами
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Ошибка:', error);
  }
}

React: современный фреймворк

React — самая популярная библиотека для создания интерфейсов. Используется в большинстве современных веб-приложений.

Установка React

С помощью Vite (рекомендуется):

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Компоненты

Функциональный компонент:

function Welcome({ name }) {
  return 
Привет, {name}!
;
}

// Использование

Компонент с состоянием:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    

      
Счет: {count}
       setCount(count + 1)}>
        Увеличить
      
    
  );
}

Хуки (Hooks)

useState — управление состоянием:

const [value, setValue] = useState(initialValue);

useEffect — побочные эффекты:

import { useEffect } from 'react';

function Component() {
  useEffect(() => {
    // Код выполнится после рендера
    console.log('Компонент отрендерился');
    
    // Очистка (опционально)
    return () => {
      console.log('Компонент размонтируется');
    };
  }, []); // Пустой массив — выполнится один раз
}

Работа с формами

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ email, password });
  };
  
  return (
    

       setEmail(e.target.value)}
        placeholder="Email"
      />
       setPassword(e.target.value)}
        placeholder="Пароль"
      />
      Войти
    
  );
}

Работа с API

import { useState, useEffect } from 'react';

function UsersList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    async function fetchUsers() {
      try {
        const response = await fetch('https://api.example.com/users');
        const data = await response.json();
        setUsers(data);
      } catch (error) {
        console.error('Ошибка:', error);
      } finally {
        setLoading(false);
      }
    }
    
    fetchUsers();
  }, []);
  
  if (loading) return 
Загрузка...
;
  
  return (
    

      {users.map(user => (
        
{user.name}
      ))}
    
  );
}

TypeScript: типизация для JavaScript

TypeScript — это JavaScript с типами. Помогает находить ошибки на этапе разработки.

Базовые типы

// Примитивные типы
const name: string = "Иван";
const age: number = 25;
const isActive: boolean = true;

// Массивы
const numbers: number[] = [1, 2, 3];
const names: Array = ["Иван", "Мария"];

// Объекты
interface Person {
  name: string;
  age: number;
  email?: string; // опциональное поле
}

const person: Person = {
  name: "Иван",
  age: 25
};

Типизация компонентов React

interface ButtonProps {
  text: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ text, onClick, disabled = false }: ButtonProps) {
  return (
    
      {text}
    
  );
}

Практические проекты

Проекты — это доказательство ваших навыков. Делайте проекты параллельно с обучением.

Проект 1: Todo-приложение

Что делать:

• Список задач с добавлением, удалением, редактированием
• Фильтрация по статусу (все, активные, выполненные)
• Сохранение в localStorage
• Адаптивный дизайн

Технологии: React, CSS

Проект 2: Интернет-магазин

Что делать:

• Каталог товаров с фильтрами и поиском
• Корзина покупок
• Страница товара
• Интеграция с API (или моковые данные)

Технологии: React, TypeScript, API

Проект 3: Приложение с API

Что делать:

• Приложение погоды, новостей или другого API
• Отображение данных с API
• Обработка ошибок и загрузки
• Красивый UI

Технологии: React, API, async/await

Как структурировать проект:

• README.md с описанием и инструкциями
• Чистый код с комментариями
• GitHub с историей коммитов
• Демо на Vercel/Netlify

Ресурсы для изучения

Официальная документация:

• MDN Web Docs — лучший ресурс по HTML/CSS/JavaScript
• React Documentation — официальная документация React
• TypeScript Handbook — документация TypeScript

Бесплатные курсы:

• FreeCodeCamp — структурированные курсы
• HTML Academy — интерактивные курсы по верстке
• JavaScript.info — подробный курс по JavaScript

Практика:

• LeetCode — задачи на алгоритмы
• Codewars — задачи на программирование
• Frontend Mentor — верстка по макетам

Заключение

Фронтенд-разработка — это практика. Начните с HTML/CSS, затем JavaScript, потом React. Делайте проекты, публикуйте на GitHub, описывайте в резюме.

План обучения (6-12 месяцев):

1. HTML/CSS (1-2 месяца) — основы верстки
2. JavaScript (2-3 месяца) — язык программирования
3. React (2-3 месяца) — фреймворк
4. TypeScript (1-2 месяца) — типизация
5. Проекты (2-3 месяца) — портфолио

Следующие шаги:

1. Изучите стек технологий для фронтенда
2. Начните делать проекты для портфолио
3. Составьте резюме
4. Подготовьтесь к собеседованиям