Помощни материали по HTML, CSS и JS (cheat sheet – пищови)

Колко често ти се е случвало да трябва да намериш ред код за своя проект колкото може по-бързо, защото времето те притиска. Отнема време, за да намериш необходимите фрагменти в търсачките, а не искаш да се разсейваш допълнително. Неприятно е, когато ще трябва да прекъснеш концентрацията си, за да намериш това, от което се нуждаеш. За да ти спестя време, направих опит да създам богат списък с помощни материали по HTML, CSS и JS (cheat sheet – пищови), които можеш просто да маркираш в отметките за допълнителни справки.

Публикацията е обновена на 06.07.2022.

Надявам се, че ще ти бъде от полза!

Помощни материали по HTML (пищови)

Интерактивен Html, CSS, JavaScript cheat sheet

Този инструмент изисква основно разбиране на HTML код, тъй като е създаден за уеб разработчици. Няма подробни обяснения. Това е точно като пищов – бързо да намериш кода. Не е място, където да го учиш.

HTML Cheat Sheet

(adsbygoogle = window.adsbygoogle || []).push({});

Виж инфографиката и си изтегли PDF файла.

W3schools

Най-големият сайт за разработчиците. Запомни си го в отметките.

HTML5  пищов от Hostinger.com

Изтегли си го в цветен PDF, в чернобял PDF.

OverAPI

Пищови за HTML, CSS, JavaScript и други:

Digital.com

HTML справочникът тук има пълен списък на всички HTML елементи, включително описания, примери на кодове и живи визуализации. Прегледай всички HTML елементи по азбучен ред или по тяхната категория, или ги изтегли като PDF.

HTML color codes

Таблици на HTML кодове на цветовете.

Tutorial brain

Обхванат е целия HTML от много основно до напреднало ниво и този урок е пълен с примери и препратки.

Beginner’s HTML Cheat Sheet 

Ето още един полезен ресурс за начинаещи. Той включва основна информация за документа и структура на документа, обекти, рамки, списъци, таблици, връзки и атрибути на изображения заедно с примери. Изтегли си целия PNG файл.

Infographic-Canvas Cheat Sheet

В следващия HTML пищов информацията е представена като инфографика. Тук има canvas елементи, 2D контекст, цветове, стилове, сенки, текстове, правоъгълници, трансформация, манипулация на пиксели.

HTML5 Cheat Sheet

Кратък пищов, съдържащ много HTML5 тагове и тяхното значение. Изтегли си PDF.

Интерактивна периодична Таблица на HTML5 елементи

(adsbygoogle = window.adsbygoogle || []).push({});

Таблицата съдържа всички валидни елементи в спецификацията HTML5, групирани според модела на съдържанието (тип елемент).

Помощни материали по CSS

Както се разбира, не могат да се разделят сайтовете с основни информации за HTML и CSS. Например в точка 1. на Пищови за HTML, ще забележиш, че вдясно можеш да кликнеш на CSS, JavaScript cheat sheet.

HTML и CSS Cheat Sheet

Инфографиката е направена от BlueHost. Тя включва неща, които трябва да знаеш за HTML и CSS, за да промениш някои елементи по-бързо, като намалиш HTTP заявките. Това са основни неща за изучаване по HTML и CSS, преди да започнеш да създаваш своя сайт.

Въведение в CSS

Този модул ти дава възможност да започнеш овладяването на CSS – как работи, включително селектори и свойства, писане на CSS правила, прилагане на CSS към HTML, как да се определи дължина, цвят и други единици в CSS, каскада и наследяване, отстраняване на грешки в CSS.

CSS layout cheat sheet

Това е CSS макет, който ти позволява да рисуваш произволен брой решетки (колони и редове) от всякакъв размер.
Искаш ли бърз преглед само със списък с всички пищови, контролни списъци и графики в уебсайта? Ето го!

CSS Click Chart

Примерни кодове и таблицата за поддръжка за новите CSS функции.
Различните примерни кодове са за манипулиране на елементи, като код за оразмеряване на кутии, добавяне на сянка на текст, keyframe анимации, градиенти, transforms и т.н.

CSS Grid Cheat Sheet

CSS Grid Cheat Sheet е добро визуално ръководство за CSS Grid.

Practical CSS Cheat Sheet

Не е лесно винаги да знаеш точния синтаксис или да знаеш всички налични CSS свойства и съответните стойности. За да помогне на CSS разработчиците и дизайнерите, Toptal предлага бърз справочник и то за безплатно изтегляне. Справочникът на CSS включва CSS синтаксис, най-важните селектори, свойства, размери и единици и друга полезна CSS информация в кратък и информативен формат. Пищовът можеш да изтеглиш във вид на PDF файл от сайта. Можеш също да провериш страниците с ресурси Toptal за допълнителна информация.

CSS3 алманах

Няма как да липсва известният сайт css-tricks със своя Справочник за многото функции на CSS.

Най-практичен CSS пищов

Този пищов е проектиран по-практично. Включени са следните секции: селектори, модел на кутията, позициониране, текст и шрифтове, граници и списъци и др. Направен е в пейзажна и портретна форма и е предназначен да бъде отпечатан на лист A4 (стандартен). В сайта ще намериш двата PDF за сваляне.

Tutorial brain

Един от най-добрите справочници за CSS.

The Ultimate Flexbox Cheat Sheet

Всички елементи, включени в пищова, са дадени тук с подходящи примери. Само в случай, че някой от дадените примери не работи, трябва да се увериш, че браузърът ти е актуализиран до последната версия.

Responsive Web Design Cheat Sheet

Използването на този CSS пищов ще ти премахне проблемите с корекцията на отзивчиви проекти. Ако искаш да знаеш правилните размери на точките на прекъсване, не е нужно да търсиш в Google всеки път. Свали си PDF файла.

Мега инфографика на пищов за CSS3

(adsbygoogle = window.adsbygoogle || []).push({});

CSS Cheat Sheet се предлага във версия за печат. Съдържа пълен списък на всички елементи и свойства.
Можеш да си свалиш инфографиката като PDF файл от тук.

Пълно ръководство за Flexbox

Ръководство по Flexbox от Css-tricks, в което се обяснява как да приложиш гъвкави кутии на сайта си, да подравниш и разпределиш пространството между елементи, налични в контейнер, дори ако техният размер е динамичен или не е известен.

Подробен CSS Cheat Sheet

Пищов, удобен за начинаещи, които търсят начини да запомнят всички елементи и CSS тагове. От тук можеш да си свалиш PDF файла.

Помощни материали за JavaScript

Уеб разработчиците знаят, че JavaScript е огромен. Можеш да получиш код от някои добри онлайн библиотеки. Ще ти помогне да изградиш основите.

И все пак, можеш да забравиш определен кодов фрагмент или какво прави някой код.

Ето някои помощни пищови за JavaScript.

Модерен JavaScript

Този документ е пищов за JavaScript.Това ръководство не е предназначено за начинаещи, а да помогне на разработчиците с основни познания да се запознаят с модерните кодови бази. На някои места има и лични съвети от разработчиците на документа.

Пищов всичко в едно

Най-добрият JavaScript Cheat Sheet от тази страна на интернет

Бърз справочник на JavaScript

Няма да ни липсва и Codepen.io с този бърз справочник.

jQuery Selectors Core

Справочник от DZone.com представя jQuery селектори, които ти позволяват да избираш и манипулираш HTML елементи като група или като един елемент в jQuery. Ето PDF файла за теб.

JavaScript пищов

Справочникът съдържа примери за кодове, които обясняват JS концепциите.

Бърз API справочник – jQuery Cheat Sheet

Удобен и интерактивен.

OverAPI с пищов за JavaScript

Вече го видяхме този сайт с интерактивен справочник за CSS. Сега го представям с такъв за JavaScript.

JavaScript в една снимка

Диаграма на мисловна карта (Mind Map), обобщаваща синтаксиса на JavaScript, която включва и практически примери.
Първоначалното намерение на този проект е, да отбележи синтаксиса и основните концепции на JavaScript за лична употреба, които също се използват като учебна програма за преподаване. Ефективността от използването на диаграма на Mind Map за обобщаване на език за програмиране е напълно неочаквана, тя прилича на каталог на наръчника за JavaScript и е изпълнена със синтактични данни. С една снимка / файл, JavaScript програмистите могат не само да имат общ преглед на цялата картина на този език, но и да намерят практични примери за синтаксиса. Мисловната карта може да се свали в PDF и PNG файл от тук.

JavaScript Cheat Sheet за начинаещи

Свали PDF файла от тук.

Заключение

В интернет пространството има много справочни материали за помощ за кодиране на тези три езика. Ясно е, че някои от нещата може да са остарели и променени. Но няма съмнение, че ползата от тези пищови за по-ефективна и ускорена разработка на свързани проекти, е голяма.

А ти имаш ли интересни пищови, с които си помагаш при писане на код?

Източник на основното изображение Pexels.com.