Пищови по HTML, CSS, JavaScript

  •  

HTML, CSS, JavaScript

Кредит Pngtree.com, Freepik.com, (Designed by Freepik)

Защо ни е нужен този списък с пищови по HTML, CSS, JavaScript (cheat sheet)?

Случвало ли ти се е да работиш по някакъв проект, свързан с кодиране на HTML, CSS, JavaScript и да ти потрябват подсказки? Започваш да ровиш по сайтовете, а там откриваш други интересни неща и разсейването е готово.

Понякога, за една линия код можеш да изгубиш ценно време.

Затова се порових и съставих този списък от пищови, от който можеш да се възползваш, да избереш подходящи и полезни неща за твоя проект и да не губиш време.

Пищови за HTML

  1. Интерактивен Html, CSS, JavaScript cheat sheet
    HTML Cheat Sheet 1Този инструмент изисква основно разбиране на HTML код, тъй като е създаден за уеб разработчици. Няма подробни обяснения. Това е точно като пищов – бързо да намериш кода. Не е място, където да го учиш.
  2. HTML Cheat Sheet
    Виж инфографиката и си изтегли PDF файла
  3. W3schools
    Най-големият сайт за разработчиците. Запомни си го в Bookmarks.
  4. HTML5  пищов от Hostinger.com
    Изтегли си го в цветен PDF, в чернобял PDF.
    HTML Cheat Sheet 2
  5. OverAPI
    Пищови за HTML, CSS, JavaScript и други.
    HTML Cheat Sheet 4
  6. Digital.com
    HTML справочникът тук има пълен списък на всички HTML елементи, включително описания, примери на кодове и живи визуализации. Прегледай всички HTML елементи по азбучен ред или по тяхната категория, или ги изтегли като PDF.
  7. HTML color codes
    Таблици на HTML кодове на цветовете.
  8. Tutorial brain
    Обхванат е целия HTML от много основно до напреднало ниво и този урок е пълен с примери и препратки.
  9. Beginner’s HTML Cheat Sheet 
    Ето още един полезен ресурс за начинаещи. Той включва основна информация за документа и структура на документа, обекти, рамки, списъци, таблици, връзки и атрибути на изображения заедно с примери. Свали си целия PNG файл.
    HTML CHEAT SHEET 6-
  10. Infographic-Canvas Cheat Sheet
    В следващия HTML пищов информацията е представена като инфографика. Тук има canvas елементи, 2D контекст, цветове, стилове, сенки, текстове, правоъгълници, трансформация, стил на линия и манипулация на пиксели.
    HTML Cheat Sheet 7
  11. HTML5 Cheat Sheet
    Кратък пищов, съдържащ много HTML5 тагове и тяхното значение. Свали си PDF.
  12. Интерактивна периодична Таблица на HTML5 елементи
    Таблицата съдържа всички валидни елементи в спецификацията HTML5, групирани според модела на съдържанието (тип елемент).
    HTML Cheat Sheet 8

Пищови за CSS

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

  1. HTML и CSS Cheat Sheet
    Инфографиката е направена от BlueHost. Тя включва неща, които трябва да знаеш за HTML и CSS, за да промениш някои елементи по-бързо, като намалиш HTTP заявките. Това са основни неща за изучаване по HTML и CSS, преди да започнеш да създаваш своя сайт.
  2. Въведение в CSS
    Този модул ти дава възможност да започнеш овладяването на CSS – как работи, включително селектори и свойства, писане на CSS правила, прилагане на CSS към HTML, как да се определи дължина, цвят и други единици в CSS, каскада и наследяване, и отстраняване на грешки в CSS.
  3. CSS layout cheat sheet
    Това е CSS макет, който ти позволява да рисуваш произволен брой решетки (колони и редове) от всякакъв размер.
    Искаш ли бърз преглед само със списък с всички пищови, контролни списъци и графики в уебсайта? Ето го!

  4. CSS Click Chart
    Примерни кодове и таблицата за поддръжка за новите CSS функции.
    Различните примерни кодове са за манипулиране на елементи, като код за оразмеряване на кутии, добавяне на сянка на текст, keyframe анимации, градиенти, transforms и т.н.
  5. CSS Grid Cheat Sheet
  6. Practical CSS Cheat Sheet
    Не е лесно винаги да знаеш точния синтаксис или да знаеш всички налични CSS свойства и съответните стойности. За да помогне на CSS разработчиците и дизайнерите, Toptal създаде бърз справочник и го предлага за безплатно изтегляне. Справочникът на CSS включва CSS синтаксис, най-важните селектори, свойства, размери и единици и друга полезна CSS информация в кратък и информативен формат. Пищовът можеш да изтеглиш във вид на PDF файл от сайта. Можеш също да провериш страниците с ресурси Toptal за допълнителна информация.
  7. CSS3 алманах
    Няма как да липсва известния сайт Css-tricks.com със своя Справочник за многото функции на CSS.
  8. Най-практичен CSS пищов
    Този пищов е проектиран по-практично. Включени са следните секции: селектори, модел на кутията, позициониране, текст и шрифтове, граници и списъци и др. Направен е в пейзажна и портретна форма и е предназначен да бъде отпечатан на лист A4 (стандартен). В сайта ще намериш двата PDF за сваляне.
  9. Tutorial brain
    Един от най-добрите справочници за CSS.
  10. The Ultimate Flexbox Cheat Sheet
    Всички елементи, включени в пищова, са дадени тук с подходящи примери. Само в случай, че някой от дадените примери не работи, се увери, че уеб браузърът ти е актуализиран до последната версия.
  11. Responsive Web Design Cheat Sheet
    Използването на този CSS пищов ще ти премахне проблемите с корекцията на отзивчиви проекти. Ако искаш да знаеш правилните размери на точките на прекъсване, не е нужно да търсиш в Google всеки път. Свали си PDF файла.
  12. Мега инфографика на пищов за CSS3
    CSS Cheat Sheet се предлага във версия за печат. Съдържа пълен списък на всички елементи и свойства.
    Можеш да си свалиш инфографиката като PDF файл от тук.
    CSS3MakeAWebsiteHub
  13. Пълно ръководство за Flexbox
    Ръководство по Flexbox от Css-tricks, в което се обяснява как да приложиш гъвкави кутии на сайта си, да подравниш и разпределиш пространството между елементи, налични в контейнер, дори ако техният размер е динамичен или не е известен.
  14. Подробен CSS Cheat Sheet
    Пищов, удобен за начинаещи, които търсят начини да запомнят всички елементи и CSS тагове. От тук можеш да си свалиш PDF файла.

Пищови за JavaScript

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

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

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

  1. Модерен JavaScript
    Този документ е пищов за JavaScript.Това ръководство не е предназначено да те научи JavaScript като начинаещ, а да помогне на разработчиците с основни познания да се запознаят с модерните кодови бази. На някои места има и лични съвети от разработчците на документа.
  2. Пищов всичко в едноjavascript cheat sheet
    Credit: On Blast Blog
  3. Интерактивен JavaScript пищов
    Нали си го спомняш от по-горе – и HTML и CSS пищов.
  4. Бърз справочник на JavaScript
    Няма да ни липсва и Codepen.io с този бърз справочник.
  5. jQuery Selectors Core
    Справочник от DZone.com представя jQuery Селектори, които ти позволяват да избираш и манипулираш HTML елементи като група или като един елемент в jQuery. Ето PDF файла за теб.
  6. JavaScript пищов
    Справочникът съдържа примери за кодове, които обясняват JS концепциите.
  7. Бърз API справочник
    jQuery Cheat Sheet
  8. OverAPI с пищов за JavaScript
    Вече го видяхме този сайт с интерактивен справочник за CSS. Сега го представям с такъв за JavaScript.
  9. JavaScript в една снимка
    Диаграма на мисловна карта (Mind Map), обобщаваща синтаксиса на JavaScript, която включва и практически примери.
    Първоначалното намерение на този проект е, да отбележи синтаксиса и основните концепции на JavaScript за лична употреба, които също се използват като учебна програма за преподаване. Ефективността от използването на диаграма на Mind Map за обобщаване на език за програмиране е напълно неочаквана, тя прилича на каталог на наръчника, който говори за JavaScript и е изпълнена със синтактични данни. С една снимка / файл, JavaScript програмистите могат не само да имат общ преглед на цялата картина на този език, но и да намерят практични примери за синтаксиса. Мисловната карта може да се свали в PDF и PNG файл от тук.
  10. Енциклопедия на JavaScript
    Този справочник на JavaScript е пълна енциклопедия, съдържаща всички основни JavaScript елементи. Виж го тук.
  11. JavaScript Cheat Sheet за начинаещи
    Свали PDF файла от тук.

Заключение

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

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

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


  •  

Коментари

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.