Найти тему
HTML Academy

Как начать с нуля в веб-разработке? Часть первая

Оглавление

Перед началом карьеры разработчика бывает непонятно, с какого языка начать. В интернете все нахваливают разное, везде какие-то рейтинги, много непонятных слов, аббревиатур и голова идет кругом.

Правда в том, что нет идеального языка, который раз и навсегда определит вашу карьеру. Для тех, кто уже давно пишет код, освоить новый язык программирования — всё равно что выучить ещё один иностранный. Мы советуем относиться так же и к своему первому языку.

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

Фронтенд — надводная часть айсберга
Фронтенд — надводная часть айсберга

Выбираем направление

Фронтенд

Это то, что пользователь видит и с чем взаимодействует на странице. Дизайн, визуальные элементы, схемы — вся лицевая сторона.

Задачи фронтендера — сделать сайт, который будет решать задачи владельца, одинаково корректно работать на всех устройствах, независимо от браузера и размера экрана и при этом будет удобен пользователю. Фронтендеры знают и работают с HTML, CSS и JavaScript.

Фронтенд подойдёт тем, кто любит сразу видеть результат своей работы и педантично относится к деталям.

Бэкенд

Невидимая часть сайта. Всё, что скрыто от глаз пользователя и работает на сервере — как мотор в автомобиле.

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

Языков программирования для бэкенда несколько: PHP, Ruby, Python или Node.js.

Бэкенд-разработка связана с базами данных — в них хранятся списки пользователей, записи на стене или личные сообщения в соцсети. Базы данных работают на MySQL, PostgreSQL, SQLite или MongoDB, и для успешной работы бэкендером нужно понимать, как работает хотя бы одна из этих систем.

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

Вёрстка страниц

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

HTML

Это язык гипертекстовой разметки. Отвечает за структуру и содержание страницы. Он состоит из тегов, а тег состоит из имени, заключённого между знаками «меньше» и «больше». Например: <h1>, <p> и <ul>.

HTML — набор кубиков, из которых можно собрать что-то классное
HTML — набор кубиков, из которых можно собрать что-то классное

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

Вместо расширения *.txt тут используется *.html. Оно даёт понять браузеру, что внутри файла находится код веб-страницы. Браузер разбирает его структуру, определяет взаиморасположение элементов и визуализирует их.

Веб-стандарты HTML описаны в спецификациях. Это главный источник знаний и для браузеров, и для разработчиков. Важно следить за их обновлениями.

CSS

Собрали кубики, раскрасили, поставили по местам — получился робот.
Собрали кубики, раскрасили, поставили по местам — получился робот.

Это язык, который используется для стилизации вашей разметки. Например: сделать текст красным, выровнять по левую сторону, округлить углы изображения, поиграть со шрифтами, сделать отступы больше или меньше.

Тег <p> отвечает за формирование текстового абзаца. Допустим, нам нужно чтобы все <p> на странице получили одинаковые свойства. Для этого надо подключить к странице стили. Пока они не подключены никакого эффекта от них не будет. Стили можно встроить внутри HTML-кода страницы (инлайново) или подключить их как внешний файл. Чаще всего стили подключают из внешнего файла с расширением *.css. Так разметка отделяется от стилизации, снижается вероятность ошибки, внешний файл кешируется и не загружается повторно. Для подключения из внешнего файла используется тег <link>.

Знание основ HTML и CSS позволит создавать простые сайты с текстовым наполнением. В дальнейшем обучении, не обойтись без языков программирования. Именно их обзор мы сделали в следующей статье.