Я вообще ничего не знаю про фронтенд. С чего начать? К чему готовиться?

Олег

Фронтенд делится на 3 части — HTML, CSS, JavaScript.

HTML

HyperText Markup Language — язык гипертекстовой разметки для web-страниц, развитием и стандартизацией которого занимается W3C.org. Текст в html документах размечается тэгами, которые состоят из пары угловых скобок и бывают парные (<p>text</p>) и одиночные (<br>). В тегах также могут быть атрибуты, они пишутся в первом теге, если они парные (например: <a href="/"></a>). Весь html документ разделен 2 части: <head> и <body>. В первой части указывается заголовок документа <title> и различная информация для браузера и поисковых систем, во второй части — тело документа (то, что мы видим на экране). Общая стуктура html документа:

<!doctype html>
<html>
<head>
    <title>Заголовок</title>
</head>
<body>
    <p>Текст документа</p>
</body>
</html>

Теги, присущие для <head>, это:

  • <meta> — может быть указан несколько раз, чаще всего употребляется с атрибутом charset для указания кодировки.
  • <link> — с помощью него загружаются сторонние ресурсы, необходимые для отображения, например стили css или иконка favicon.ico.
  • <style> — для непосредственного указания стилей прямо в html документе.

Теги, присущие для <body>, это:

  • <div> от division — деление. Обычно им делят страницу на логические блоки, группируя дочерние элементы.
  • <h1> (h1…h6) — заголовки документа, от большего размера к меньшему.
  • <p> от paragraph — параграф. Используется для форматирования блоков текста.
  • ul, ol, li — unordered list, ordered list, list item — используются для создания списков.
  • a от anchor — образует ссылку.
  • form — как не сложно догадаться, нужен для созданя форм.

Полезные ссылки:

  • htmlbook — справочник, самоучитель, бесплатно, на русском.
  • wisdomweb.ru — учебник html, бесплатно, на русском.
  • codebra — курсы html/css, бесплатно, на русском.
  • w3schools — отличный туториал, бесплатно, на английском.
  • htmlacademy — курсы html, частично бесплатно, на русском.

CSS

Cascading Style Sheets (каскадные таблицы стилей) — это формальный язык описания внешнего вида документа html (и не только). Разработкой также занимается W3C. Если с помощью html размечают общий вид документа (заголовки, параграфы, списки), то с помощью css документ оформляют. Типичным примером может быть создание своего фона страницы, размер и стиль шрифта, а также его цвет и прочее. Стили могут быть подключены в html элементе <link> или в специальном элементе <style> внутри элемента <head> или же напрямую в элементе с помощью атрибута style.

Пример

# с помощью link
<link rel="stylesheet" href="style.css"> 
# в head
<head>
.........
<style>
    p {font-size: 24px}
</style>
....
</head>
# в элементе
<div style="background-color: red;">Text</div>

Большинство html элементов имеют стили по умолчанию. Свои стили можно применять с помощью селекторов:

  • * — любой элемент
  • div — применится ко всем элементам div
  • #id — применится к элементу с данным id. Стоит заметить, что id может быть у одного элемента, если нужно элементы группировать по стилю, нужно использовать class
  • .class — применится ко всем элементам, у которых есть этот class
  • div p — применится ко всем p, являющиеся потомками div
  • div > p — только те p, которые являются непосредственными потомками div.

Полезные ссылки:

  • htmlbook — справочник, самоучитель, бесплатно, на русском.
  • codebra — курсы html/css, бесплатно, на русском.
  • w3schools — отличный туториал, бесплатно, на английском.
  • htmlacademy — курсы css, частично бесплатно, на русском.

JavaScript

JavaScript — язык программирования, который обычно используется как язык сценариев для придания интерактивности веб-страницам. Подключаются с помощью специального тега <script> в блоке <head> (не рекомендуется) или в конце документа, поближе в закрывающему тегу </body>. Полностью интегрируется с html/css. Для управления элементами на странице использует те же селекторы, что и css.

JavaScript умеет:

  • Создавать новые html-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.
  • Реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора, нажатия на клавиатуру и т.п.
  • Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется “ajax”).
  • Получать и устанавливать cookie, запрашивать данные, выводить сообщения…и многое, многое другое!

Полезные ссылки:

  • javascript.ru — пожалуй, самый главный ресурс на русском языке, актуален, бесплатен.
  • javascript — бесплатный курс, на английском.
  • wisdomweb.ru — учебник javascript, бесплатно, на русском.

Попробуйте бесплатные уроки по Python

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

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.

к другим вопросам