Frontend | Вопросы собесов on Telegram: “🤔 Что такое frontend? Frontend

🤔 Что такое frontend?

Frontend — это термин, используемый для описания части веб-приложений и веб-сайтов, с которой взаимодействует пользователь. Это видимая и интерактивная часть приложения, отображаемая в браузере. Frontend включает в себя структуру, дизайн и поведение веб-страниц.

🚩Основные компоненты

🟠HTML (HyperText Markup Language): Отвечает за структуру и содержимое веб-страницы. Это базовый язык разметки, который используется для создания и организации элементов на странице, таких как заголовки, абзацы, изображения, ссылки и формы.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Пример страницы</title>
</head>
<body>
    <h1>Заголовок страницы</h1>
    <p>Это пример абзаца текста.</p>
</body>
</html>

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

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    padding: 10px;
}

🚩Фреймворки и библиотеки

Для упрощения разработки и улучшения эффективности существуют различные фреймворки и библиотеки, которые используются во фронтенд-разработке.

🟠React: Разработанный Facebook, это библиотека для создания пользовательских интерфейсов. React позволяет создавать компоненты — переиспользуемые части интерфейса, которые упрощают разработку и поддержку кода.

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    return (
        <div>
            <h1>Привет, мир!</h1>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

🟠Angular: Разработанный Google, это платформа и фреймворк для создания динамичных веб-приложений. Angular предлагает мощные инструменты для управления данными, маршрутизации и разработки сложных приложений.

🚩Инструменты

🟠Webpack: Webpack — это инструмент для сборки модулей, который объединяет различные ресурсы (JavaScript, CSS, изображения) в один или несколько файлов для улучшения производительности и управления зависимостями.
🟠Babel: Babel — это транспайлер, который позволяет использовать современные возможности JavaScript в старых браузерах, преобразуя код в совместимый формат.

Ставь 👍 и забирай 📚 Базу знаний