Кодер. Владеет современной версткой и наиболее распространенными API
Верстка
Что можно понимать под современной версткой? В 2к19 я бы отнес flexbox и grid. Большинство браузеров уже умеет в flexbox, и кодеры постепенно начинают его юзать все больше и больше. Но это скорее верхушка айсберга.
Не будем забывать про базовые вещи: знание тегов и аттрибутов HTML, блочная верстка, семантический html (избавление от div'оза), а также классические техники центрирования, знание опасности float элементов и т.п.
Кому интересно, можно почитать про путь верстальщика.
Блочная верстка предполагает разделение разметки/форматирования и оформления, а также активное применение тега <div>. Табличная верстка при таком подходе используется только в случае...та-дааам!...таблиц.
Про блочную верстку подробнее: тут и тут.
Побочным эффектом блочной верстки (точнее одного из правил - использование тега <div>) является div'оз. Для того чтобы этого избежать, неплохо бы ознакомиться с семантической версткой. Она предполагает, что страницу можно разбить на логические блоки, выделив заголовок <header>, подвал <footer>, основной контент <main> и другие элементы. Это позволит лучше структурировать документ, а также облегчит работу поисковым роботам, которые индексируют страницы, и при правильной разметке красиво отображают их в поисковой выдаче.
Про семантические элементы можно почитать тут и тут.
В чем же опасность float элементов. Вобщем-то ни в чем, если не забывать очищать floatin через clear: left | right | both. Также нужно помнить, что float не учитывается при расчете высоты родительского элемента. Подробнее о float.
Центрирование - жуткая и популярная проблема для новичка. Тебе повезло, если у тебя фиксированная ширина элемента и ты можешь применить самое попсовое правило - margin: 0 auto для центрирования по горизонтали. А что если нет? Ты начинаешь судорожно бегать по css свойствам в хроме. Но все не так сложно, если погуглить и сохранить самые успешные техники. Вот неплохие сборники техник: тут и тут.
Немного о самом сладком: FlexBox и Grid.
Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS. С помощью flexbox можно реализовать
- Вертикальное выравнивание блока внутри родителя.
- Оформление всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.
- Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.
Мои шпаргалки по flexbox: раз, два, три. Все они почти одинаковые, выбирайте любую.
Теперь мы умеем делать гибко, зачем нам Grid? На самом деле Flexbox не очень хорошо работает для двумерных шаблонов, например если вам нужно сделать плиточную раскладку.
Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий - один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам.
Быстро въехать можно тут, здесь полное руководство по Grid.
Думаю этого хватит для краткого описания соременной верстки.
API
Спецификация HTML5 предоставляет нам кучу API для работы с мультимедиа, связью, геолокацией, историей страницы и многим другим. Не знаю, имеет ли смысл приводить весь список доступных API и существует ли он. Вот что-то похожее на него.
Я бы остановился на кратком рассмотрении основных API. Вполне вероятно, что со всеми API вы не будете работать, но об их существовании и назначении стоит знать!
Geolocation_API - позволяет определять географическое местоположение пользователя.
Через вызов navigator.geolocation.getCurrentPosition(callback) вы можете получить координаты (ширину и долготу) пользователя. Также можно отслеживать положение через navigator.geolocation.watchPosition(callback)
File API - позволяет подгружать и читать содержимое файлов пользователя. Обычно загружаются файлы через <input type="file" id="input">. File API делает возможным доступ к FileList, который содержит объекты File, которым соответствуют файлы, загруженные пользователем. Подробнее тут.
History API - позволяет нам гулять по истории браузера, добавлять элементы в историю, реагировать на переходы по истории и другие полезности. Можно перемещаться вперед и назад по истории, используя методы back(), forward() и go() объекта window.history. Полезно при разработке SPA приложений (работающих без перезагрузки страницы). Подробнее - в статье с хабра, есть моя демка.
Web storage - позволяет хранить данные на стороне клиента в браузере через Window.sessionStorage в рамках вкладки и Window.localStorage в рамках браузера. Полезно для сохранение мелких данных, например, что пользователь уже кликал на галку и ему что-то не нужно/нужно показывать при следующем заходе на страницу.
Canvas 2D Context - <canvas> — это HTML элемент, использующийся для рисования графики. Он может, к примеру, использоваться для рисования графов, создания коллажей или анимации. C помощью Canvas можно делать простые (или не очень) игры. API предоставляет возможность для создания различных элементов в двумерном пространстве и манипулирования ими через JS.
Web sockets - протокол связи поверх TCP-соединения, предназначенный для обмена сообщениями между браузером и веб-сервером в режиме реального времени. Объект WebSocket предоставляет API для создания и управления вебсокет-подключения к серверу, а также для отправки и получения данных в этом подключении. WebSocket позволяет создавать единственное (можно один раз подключиться и держать соединение) двунаправленное соединение, т е как клиент так и сервер могут быть инициатором отправки сообщения.
XMLHttpRequest - предоставляет возможность обмена данными между клиентом и сервером без перезагрузки страницы. Сделать запрос можно вызвав let myRequest = new XMLHttpRequest(). На этом API основана реализация SPA. Вторая версия позволяет проще работать с файлами. Подробнее - тут
Web Workers - Веб-воркеры — это потоки, принадлежащие браузеру, которые можно использовать для выполнения JS-кода без блокировки цикла событий. Зачем это может быть нужно? С помощью веб воркеров можно выносить сложные вычисления, занимающие много ресурсов и времени, из основного цикла событий браузера, чтобы веб приложение могло быстро реагировать на действия пользователя. Запустить веб-воркер можно простым кодом var myWorker = new Worker("worker.js");, где worker.js - имя файла скрипта воркера.
Небольшой обзор по работе с воркерами можно найти тут
Думаю на этом тему можно заканчивать.
Всегда рад обратной связи - если вы найдете неточности и захотите мне на них указать или у вас просто есть, что добавить. Писать можно в коменты или в телегу.
Присоединяйтесь к нашим каналам FrontEndDev и Web Stack в Telegram, чтобы не пропустить самое интересное из мира Web!