Как я завершил Foundations в The Odin Project и что понял

Когда я только начинал свой путь в самообучении программированию, терминал казался мне чем-то вроде иностранного языка, а управление файлами через git-контроль версий вызывало легкую панику. Сейчас, оглядываясь назад, я вижу, как многое стало понятным. Завершение Foundations в The Odin Project стало для меня важным рубежом, и я хочу поделиться тем, что узнал.

Etch-a-Sketch Canvas: Прорыв в JavaScript

Одним из самых сложных и одновременно полезных проектов стал Etch-a-Sketch Canvas. Это был настоящий тест на понимание JavaScript. Проект заставил меня выйти за пределы статических переменных и погрузиться в динамическое манипулирование DOM. Генерация сетки через вложенные циклы и обработка событий мыши в реальном времени — всё это стало для меня ключевыми моментами.

const container = document.getElementById('container');
function createGrid(size) {
  container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
  container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
  for (let i = 0; i < size * size; i++) {
    const square = document.createElement('div');
    square.classList.add('square');
    container.appendChild(square);
  }
}
createGrid(16);

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

Landing Page: Первый опыт с Flexbox

Другой проект, который стал для меня важным этапом, — это создание лендинга. Здесь я впервые глубоко погрузился в современные адаптивные макеты. Основное внимание я уделил написанию чистого, семантичного HTML и освоению CSS Flexbox для управления выравниванием элементов.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Этот проект научил меня важности структуры и того, как правильно организовать код для поддержки адаптивности. Flexbox стал для меня мощным инструментом, который я теперь использую практически в каждом проекте.

SVG: Векторная графика и производительность

После завершения Foundations я перешел к модулю по SVG в рамках Full Stack JavaScript. Здесь я узнал несколько важных концепций, связанных с выбором ассетов и производительностью.

Вектор против растров: В отличие от растровых изображений (PNG, JPEG), которые пикселируются при изменении размера, SVG масштабируются бесконечно благодаря математическим уравнениям.
Встраивание vs ссылка: Встраивание SVG непосредственно в HTML дает полный контроль над анимациями через CSS/JS, но увеличивает размер DOM. Использование ссылки через <img> делает разметку чище, но ограничивает возможности управления.
Пределы SVG: SVG идеальны для иконок и интерфейсов, но совершенно не подходят для фотореалистичной графики, где высокие текстуры приводят к увеличению размера кода.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Эти знания помогли мне лучше понимать, когда и как использовать SVG в своих проектах.

Выводы и рекомендации

Если вы только начинаете свой путь в программировании, я настоятельно рекомендую обратить внимание на проекты, которые заставляют вас решать реальные задачи. Etch-a-Sketch и Landing Page стали для меня тем, что помогло перейти от теории к практике.

Что касается SVG, то это мощный инструмент, но важно понимать его ограничения. Используйте его там, где он действительно эффективен, и не забывайте о компромиссах между встраиванием и ссылкой.

В целом, The Odin Project — это отличный ресурс для тех, кто хочет научиться фронтенд-разработке. Он предлагает структурированный путь и проекты, которые действительно помогают понять ключевые концепции. Если вы сейчас проходите этот курс, не бойтесь экспериментировать и пробовать что-то новое. Именно это поможет вам расти как разработчику.

Источник: https://dev.to/khahliso/how-i-finished-the-odin-project-foundations-what-ive-learned-so-far-i55