Перейти к содержимому
Skip to content

База знаний → Первый сайт с нуля

Первый сайт с нуля

Для того, кто не писал ни строчки кода. Путь до своей страницы в интернете, которую можно открыть с телефона и показать другому человеку. Порядок важнее списка: каждый узел опирается на предыдущий. Пунктиром — то, что можно отложить.

15 тем 4 этапа примерно 2 месяца при часе в день уровень: с нуля

пройдено 0 из 15
Этап 1 · Понять, как всё устроено
Как работает интернет 2 дня

Что происходит между нажатием Enter и появлением страницы: браузер узнаёт по имени сайта его адрес, просит у чужого компьютера файлы и показывает их. Без этой картины дальше всё будет выглядеть магией.

Что уметь в конце

  • Объяснить своими словами, что такое домен, хостинг и IP-адрес
  • Открыть панель разработчика в браузере и увидеть список запросов

Где учить

Из чего состоит сайт 1 день

Три слоя: HTML — содержимое, CSS — внешний вид, JavaScript — поведение. Разделять их с первого дня — привычка, которая потом сэкономит месяцы.

Что уметь в конце

  • Сказать по любому куску страницы, к какому слою он относится
  • Посмотреть исходный код чужого сайта и не испугаться
Редактор кода и браузер 1 день

Рабочее место: бесплатный редактор VS Code и любой современный браузер. Больше на старте не нужно ничего — ни платных программ, ни мощного компьютера.

Что уметь в конце

  • Создать папку проекта, открыть её в редакторе, сохранить файл
  • Открыть свой файл в браузере и увидеть результат

Где учить

Этап 2 · Первая страница
HTML — каркас страницы 1 неделя

Заголовки, абзацы, списки, ссылки, картинки, формы. Главное здесь — не выучить все теги, а привыкнуть называть вещи своими именами: заголовок заголовком, список списком. От этого зависят и поиск, и читалки для незрячих.

Что уметь в конце

  • Собрать страницу «о себе» с заголовками, текстом, фото и ссылками
  • Отличить осмысленную разметку от набора одинаковых блоков

Где учить

CSS — внешний вид 2 недели

Цвета, шрифты, отступы, расположение блоков. Самая долгая часть основы: здесь закладывается вкус и здесь же появляются первые «почему оно съехало». Две главные темы — flexbox и grid, ими выстраивается почти любая раскладка.

Что уметь в конце

  • Выстроить шапку, три колонки и подвал без подглядывания в чужой код
  • Понимать, почему отступ соседнего блока «съел» ваш

Где учить

Картинки и вес страницы 2 дня

Фотография с телефона весит 5 мегабайт, страница целиком должна весить меньше одного. Сжатие и современные форматы решают это за пять минут, а выигрыш в скорости люди замечают сразу.

Что уметь в конце

  • Сжать фотографию до разумного веса без видимой потери качества
  • Задать картинке размеры, чтобы страница не прыгала при загрузке

Где учить

Сначала телефон 1 неделя

Больше половины посетителей придут с телефона. Проще сверстать узкий экран и потом расширить, чем наоборот. Здесь же — медиазапросы и проверка на реальном устройстве, а не только в уменьшенном окне браузера.

Что уметь в конце

  • Сделать страницу читаемой на экране шириной 360 точек
  • Проверить её на своём телефоне до публикации
Figma для разработчика необязательно

Как открыть чужой макет, снять размеры, цвета и шрифты. Нужно, когда дизайн приходит со стороны. Пока рисуете сами — можно отложить.

Этап 3 · Немного жизни
JavaScript — первые скрипты 2 недели

Переменные, условия, функции, реакция на нажатие. После этого узла страница перестаёт быть картинкой: меню открывается, вопросы раскрываются, кнопка что-то делает.

Что уметь в конце

  • Написать открывающееся меню и раскрывающийся список вопросов
  • Найти ошибку в консоли браузера и понять, на какой строке она

Где учить

Формы и куда уходят заявки 3 дня

Форма сама по себе никуда ничего не отправляет — ей нужен получатель: почтовая служба, сторонний сервис или свой сервер. Здесь же проверка полей и защита от роботов, иначе придут не клиенты, а спам.

Что уметь в конце

  • Сделать форму, сообщение из которой доходит до вас
  • Показать человеку понятную ошибку, а не «неверные данные»
Этап 4 · Выпустить в мир
Git и GitHub 1 неделя

История правок: каждая версия сохраняется, к любой можно вернуться. Пока работаешь один, это страховка от «вчера работало». В команде — обязательное условие.

Что уметь в конце

  • Сохранить версию, посмотреть историю, вернуться к вчерашней
  • Выложить проект на GitHub и понимать, что такое ветка

Где учить

Публикация: где живёт сайт 2 дня

Готовые страницы можно бесплатно раздавать с GitHub Pages, Cloudflare Pages или Netlify. Своя машина в аренду нужна позже — когда появится серверный код.

Что уметь в конце

  • Выложить сайт так, чтобы его открывали по ссылке с любого устройства
  • Обновить его после правки одним действием

Где учить

Домен и замок в адресной строке 1 день

Имя сайта покупается на год у регистратора, привязывается к площадке записями DNS. Защищённое соединение сегодня бесплатно и включается в пару нажатий — без замка браузер будет ругаться на вашу страницу.

Что уметь в конце

  • Привязать купленный домен к своему сайту
  • Проверить, что сайт открывается по https и без предупреждений

Где учить

Чтобы страницу нашли 3 дня

Заголовок и описание для поиска, картинка для соцсетей, карта сайта, скорость загрузки. Это не «продвижение за деньги», а обязательная гигиена: без неё сайт не найдут даже по названию.

Что уметь в конце

  • Прописать title и description и увидеть их в выдаче
  • Проверить скорость страницы и понять, что её замедляет

Где учить

Что дальше развилка

После первого сайта дорога расходится. Хотите делать интерфейсы — вам во фронтенд. Хотите, чтобы сайт считал, хранил и присылал — в бэкенд. Хотите, чтобы всё это жило на своей машине — в серверы.

Куда идти

Дальше: фронтенд-разработчик Нужен сайт, а не учёба

Knowledge base → Your first website

Your first website

For someone who has never written a line of code. The path to a page of your own on the internet — one you can open on a phone and show to another person. Order matters more than the list: each topic stands on the one before it. Dashed topics can wait.

15 topics 4 stages about 2 months at an hour a day level: from zero

0 of 15 done
Stage 1 · How it all works
How the internet works 2 days

What happens between pressing Enter and seeing a page: the browser looks up the address behind a name, asks another computer for files, and shows them. Without this picture everything later looks like magic.

What you should be able to do

  • Explain in your own words what a domain, hosting and an IP address are
  • Open developer tools and see the list of requests

Where to learn

What a website is made of 1 day

Three layers: HTML is the content, CSS is the look, JavaScript is the behaviour. Keeping them apart from day one saves months later.

What you should be able to do

  • Point at any part of a page and name its layer
  • Look at the source of someone else's site without fear
Editor and browser 1 day

Your workplace: the free VS Code editor and any modern browser. Nothing else is needed to start — no paid software, no powerful computer.

Where to learn

Stage 2 · Your first page
HTML — the structure 1 week

Headings, paragraphs, lists, links, images, forms. The point is not to memorise every tag but to call things by their names: a heading is a heading, a list is a list. Search engines and screen readers depend on it.

What you should be able to do

  • Build an "about me" page with headings, text, a photo and links
  • Tell meaningful markup from a pile of identical boxes

Where to learn

CSS — the look 2 weeks

Colours, fonts, spacing, layout. The longest part of the basics, and where taste is formed. Two key subjects are flexbox and grid — almost any layout is built with them.

What you should be able to do

  • Lay out a header, three columns and a footer without copying code
  • Understand why a neighbour's spacing swallowed yours

Where to learn

Images and page weight 2 days

A phone photo weighs five megabytes; a whole page should weigh less than one. Compression and modern formats fix this in five minutes, and people notice the speed at once.

Where to learn

Phone first 1 week

More than half your visitors arrive on a phone. Building for a narrow screen first and widening later is easier than the other way round. Test on a real device, not only in a shrunken browser window.

Figma for developers optional

How to open someone's design file and read sizes, colours and fonts. Needed when the design comes from outside. While you draw it yourself, this can wait.

Stage 3 · A little life
JavaScript — first scripts 2 weeks

Variables, conditions, functions, reacting to a click. After this topic the page stops being a picture: the menu opens, questions expand, the button does something.

What you should be able to do

  • Write an opening menu and an expanding list of questions
  • Find an error in the browser console and see which line it is on

Where to learn

Forms and where requests go 3 days

A form sends nothing on its own — it needs a receiver: a mail service, an outside tool or your own server. Field checks and a simple robot trap belong here too, or you will collect spam instead of clients.

Stage 4 · Go live
Git and GitHub 1 week

A history of changes: every version is saved and you can return to any of them. Alone it is insurance against "it worked yesterday". In a team it is a requirement.

Where to learn

Publishing: where a site lives 2 days

Finished pages can be served for free from GitHub Pages, Cloudflare Pages or Netlify. A rented machine comes later, when you have server code.

Where to learn

Domain and the padlock 1 day

A name is rented from a registrar for a year and pointed at your site with DNS records. A secure connection is free today and takes two clicks — without it the browser warns people about your page.

Where to learn

Being found 3 days

A title and description for search, a picture for social networks, a sitemap, loading speed. This is not paid promotion but basic hygiene: without it people will not find you even by name.

Where to learn

What next a fork

After the first website the road splits. Want to build interfaces — go to frontend. Want the site to calculate, store and send — backend. Want all of it running on your own machine — servers.

Where to go

Next: frontend developer I need a website, not a course