- Топ-15 шпаргалок для программистов и WEB-разработчиков
- Шпаргалка по HTML, CSS и JavaScript
- Шпаргалка по JavaScript
- Шпаргалка по React.js
- Сборник шпаргалок Cheatography
- Шпаргалки по Java
- OverAPI
- Devhints
- Gitsheet
- Шпаргалка по Vue.js
- Шпаргалка по HTML5 Canvas
- Шпаргалка по SEO для веб-разработчика
- Easing функции
- CSS3 Animations
- CSS Grid
- Заключение
- Шпаргалки web
- 10 шпаргалок по HTML и CSS
- Шпаргалки по HTML
- Шпаргалки по CSS
Топ-15 шпаргалок для программистов и WEB-разработчиков
Поскольку технологии веб-программирования быстро развиваются, нам приходится изучать много нового. Некоторые языки и фреймворки настолько сложны, что вы можете не помнить весь синтаксис и других тонкостей. Поэтому хорошие люди придумали шпаргалки, в которые можно быстро глянуть и вытянуть необходимое для себя.
Когда кто-то был свидетелем чего-то полезного или очень ценного в прошлом, включая меня, мы все делали заметки. Однако от вас больше не требуется делать заметки о каждой детали, которую вы видите в книге, семинаре или статье.
Я не хочу отговаривать вас делать заметки; вы должны это делать, потому что знаете, что иногда вы понимаете только те заметки, которые пишете для себя. 😂
Однако, если вам не хочется делать заметки, то не стоит беспокоиться, потому что шпаргалки доступны по любому предмету в Интернете. Чтобы помочь вам в учебе, я составила этот список лучших шпаргалок.
Хватит разговоров, давайте перейдем к делу.
Шпаргалка по HTML, CSS и JavaScript
Вы можете найти примеры кода HTML, CSS и JavaScript здесь. Для каждого примера есть объяснение. Подобная шпаргалка — одна из моих любимых.
От переводчика: я бы вам также рекомендовал MDN, отличная документация. Некоторые статьи не переведены на русский, а также не все из переведенных обновлены и немного устарели, поэтому я бы также советовал смотреть на английском и уже потом на русском.
Шпаргалка по JavaScript
Тут вы найдете краткое введение в JavaScript для начинающих. Советую заглянуть как минимум всем новичкам.
Шпаргалка по React.js
Это простая, но полезная шпаргалка для энтузиастов React. Обязательно добавьте его в закладки, чтобы быстро перейти искать необходимую информацию.
От переводчика: я бы в первую очередь рекомендовал добавить в закладки официальную документацию, она, как правило, написана понятным языком и с актуальными примерами кода. Также практически вся перевена на русский язык силами сообщества (контрибьютерами)
Сборник шпаргалок Cheatography
Нет лучшего ресурса, чем этот. В нем более 5000 шпаргалок, вспомогательных материалов для редактирования и документаций! Здесь каждый может получить все, что ему нужно, не только программисты. Здесь вы можете найти шпаргалки по веб-разработке, бизнесу, играм, здравоохранению, цифровому маркетингу и многому другому.
Шпаргалки по Java
Здесь вкратце перечислены наиболее часто используемые функции языка Java и API-интерфейсы. Это отличный краткий справочник, который может помочь как новичкам, так и разработчикам среднего уровня.
OverAPI
Over API — это удивительный ресурс. Для большинства языков программирования вы можете найти шпаргалку здесь.
Devhints
На этом сайте несколько справочников, множество фрагментов кода и многое другое, чтобы дать вам краткий обзор на интересующий вас язык или инструмент. На одной странице вы найдете подробные инструкции. На это стоит обратить внимание.
Gitsheet
Git — это самый важный навык, которым должен обладать разработчик. Это предельно простая шпаргалка по команд git. Вам не нужно запоминать все команды, если у вас есть доступ к этому Gitsheet.
Шпаргалка по Vue.js
Эта шпаргалка содержит подробные фрагменты кода для Vue.js с объяснениями. Он включает в себя фрагменты, связанные со свойствами, DOM, данными, событиями, жизненным циклом, API и многим другим. Проверьте это, если вы ищете краткую справку для Vue.js .
Шпаргалка по HTML5 Canvas
Примеры кода для HTML5 Canvas, включая его элементы, 2Dcontext, различные фигуры, цвета, тени и многое другое, можно найти здесь.
Шпаргалка по SEO для веб-разработчика
Этот веб-сайт полностью посвящен SEO (поисковой оптимизации). Среди наиболее эффективных советов по поисковой оптимизации это один из самых полезных сайтов.
Easing функции
С помощью Easing функций вы можете регулировать темп анимации для создания различных эффектов, таких как подпрыгивание, замедление, увеличение масштаба и т.д. Для получения дополнительной информации обратитесь к этой документации Корпорации Майкрософт.
Кроме того, скорость, с которой параметр будет меняться с течением времени, определяется Easing функциями. Объекты реального мира почти никогда не движутся с постоянной скоростью и редко начинаются и заканчиваются внезапно. Используя эту страницу, вы можете выбрать идеальную функцию смягчения.
CSS3 Animations
На этом веб-сайте есть несколько удивительных анимационных эффектов, которые вы можете использовать в своем следующем или текущем проекте.
CSS Grid
CSS-grid может быть немного сложным с первого раза, да и со второго тоже. Потому что трудно запомнить все его свойства и понять как он работает. Вы можете добавить эту шпаргалку в свои закладки для быстрого ознакомления и доступа к необходимым свойствам.
Заключение
Надеюсь, что перевод был полезным и хотя бы одна из шпаргалок поможет вам разрабатывать ваши проекты быстрее и качественнее.
Как обычно, буду рад любому фидбеку, а если вы нашли ошибку — напишите в лс или комментариях.
Только добра.
Шпаргалки web
Всем тегам HTML в браузерах, по умолчанию, присвоено свойство display: , результатом чего существует разделение элементов на блочные и встроенные или строчные.
| Синтаксис | Описание | display: |
|---|---|---|
| Определяет тип документа | none | |
| Контейнер в начале страницы для служебных тегов и подгружаемых функций | none | |
| Заголовок документа отображаемый во вкладке браузера | none | |
| Метаданные страницы | none | |
| Подключает внешние сервисы и таблицы стилей | none | |
| Подключает скрипты к станице | none | |
| Подключает глобальные стили к странице | none | |
| Базовый URL-адрес — домен | none | |
| Блок не поддерживающий скрипты | block |
| Тело html документа | block | |
| Контейнер для всего содержимого страницы | block | |
| Контейнер для навигационного меню | block | |
| Шапка сайта | block | |
| Блок основного контента, обычно статья | block | |
| Часть контента с заголовком | block | |
| Часть контента, имеющая косвенное отношение к основному | block | |
| Подвал страницы | block | |
| Применяется для создания блочных контейнеров | block | |
| Применяется для создания встроенных контейнеров | block | |
| Независимый контейнер. Преимущественно для изображений | block | |
| Заголовок для figure | block | |
| Контейнер с дополнительной информацией, который можно свернуть или развернуть | block | |
| Заголовок для details, по которому можно щёлкать, чтоб свернуть или развернуть блок | block |
| … | Заголовки шесть уровней | block |
| Абзац | block | |
| Перенос строки | block | |
| Возможное место разрыва строки | none | |
| Прямая линия | none | |
| Цитата | block | |
| Краткая цитата | inline | |
| Источник цитирования | inline | |
| Фрагмент кода | inline | |
| Неформатированнй код | block | |
| Текст моноширным шрифтом | inline | |
| Результат выполнения скрипта | inline | |
| Выделяет переменные из программ | inline | |
| Зачёркнутый текст помечается как удалённый | inline | |
| Зачёркнутый текст | block | |
| Подчёркивает изменения в тексте | inline | |
| Подчёркнутый текст | inline | |
| Выделяет термин курсивом | inline | |
| Выделяет курсивом важные фрагменты текста | inline | |
| Выделяет текст курсивом | inline | |
| Выделяет важный текст полужирным | inline | |
| Выделяет текст полужирным | inline | |
| Выделяет фрагмент текста жёлтым фоном | inline | |
| Уменьшает размер шрифта | inline | |
| Подстрочное написание H2O | inline | |
| Надстрочное написание R 2 | inline | |
| Дата, время выпуска статьи | inline | |
| Аббревиатура | inline | |
| Адрес автора статьи | inline | |
| Изолирует текст читаемый справа на лево. Применяется в текстах написанных на двух языках | inline | |
| Задаёт направление написания текста | inline | |
| Контейнер для Восточно-Азиатских символов | inline | |
| Используется для вывода текста в браузерах, которые не поддерживают тег . В остальных браузерах текст, заключенный в контейнер , не отображается | none | |
| Расшифровка символов | block |
| Таблица HTML | table | |
| Строка таблицы | table-row | |
| Ячейки заголовков столбцов таблицы | table-cell | |
| Ячейки таблицы | table-cell | |
| Группа верхних строк таблицы. Применяется для общего оформления | table-header-group | |
| Группа нижних строк таблицы. Применяется для общего оформления | table-footer-group | |
| Группа строк в середине таблицы. Применяется для общего оформления | table-row-group | |
| Выделяет столбец таблицы | table-column | |
| Группирует несколько столбцов таблицы для общего оформления | table-column-group | |
| Описание таблицы | table-caption |
| Упорядоченный нумерованный список | block |
| Маркированный список | block |
| Элемент списка | list-item |
| Список с описаниями | block |
| Строка списка с описаниями | block |
| Описание строки, списка с описаниями | block |
| Изображение html | inline | |
| <>map | Активные области на карте | inline |
| Активная область с гиперссылкой на карте | inline | |
| Холст контейнер для динамического отображения изображений созданных с помощью JavaScript | inline-block |
| Формы HTML | block |
| Многофункциональные поля формы | inline-block |
| Многострочное поле формы | inline-block |
| Обычно текст формы | inline |
| Создаёт список вариантов, из которых можно сделать выбор. | none |
| Опция в раскрывающемся списке | block |
| Контейнер с заголовком для группы | block |
| Контейнер для создания раскрывающегося списка | inline-block |
| Группирует связанные элементы формы | block |
| Заголовок элементов формы, связанных | block |
| Интерактивная кнопка | inline-block |
| Генератор ключей | inline-block |
| Отображает процесс выполнения в числовых значениях | inline-block |
| Используется для отображения числовых значений таких показателей как количество посетителей, величина давления и т.п. | inline-block |
| Поле для вывода результатов вычислений | inline |
| Аудио файл | inline-block | |
| Видео файл | inline-block | |
| указывает местоположение и тип альтернативных файлов для и | none | |
| Субтитры | none | |
| Встроенный внешний элемент | inline-block | |
| Контейнер для встраиваемого внешнего элемента | inline-block | |
| Параметры встраиваемого внешнего элемента | none | |
| Встроенный фрейм | block |
10 шпаргалок по HTML и CSS
Чтобы не теряться в океане тегов и атрибутов, забирайте наиболее полные шпаргалки по HTML и CSS. Никакой воды — максимум пользы.
Шпаргалки по HTML
Язык гипертекстовой разметки — основа фронтенда, её скелет, на который вешаются стили и функционал. Самая последняя версия — HTML5: поддерживает все теги и элементы. Так, с появлением HTML 5 были добавлены новые типы ввода:
Держите шпаргалку по HTML4 и HTML5. Там же вы сможете найти различные спецификации поддержки и совместимости для десктопа и мобильных устройств для HTML 5 в разных браузерах.
А в следующих двух шпаргалках представлены символьные объекты HTML. Что это такое? Некоторые символы зарезервированы за HTML-разметкой, а потому не могут использоваться напрямую, поскольку есть шанс поломать вёрстку. Например, чтобы прописать левую или правую угловую скобку ( <> ) в статье, мы записываем их в HTML как < и > соответственно. В противном случае затронем теги вёрстки.
Вот сами чит-листы по HTML-символам:
То же самое, но на русском вы найдёте на htmlbook.ru.
Следующая шпаргалка содержит основные теги HTML5:
Также держите расширенную шпаргалку с тегами HTML5: четыре страницы с подсказками отлично подойдут, чтобы подготовиться к собеседованию.
Но перед тем, как перейти к CSS, нельзя не отметить едва ли не самую удобную шпаргалку по HTML, которая выручит в любой ситуации, будь то подготовка к интервью или рабочий процесс.
Шпаргалки по CSS
Каскадные таблицы стилей, они же CSS, описывают, как именно HTML-элементы будут отображаться. При этом один и тот же стиль может применяться сразу к нескольким элементам или даже страницам.
При первом знакомстве с CSS могут возникнуть проблемы с обозначением единиц измерения. Некоторые из них пришли из типографской традиции, как пункт ( pt ) и пика ( pc ), другие, например сантиметр ( cm ) и дюйм ( in ), знакомы нам из обихода. Есть и специальная единица измерения, придуманная специально для CSS: px .
Держите шпаргалку по единицам измерения в CSS, чтобы не запутаться:
А ещё есть селекторы, которые определяют, к какому элементу применять то или иное CSS-правило. Если вас интересуют CSS-селекторы, то вам сюда:
А вот ещё одна удобная шпаргалка по CSS, которая собрала в себе максимум полезной информации. Также посмотрите, как правильно использовать CSS-селектор :has().
Надеемся, что шпаргалки по HTML и CSS оказались полезными. Чит-листы по каким языкам и технологиям вы хотели бы увидеть? Напишите в комментариях.