Front-End veb-ishlab chiqaruvchilari uchun eng yaxshi bepul vositalar va manbalarning yakuniy ro'yxati

Bredli Nice tomonidan, ClickHelp.com - dasturiy hujjatlar vositasi tarkibiy menejeri

Old qismni rivojlantirish - bu mijoz ko'radigan va to'g'ridan-to'g'ri aloqada bo'lgan veb-sayt elementlarini ishlab chiqish. Bu dasturlash qobiliyati va estetika kombinatsiyasi.

Old ishlab chiqaruvchilar bilan bog'liq bo'lgan qiyinchiliklar shundaki, veb-saytning old qismini yaratishda ishlatiladigan vositalar va usullar doimiy ravishda o'zgarib turadi va shuning uchun ishlab chiquvchi maydon qanday rivojlanayotganidan doimo xabardor bo'lishi kerak.

Shunday qilib, men bir nechta toifalarga bo'linadigan oldingi ishlab chiqaruvchilar uchun vositalar va manbalar ro'yxatini to'pladim: Ranglar, CSS generatorlari, Kalkulyatorlar va o'zgartiruvchilar, Tipografiya va shriftlar, nishonlar, Veb-sayt uslubini tahlil qilish, muharrirlar, dasturchilar uchun vositalar, sinov, ishlash, Optimallashtirish, fikr-mulohaza, ilhomlantirish, MOOC, telfayerlar, uyatchanliklar va prototiplar, dizayn yangiliklari va hamjamiyat, portfel, manbalar.

Ranglar

Color Hex: Har qanday rang haqida ma'lumot beradigan bepul rang vositasi

Rang tanlash uchun material

Oddiy tekis rang tanlagich: Yuqoridagi tanlagich yordamida clipboardga nusxa oladigan formatni tanlang. Nusxa olmoqchi bo'lgan rangingizni bosing va u tanlangan formatda sizning clipboardga qo'shiladi.

ColorDrop: sizga yoqqan rang kombinatsiyalarini tejashga imkon beradigan ranglarni moslash vositasi.

Palettable: Oldindan dizaynni bilmagan holda chiroyli rang palitralarini yarating.

ColorFavs: Bu ajoyib vositadir, unda rasmingizni tortib olib tashlash, URL manzilini kiritish yoki tasodifiy qiymatlarni tanlash orqali osongina ranglar palitrasini yaratishingiz mumkin.

Rang xavfsizligi: WCAG ko'rsatmalariga asoslangan chiroyli va kirish mumkin bo'lgan rang palitrasi, matn va fon kontrasti nisbati.

Ranglar: Internet uchun oddiy ranglar palitrasi.

SwatchMatic: Haqiqiy dunyo ob'ektlari uchun rang tanlagich. Bu sizga tabiatda ona tomonidan taqdim etilgan urug'li ranglardan foydalanib, tez palitralarni yaratishga imkon beradi. O'zingizning mobil kamerangizni o'zingiz yoqtirgan rangga yo'naltiring va SwatchMatic sizga rangning nomi (bir nechta tillarda) va uni qayta yaratishingiz kerak bo'lgan barcha qiymatlarni aytib beradi, shuningdek sizga sizga mos keladigan boshqa beshta rangni beradi.

uiGradients: Chiroyli rangli gradyanlar.

Veb rang ma'lumotlari: Ushbu loyiha quyidagi savollarga javob berishga qaratilgan: Internetdagi eng keng tarqalgan rang / ranglar yoki ranglar / ranglar qaysi? Ba'zi bir sanoat ma'lum ranglarni boshqalardan ustun qo'yadimi? Odatda qanday ranglar birgalikda topiladi?

Moddiy dizayn ranglari: Ushbu kichik veb-ilova sizga dizayn dizaynining ranglarini vizual ravishda aks ettirishga, shuningdek ranglarni turli formatlarda osongina ko'chirishga yordam beradi.

UI Modeli ranglari: Google-ning materiallarning ranglar palitrasi asosiy va urg'u ranglarini o'z ichiga oladi, ular rasmlarni ko'rsatish yoki brend ranglarini rivojlantirish uchun ishlatilishi mumkin. Ular bir-biri bilan uyg'un ishlashga mo'ljallangan.

BADA55.io: BADA55.io sizning CSS olti ranglaringiz uchun eng badassiz so'zlarni topish haqida.

Colour Hexa: Bu har qanday rang haqida ma'lumot beradigan bepul rang vositasidir. Qidiruv maydoniga har qanday rang qiymatlarini kiriting, shunda u batafsil tavsifni taklif qiladi va avtomatik ravishda uni Hexadecimal, Binary, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE qiymatlarida avtomatik ravishda o'zgartiradi. -LCH, XYZ va xyY.

Kontrast nisbati: Rang kontrasti nisbatlarini osongina hisoblang

Veb-dizaynerlar uchun ellik xil soyalar:

Ranglar: foydalanuvchi rang palitrasi ilhomini yaratdi va baham ko'rdi

Colllor: Ranglar palitrasi generatori

Paletton: rang kombinatsiyalarini yaratish uchun vosita

Chrome Daltonize!: Daltonizatsiya - bu ranglarni ko'rmaydigan foydalanuvchilarga ma'lumotlarni ochib berish, aks holda ular o'tkazib yuborgan narsalarni ko'rish imkoniyatini berish.

CSS generatorlari

CSS3.me: Bu juda minimal va zamonaviy, ammo ayni paytda juda funktsional. Bu sizga chegara radiusini, tushish soyasini, gradyanini va shaffofligini o'zgartirish va sozlash qobiliyatini beradi.

CSS3 Generator: Bu ham funktsional, ham chiroyli tarzda yaratilgan generator. Menimcha, bu mening eng sevimlilarimdan biri, chunki dizayn va UI juda toza.

CSS3-fokuslar tugmasi Maker: Bu deyarli slayder yordamida boshqariladi.

CSS3 Button.net: Uning dizayni etishmasligi mumkin, ammo u avvalgisiga qaraganda ko'proq tanlovni taklif qiladi. Bir nechta matn soyalari, ichki soyalar, chegaralar va shrift ranglarini qo'shish qobiliyatini taklif etadi. Avvaliga buni aniqlash qiyin bo'lishi mumkin, ammo agar siz u bilan bir necha daqiqa o'ynasangiz, siz buni olasiz.

Ultimate CSS Gradient Generator: CSS gradyan generatori

CSS3 Tugma generatori: Bu sizga soyani, chegaralarni, ranglarni boshqarish uchun bitta katta tugmachani beradi va buning ustiga sizga ko'rinishni tahrirlash imkoniyatini beradi.

Border-Radius: Bu minimal amaliy vositadir, bu juda amaliy va sodda. Bajarishingiz mumkin bo'lgan narsa shunchaki har bir burchakda qancha dumaloq qirrani xohlashingizni belgilashdir. Va shundan keyingina siz xohlagan brauzer old qo'shimchasini tekshirib ko'rasiz va u aynan shunda.

Rangli CSS Gradient Background Generator: CSS fonini yarating

EnjoyCSS: barchasi bitta CSS generatorida

CSS MenuMaker: veb-saytlarning sezgir navigatsiyasini yarating

O'chirish / o'chirish: CSS3-ni yoqish / o'chirish uchun kalitlarni yaratish

CSSmatic: Gradient, chegara radiusi, qutining soyasi va shovqinli tuzilma generatori

Ui Parade jonli vositasi: tugma, forma, belgi, tasma quruvchisi

CSS o'qi Iltimos: CSS o'q generatori

CSS3 naqshlar galereyasi: CSS3 naqshlar galereyasi

Layout Generator: CSS tartibini yarating

Tridiv: CSS-da 3D shakllarni yaratish uchun veb-muharrir

Kalkulyatorlar va konvertorlar

DPI Love: har qanday ekranning DPI / PPI-ni toping

CSS Inliner: Elektron pochta manzilingizning CSS-ni avtomatik ravishda kiriting

Kodni obodonlashtirish: JSON, XML, JavaScript, CSS, HTML, Excel dasturini obodonlashtirish, tekshirish, tahrirlash va o'zgartirish

PXtoEM: Piksellarni EM ga o'zgartiring

Zichlik paqirlari: Android va iOS uchun ekran zichligini o'zgartiruvchi

Zichlik konvertori: Pikselli zichlikni o'zgartiruvchi

Bu Retina emasmi?: DPI / PPI Displey kalkulyatori

NTH-test: nth-bola va n-tipdagi Tester

Tipografiya va shriftlar

Google Shriftlari: Ochiq manbali veb-shriftlar

Fontspiratsiya: kulgili va animatsion tipografik asarlar yaratish uchun qurilish vositasi.

Gridlover: Modulli shkala va vertikal ritmga ega tipografik tizimni yaratish vositasi.

Geniusni kiriting: Keyingi loyihangiz uchun mukammal shrift kombinatsiyasini toping.

Type Nugget: Type Nugget - bu onlayn sozlash vositasi bo'lib, sizga hella nozik veb-turini ishonchli bazasini yaxshi boshqarish imkonini beradi - barchasi yoqimli foydalanuvchi interfeysi orqali.

TypeWonder: Har qanday jonli veb-saytda veb-shriftlarni sinab ko'ring

Fit Text: JQuery plagin, veb-turni inflatsiya qilish uchun

TypographyEditor: Typografiya muharriri - bu tipografik plakatlar va rasmlarni tayyorlash uchun bepul va onlayn vositadir.

Faqat mening turi:

Typecast: tipografiyaga asoslangan chiroyli, haqiqiy va izchil dizaynlarni yaratish uchun brauzerga asoslangan ilova.

Shrift kvadrat: qo'lda bepul veb-shriftlar

Dafont: Bepul yuklab olinadigan shriftlarni arxivlash

Shrift oralig'i: Bepul shriftlarni yuklab oling

Geniusni kiriting: Shriftning mukammal kombinatsiyasini toping

Shrift nima: Rasmdagi shriftni aniqlang

FontStruct: FontStruct - bu bepul shriftlarni yaratish vositasi bo'lib, FontShop raqamli dunyoning etakchi chakana sotuvchisi tomonidan qo'llab-quvvatlanadi. FontStruct sizga plitka yoki g'isht singari panjara naqshida joylashtirilgan geometrik shakllardan yasalgan shriftlarni tez va oson yaratishga imkon beradi.

Oddiy siljish: Tipografiya vositasi, ko'rishni istagan so'zni yozing va uni darhol kompyuteringizdagi yozuv oynalarida ko'rasiz.

Shrift almashtirish: Webtype-ning shriftlari bilan veb-saytlarning qanday ko'rinishini oldindan ko'rib chiqing.

tinytype: Turli xil mobil platformalarda mavjud standart shriftlarni ko'rsatadigan moslik jadvali.

Typetester: Adobe Edge, Google va Typekit veb-shriftlarini taqqoslang

Tiff: Google shriftlari orasidagi farqni bilib oling

Best Free Fonts 2016: Mening bepul bepul shriftlar to'plamim

Belgilar

Material Dizayn Belgilari: Google Dizayn tomonidan ishlab chiqarilgan 750 ta glif

Iconogen: Favikonlar, Windows 8 mozaikalari, Apple Touch piktogrammalari, Android va iOS piktogrammalarini yarating

Marka: Chiroyli o'zgartiriladigan piktogramma

Shriftning g'aroyibligi: bir zumda sozlanishi mumkin bo'lgan kengaytiriladigan vektor piktogramma

Maki: Veb-kartografiya uchun piktogramma

To'plam: Internet va foydalanuvchi interfeysi dizayni uchun 300+ piktogramma

Fontello: Belgi shrift generatori

Fontastik: O'zingizning shrift shriftingizni yarating

Iconmonstr: Germaniyalik rassomning glif piktogrammalarining katta to'plami

Octicons: GitHub tomonidan boshlangan piktogramma

GlyphSearch: Shrift Ajoyib, Gliffonlar, IcoMoon, Ionicon va Octiconlardan ikonalarni qidirish

Belgi qovun: Internet uchun SVG piktogrammalar kutubxonasi

Entypo: Daniel Bryus tomonidan ehtiyotkorlik bilan ishlangan premium piktogrammalar to'plami 411

Gemicon: 600+ bepul belgi to'plami, 3 xil o'lchamda keladi (16px, 32px, 64px)

Tipikonlar: Internet interfeysida osongina foydalanish uchun veb-fonga o'rnatilgan bepul foydalanish mumkin bo'lgan vektor belgilari.

Veb-sayt uslubini tahlil qiling

Stylify Me: ranglar, shriftlar, o'lcham va intervallarni o'z ichiga olgan saytning uslubiy ko'rsatmalariga umumiy nuqtai

StyleStats: veb-saytning CSS statistikasini to'plashning oddiy vositasi

Ranglar: Veb-saytning eng keng tarqalgan rangi yoki rangini bilib oling

Type-o-matic: sahifadagi barcha shriftlarni topadigan brauzer kengaytmasi

SnappySnippet: Tanlangan elementdan CSS va HTML-ni osongina chiqarib oling

Muharrirlar

CodePen: Tuzilishi mumkin bo'lgan dastlabki kodli ilg'or texnikalarning ko'rgazmasi

JS Bin: HTML, CSS va JavaScript uchun jonli pastebin va bir qator protsessorlar

CSSDeck: Dizaynerlar va dizaynerlarni jalb qilish uchun ajoyib CSS va JS yaratgan to'plamlar

Dabblet: CSS interfaol maydonchasi va kod almashish vositasi

Liveweave: Liveweave bu veb-dizaynerlar va ishlab chiquvchilar uchun HTML5, CSS3 va JavaScript o'yin maydonchasidir

Adobe Edge Reflow: Ekranning barcha o'lchamlari uchun chiroyli dizaynni yaratishga yordam beradigan dizayn ishingizni to'ldiradigan dizayn vositasi.

veb-oqim: Professional javob veb-saytlarini yaratish uchun veb-sayt quruvchisini torting

Macaw: Sevimli rasm muharriri bilan bir xil moslashuvchanlikni ta'minlaydi, ammo semantik HTML va ajoyib CSS-ni yozadi

Dasturchilar uchun vositalar

Chrome DevTools: Google Chrome ichiga o'rnatilgan veb-mualliflik va tuzatish vositalarining to'plami

Grunt: Vazifalarni avtomatlashtirish uchun JavaScript-ni topshiruvchi dastur

LiveReload: CSS tahriri va rasm o'zgarishi jonlantirish tugmachasini bosmasdan amalga oshiriladi

Bower: Old paketlarni boshqarish muammosini hal qilish

Yeoman: Jenerator ekotizim, asosan tugallangan loyihalarni yoki foydali qismlarni qurib tashlash uchun 'yo' buyrug'i bilan ishlaydigan plagin.

Mendan foydalanishim mumkin: Veb-texnologiyalarni qo'llab-quvvatlash uchun zamonaviy brauzerlarni qo'llab-quvvatlash jadvallari

HTML5 Iltimos: HTML5, CSS3-ni qidirib toping va ular foydalanish uchun tayyor yoki yo'qligini bilib oling

CSS qiymatlari: CSS havolasi, xususiyatlari va qiymatlari

CSS Triggerlari: CSS ishlashiga qanday ta'sir qilishi haqida bebaho ma'lumot

Sinov

W3C belgilashni tasdiqlash: HTML, XHTML, SMIL, MathML-dagi veb-hujjatlarning to'g'riligini tekshiradi

HTML_CodeSniffer: HTML kod kodini tekshiradi va belgilangan kodlash standartining buzilishini aniqlaydi

W3C CSS-ni tasdiqlash: (CSS) va (X) HTML-hujjatlarni uslublar jadvallari bilan tekshiring

CSS Lint: CSS kodingiz bilan bog'liq muammolarni ko'rsatib beradi

JS Lint: JavaScript dasturlarida muammolarni qidiradigan JavaScript dasturi

Pestitsid: CSS tartibini tuzatish

PhantomCSS: PhantomJS yordamida vizual / CSS regressiya sinovlari

QUnit: JavaScript birligining sinov doirasi

Brauzer rasmlari: Xoch platformali brauzer sinovi

Responsator: Saytingiz eng mashhur qurilmalarda qanday ko'rinishini tekshiring

Opera Mobile Classic Emulator: Aniqlangan piksel, piksel zichligi, foydalanuvchi interfeysi bilan bir nechta Opera Mobile Classic nusxalarini tarqatish uchun profil tanlagichidan foydalaning.

Ishlash

Pingdom veb-saytining tezligini sinovdan o'tkazish: jonli sahifaning yuklanish vaqtini sinab ko'ring va tahlil qiling

WebPagetest: Dunyo bo'ylab bir nechta joylardan veb-sayt tezligini sinash

PageSpeed ​​Insight: veb-saytni tahlil qiladi va uni tezroq yuklash usullarini taklif qiladi

GTmetrix: Saytning darajasi va ushbu muammolarni hal qilish bo'yicha tavsiyalar

YSlow: Tahlil qiladi va sahifaning samaradorligini oshirish bo'yicha takliflarni taklif qiladi

Perfmap: Brauzerga yuklangan resurslarning ishlash xaritasi

Optimallashtirish

CSSCSS: Qaysi qoidalar deklaratsiyalarni takrorlashini biling

Helium: javascript vositasi saytingizni skanerlash va ishlatilmagan CSS-ni ko'rsatish

CSS Tidy: Ochiq manbali CSS tahlil qiluvchi va optimizator

CSS Compressor: yuklash tezligini oshirish uchun CSS-ni siqib chiqaring

CSS Dig: CSS-ning barcha xususiyatlarini, ularning chastotasi va o'zgarishini ko'rib chiqing

JavaScript minifier: JavaScript-ni minib oling

FF Subetter: Tarmoq kengligidan foydalanishni optimallashtirish uchun shrift fayllari hajmini kamaytiring

Compressor.io: Yuqori sifatni saqlab turganda, rasmlaringiz hajmini kamaytiring

Prefiks bepul: joriy brauzer prefiksini faqat kerak bo'lganda CSS kodiga qo'shing

Sprite Cow: Sprite varaqlari uchun CSS yarating

TinyPNG: PNG tasvirlari uchun kengaytirilgan yo'qotishli siqish

Adaptive Images: Sizning tashrif buyurganingizning ekran o'lchamlarini aniqlaydi va avtomatik ravishda moslamalarni qayta o'lchovli versiyalarini yaratadi, saqlaydi va etkazib beradi.

Fikr-mulohaza

Bounce: Dizayn bo'yicha fikr-mulohazangizni qo'shing va uni boshqalar bilan baham ko'ring

Dizaynni tushirish: dizayn bo'yicha fikrlarni to'plash vositasi

Peek: O'zingizning saytingizdan foydalangan holda haqiqiy odamning 5 daqiqali videosini ko'ring va eshiting

Ilhom

CoDrops: CoDrops veb-dizaynerlar va boshqa ijodkorlar uchun katta manbalar va ilhomlantiruvchi elementlarning yig'indisi bo'lgan juda mashhur haftalik (yoki shunga o'xshash) jamoaga ega. Juda mashhur va juda foydali.

Designrfix - Grafik dizayn ilhomi - darsliklar va veb-dizayn manbalari: yana bir muhim grafik va veb-dizayn blogi.

OneXtraPixel - Internet-dizayn va ishlab chiqish onlayn jurnali

Dizaynerlar va ishlab chiquvchilar uchun onlayn-jurnal, OXP dizayn va rivojlanish bo'yicha maslahatlar, qo'llanmalar, vositalar, manbalar va boshqa maqolalarni baham ko'radi.

MonsterPost: TemplateMonster asosan andozalar ishlab chiqaruvchi kompaniya, ammo ularda ajoyib bloglar ham bor. Bu nafaqat o'zlarining shaxsiy narsalari haqida, balki ular ko'plab veb-dizayn materiallarini taqdim etishlariga ishonch hosil qilishadi.

FromUpNorth - yuqori sifatli dizayn ilhomi

DesignShack: Dizayn hamjamiyati bilan yana bir bor boy resurslar baham ko'rilmoqda.

Vandelay dizayni: ko'plab juda yaxshi manbalar, bepul narsalar, maqolalar, bitimlar, WordPress materiallari va boshqalar.

DesignM.ag: DesignM.ag bu dizaynerlar, veb-dizaynerlar va ishlab chiquvchilar uchun birlashma.

Veb-dizaynni qayta tahrirlash

Haqiqatan ham blog emas, bu subreddit.

Biroq, yuqoriga ko'tarilgan reddit mexanikasi yuqoriga ko'tarilgan har qanday narsa veb-dizaynerlar uchun juda muhim o'qish ekanligini ta'minlaydi. Bu juda mashhur, eng katta subreditsitlardan biri.

Abduzeedo - Dizayn ilhomi va darslari: Abduzeedo - bu boshqa yo'nalishlardan biri bo'lib, ular dizaynerlar uchun tendentsiyalarning yuqori qismida qolishni va atrofdagi eng yangi va eng zo'r narsalarni bilishni istaydigan dizaynerlar uchun ko'rishlari shart.

tutorialZine - Yuqori sifatli veb-darsliklarni tayyorlash uchun bitta joy: bu asosan veb-darsliklarni tayyorlash uchun qo'llanma jurnalidir. Qo'llanmalar yaxshi yozilgan va ularni bajarish oson.

eWebDesign: eWebDesign - bu veb-dizayn mutaxassislarining eng so'nggi va eng yaxshi maqolalarining yana bir manbai. Veb-dizayn, veb-dasturlar va darsliklar haqidagi hikoyalar. Aslida yangiliklar, shuning uchun siz to'g'ridan-to'g'ri xabarlar qutingizga kirasiz!

WebAppers: ko'plab ochiq va bepul veb-manbalar.

WebNeel - dizayn ilhomi, san'at, fotosurat va animatsiya

CSS Mania - CSS galereyalari: Bu eng mashhur CSS ko'rgazma saytidir. Shunga qaramay, innovatsion veb-dizaynlarni tomosha qilish uchun juda yaxshi sayt.

Siz kuzatishingiz kerak bo'lgan eng muhim 9 veb-dizayn bloglari

MOOK

Kundalik narsalar dizayniga kirish: Dizayni bilan qiziqadigan har bir kishi uchun ma'lumot: kundalik odamlar, texnik odamlar, dizaynerlar va dizayner bo'lmaganlar.

Prototiplash o'zaro aloqasi: chizish, qurish va sinov orqali prototiplashning turli usullarini o'rganing

Grafik dizaynga kirish: grafik dizayn asoslarini (shriftlar, ranglar, rasmlar, fon va tartib) va ularni qanday qo'llashni bilib oling.

HTML va CSS-ga kirish: Raqamli dizayn makkalarini statik veb-sahifalarga qanday o'zgartirishni bilib oling

Veb-ishlab chiqish: Reddit va Hipmunk asoschilaridan biri Stiv Xuffmanning veb-ishlab chiqish asoslarini o'rganing.

Veb-dizaynning javob asoslari: Google-ning Pete LePage-dan foydalangan holda veb-dizayn asoslarini o'rganing

Javob beradigan rasmlar: Zamonaviy Internetda rasmlar bilan qanday ishlashni o'rganing, shunda sizning rasmlaringiz ajoyib ko'rinishi va istalgan qurilmaga tezda yuklanishi mumkin.

HTML5 Tuval: Tuvaldan qanday foydalanishni bilib oling; shakllar, rasmlar va matnlardan foydalangan holda kompozitsiyalarni qanday tuzish kerak; rasmlarda effektlar va filtrlarni qanday yaratish va animatsiyalarni qanday yaratish.

Android ilovalarini ishlab chiqish: Android dasturini qanday yaratishni bilib oling

JavaScript asoslari: JavaScript dasturlash asoslarini bilib oling

Ob'ektga yo'naltirilgan JavaScript: JavaScript ichidagi turli xil ob'ektlarga yo'naltirilgan dasturlash xususiyatlaridan qanday foydalanishni va bundan ham muhimi, qayta ishlatiladigan va saqlanadigan kutubxonalarni qanday yozishni o'rganing.

JavaScript dizayn naqshlari: JavaScript-ni yozishda muammolarni ajratish, yo'l davomida tajriba orttirish muhimligini bilib oling

JavaScript testi: Qizil-yashil-refaktor ish oqimidan foydalanib, JavaScript dasturlarini ishonch bilan yozishni o'rganing

Mobil Internetdan foydalanish tajribasini yaratish: Qanday qilib ulkan moslamali mobil veb-tajribalarni yaratishni bilib oling.

Mobil ishlab chiquvchilar uchun UX Dizayn: Har qanday kod yozilishidan oldin ajoyib dizaynerlar ajoyib dasturlarni rejalashtirish va prototiplashda foydalanadigan usullarga o'ting.

UIKit asoslari: UIKit doirasida yanada qulayroq bo'lish va uning eng ko'p ishlatiladigan tarkibiy qismlarini o'zlashtirish uchun oddiy dasturlar to'plamini yarating.

JQuery dasturiga kirish: jQuery hujjatlarini qanday o'qishni va ma'nosini tushunishni o'rganing.

AJAX bilan tanishish: JavaScript bilan qanday qilib asenkron so'rovlar qilishni (jQuery-ning AJAX funktsiyasidan foydalanib) qanday qilishni o'rganing va buni amalga oshirayotganda nima sodir bo'layotganini yaxshiroq bilib oling.

Veb-sayt ishlashini optimallashtirish: Qanday qilib veb-saytlarni mobil va ish stoli brauzerlari qanday ko'rsatishini tafsilotlariga kirib, tezlikni oshirish uchun qanday qilib optimallashtirishni o'rganing.

Gamifikatsiya dizayni: Gamifikatsiya asoslarini juda amaliy yondashuv bilan o'rganing

Simli ekranlar, maskalar va prototiplar

Origami: Facebook tomonidan yaratilgan zamonaviy foydalanuvchi interfeyslarini loyihalash uchun bepul vosita

Cacoo: diagrammalar, sayt xaritasi, jadval xaritasi, aql xaritasi, simli ramka, UML diagrammasi va tarmoq diagrammasini yarating

Ajablanarlisi: Dropbox yoki ish stolingizdagi rasmlarni istalgan qurilma uchun veb va mobil ilova prototiplariga aylantiring va fikr-mulohazalarni oling

Placeit: iPhone va iPad-ning maskuplarini yarating

MockFlow: Dizaynerlar uchun ishni rejalashtirish, qurish va almashish uchun onlayn xizmatlar

Justinmind: Internet va mobil telefonlar uchun interfaol simframlar

Wireframe.cc: bepul minimal simli telframlash vositasi

Dizayn yangiliklari va hamjamiyati

/ r / web_dizign: Veb-dizaynning pastki versiyasi

/ r / dizayn: Dizayn subreddit

/ r / foydalanish imkoniyati: foydalanuvchi tajribasi, interfeys dizayni yoki inson omillari subreddit

/ r / foydalanish tajribasi: foydalanuvchi tajribasini loyihalashtirish subreddit

Stack Exchange: Grafik Dizayn: Grafik Dizayn bo'yicha mutaxassislar, talabalar va ishqibozlar uchun savol-javoblar

Stack Exchange: foydalanuvchi tajribasi: foydalanuvchi tajribasi tadqiqotchilari va mutaxassislari uchun savol-javob

Front-end Front: Old ishlab chiqaruvchilar savol berishlari, qiziqarli havolalarni ulashishlari va o'z ishlarini jamoatchilikka namoyish qilishi mumkin bo'lgan joy.

Ananas: Dasturchilar va dizaynerlar uchun qo'llanmalar, asboblar va aktivlar markazi

Lockerdome: qiziqishga asoslangan ijtimoiy tarmoq

Dizayner yangiliklari: Dizayn va texnologiyalar sohasidagi odamlar hamjamiyati

DesignFloat: veb-dizayn yangiliklari va maslahatlari

Web Blend: Dizaynerlar, ishlab chiquvchilar va texnologik junkies uchun birlashma

Dizayn yangiliklari: Dizaynerlar va ishlab chiquvchilar tomonidan yozilgan yangiliklar maqolalari, manbalari va darsliklari joylashtirilgan sayt

Portfel

Behance: ijodiy ishlarni namoyish etish va kashf qilish uchun etakchi onlayn platforma

Dribbble: Dizaynni namoyish etadigan, targ'ib qiladigan, kashf etadigan va kashf qiladigan joy

Yuk: Internetda iqtidorli shaxslarning ta'sirini kuchaytirish uchun mavjud vositalarni va tarmoqli kontekstni yaratishga qaratilgan shaxsiy nashriyot platformasi

DeviantArt: foydalanuvchilar tomonidan yaratilgan turli xil san'at asarlarini namoyish etuvchi onlayn hamjamiyat

Resurslar

Vektorli ochiq fond: bepul vektorli grafika

Tugmalar: Sass & Compass-da yaratilgan CSS tugmalar kutubxonasi

Bootflat: Bootstrap 3.3.0 CSS-ga asoslangan ochiq manbaa Flat UI KIT

Animate.css: CSS ko'rsatmalarining brauzerlararo kutubxonasi

CSS Shake: CSS sahifangiz yoki ilovangiz uchun grafikalar va ikonkalarni silkitadi

Subtle Patterns: bepul teksturali teksturali naqshlar

Placehold.it: rasm to'ldiruvchisi

Holder.js: mijozning yon rasmini to'ldiradigan joylar

Hammer.js: Veb-saytingizga ko'p tegishli imo-ishoralarni qo'shing

Textillate: CSS3 matnli animatsiyalar uchun oddiy plagin

Timeline JS: Foydalanish oson va intuitiv tarzda yaratilgan chiroyli jadvallar

Modernizr: foydalanuvchi brauzerida HTML5 va CSS3 xususiyatlarini aniqlaydigan JavaScript kutubxonasi

Izotop: veb-saytingiz uchun filtrlanadigan portfel yarating

Polimer: tugmadan tortib to ish stolida, mobil qurilmada va undan tashqarida to'liq dasturni yaratishni oson va tezlashtiradi

CodyHouse: HTML, CSS, JS nuggetlarining bepul kutubxonasi

Cheetyr: Dizaynerlar va ishlab chiquvchilar uchun cheat varaqlari va yorliqlar to'plami

Varaq: Internetda do'stona interfaol xaritalar uchun ochiq manbali JavaScript kutubxonasi

Kamtarona xaritalar: interfaol xaritalar uchun bepul kutubxona

Templated: Cherry + AJ tomonidan ishlab chiqilgan 846 bepul CSS va HTML5 sayt shablonlari to'plami.

GraphicBurger: Jamiyat uchun bepul taqdim etiladigan dizayn manbalari

Hayrli kun!

Bredli Nitsa,
Kontent menejeri ClickHelp.com - SaaS sotuvchilari uchun eng yaxshi onlayn hujjatlar to'plami