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

Олег

16-й уровень

Фронтенд делится на 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, liunordered 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 — справочник, самоучитель, бесплатно, на русском.
  • wisdomweb.ru — учебник css, бесплатно, на русском
  • codebra — курсы html/css, бесплатно, на русском.
  • w3schools — отличный туториал, бесплатно, на английском.
  • htmlacademy — курсы css, частично бесплатно, на русском.

JavaScript

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

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

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

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