TDТИМОФЕЙ.DER

START HERE / GUIDE

Как стать программистом?

Не нужно знать всё сразу. Начни с основ, делай маленькие проекты, разбирай ошибки и постепенно собирай своё портфолио.

01 / ROADMAP

Путь начинающего

Лучше регулярно практиковаться, чем просто смотреть уроки.

01

Выбери цель

Сайты, игры, приложения или автоматизация — цель поможет выбрать первый язык.

02

Учись на практике

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

03

Показывай проекты

Сохраняй код, описывай, что умеет проект, и исправляй ошибки по мере роста навыков.

02 / LANGUAGES

Какие языки учить?

5

HTML

Структура страницы: заголовки, тексты, изображения, ссылки и кнопки.

#

CSS

Внешний вид: цвета, шрифты, сетки, анимации и адаптация под экран.

JS

JavaScript

Логика и интерактивность: реакции на клики, игры, формы и вычисления.

Py

Python

Удобен для первых программ, автоматизации, обработки данных и прототипов.

03 / COMMANDS

Полезные команды

Примеры для терминала Git — выполняй их в папке проекта.

TERMINAL / GIT
git init
git status
git add .
git commit -m "Первый коммит"

git init создаёт репозиторий · git status показывает изменения · git add подготавливает файлы · git commit сохраняет снимок изменений.

04 / YOUR FIRST SITE

Как сделать свой сайт

1

Создай папку проекта.
Внутри создай файлы index.html и style.css.

2

Добавь HTML.
HTML задаёт структуру, а CSS отвечает за оформление.

3

Проверь на разных экранах.
Уменьши ширину окна и проверь меню, текст и кнопки.

4

Опубликуй сайт.
Можно использовать GitHub Pages для статических HTML/CSS/JS-сайтов.

05 / STARTER FILES

Готовые файлы для старта

Скачай шаблон, открой его и меняй под свою идею.

HTML

index.html

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

Скачать HTML ↧
CSS

style.css

Оформление, сетка и адаптация под телефон.

Скачать CSS ↧
JS

script.js

Пример простого действия по нажатию кнопки.

Скачать JS ↧

06 / RESPONSIVE

Оптимизация под ПК и телефон

▣

Гибкая ширина

Используй max-width, проценты, flexbox или grid вместо фиксированной ширины для всей страницы.

⌕

Viewport

Добавляй meta viewport — он уже есть в шаблоне. Это помогает браузеру корректно масштабировать страницу.

↔

Медиазапросы

Через @media меняй сетку, размеры отступов и меню на небольших экранах.

⚡

Быстрая загрузка

Сжимай изображения, не подключай лишние библиотеки и проверяй сайт на реальном телефоне.

CSS / RESPONSIVE
@media (max-width: 700px) {
  .container { padding: 0 16px; }
  .grid { grid-template-columns: 1fr; }
}

Это пример: замени .grid на класс своей сетки. Адаптивность зависит от структуры страницы.

СЛЕДУЮЩИЙ ШАГ

Практикуйся на настоящих проектах

Посмотри мои работы и попробуй сделать собственную версию.

Мои проекты ↗