README.md

Önce Reklam 😁😁

Reklamlar.... Hanımların dikkatine hem tasarım hemde yazılım makinesi ayağınıza geldi...😂

Kendinize özel bir tasarıma sahip statik bir web sitesi yaptırmak mı istiyorsunuz? Ama bunun için hem tasarımcı hemde yazılımcı ile anlaşmanız mı gerekiyor? Artık gerekmiyor. Ben Musa Yazlık isteklerinize uygun olarak sadece size özel olan statik web sitenizin tasarımını figma üzerinde yaptıktan sonra html5,css3(scss) ve javascript dillerini kullanarak seo'ya uygun kodlama ile statik web sitenizi yapabilirim. İletişim için aşağıdaki bağlantıları kullanabilirsiniz.

Yazılımcılar İçin Ücretsiz Faydalı Kaynaklar (v1.5)

Herkese merhabalar.🖐 Söze nasıl başlayacağımı bilemedim. Şöyle kısaca kendimden bahsettikten sonra depo ile ilgili bilgiler vereyim diyorum nasıl olur?😁 İsmim Musa Yazlık. 24 yaşındayım. Erciyes üniversitesi kayseri meslek yüksek okulu Bilgisayar programcılığı mezunuyum. Kendimi 2017 yılının haziran ayından bu yana web tasarım ve web yazılım alanında geliştirmekteyim. Şu anda ise hobi amaçlı figma öğreniyorum ve tasarımlar yapıyorum. Uzmanlık olarakta Web alanının Frontend tarafında kendimi geliştirmeye devam ediyorum.

Şimdi depo ile ilgili bilgi verirsem. Dediğim gibi 2017 yılının haziran ayından bu yana web alanı ile uğraşıyorum. Bu geçen 4 yılda çok fazla araştırma yaptım,kaynak topladım. Tabi bu kaynakları şimdiye kadar kendim faydalanmak amaçlı topladığım için pek bir düzenli topladığım söylenemez. Bu depo ile hem o düzeni oturtturmak istiyorum hemde benim sahip olduğum kaynaklara genç yazılımcılarında kolay bir şekilde ulaşmasını istiyorum.

Bu depoda ne gibi şeyler olacak?

Web tasarım ve web tasarım ile ilgili ücretli,ücretsiz her türlü kaynak olacak desem çok sade bir cevap olur sanırım. Ben bir kaç madde ile olacaklardan bahsedeyim.

1. 🏫 Udemy eğitimlerini çekiliş ile veren veya direk olarak ücretsiz olarak yayınlayan instagram hesapları ve telegram grupları. (Ben bu sayede 570 den fazla eğitime ücretsiz sahip oldum.)
2. 👨‍👧‍👦 Her yazılımcının katılması gereken discord ve telegram grupları.
3. 🔖 Tarayıcıda bulunan bookmark(yer imi, yer işaretleri). (Bunun içinde bir bir türlü site. Html,Css,Javascript,Php ile ilgili topladığım tüm siteleri paylaşacağım)
4. #️⃣ Yaptığınız projeleri demo link olarak paylaşabileceğiniz siteler.
5. #️⃣ Her yazılımcının takip etmesi gerektiği siteler.
6. 🎓 Üniversite öğrencileri için ücretsiz olan kaynaklar.
7. #️⃣Tarayıcıda kullandığım eklentiler.
8. 🤑 Para kazanabileceğiniz freelance siteler.
9. ▶️ Takip ettiğim Youtube kanalları.
10. 🧔 Mentör desteği alabileceğiniz ücretli ücretsiz siteler gruplar.
11. 🤩 Daha daha birçok şey var... 🤩

Takip Ettiğim İnstagram Hesapları

Ücretsiz udemy eğitimlerine takip ettiğim instagram hesaplarından ve üye olduğum telegram gruplarından elde ediyorum. Takip ettiğim instagram hesaplarının çekilişlerine katılmıyorum sadece hikayelerinde ücretsiz bir kurs paylaştıklarında hemen kapıyorum.😅 Tabi sadece udemy kursu kapmak için takip etmiyorum. Bu takip ettiğim hesaplar web tasarım,web yazılım veya girişimcilik ile ilgili paylaşımlarda yapıyorlar. Onlarda hoşuma gidiyor. Normalde artık instagram hesabımı aktif bir şekilde kullanmıyorum ama isterseniz buraya tıklayarak beni takip edebilirsiniz.😁

1. workshoperscomm : Bolca ücretsiz ve sertifikalı online eğitim veren bir kuruluş.
2. girisimcikafasi : Girişimcilikle ilgili motivasyon ve öneri içerikleri paylaşan bir hesap.
3. algoritmikfikir : Yazılım alanı ile ilgili genelde bilgi içerikleri paylaşan bir hesap.
4. yazilimoji : Yazılım alanı ile ilgili bilgi ve komik içerikler paylaşan bir hesap.
5. yazilimkafasi_ : Yine yazılım alanı ile ilgili küçük kod parçacıkları,bolca kendi ortamını ve motivasyon içeriği paylaşan bir hesap.
6. kod.efendi : Yazılım alanı ile ilgili bilgi içerikleri paylaşan bir hesap.
7. kerokod : Yazılım alanı ile ilgili bilgi,motivasyon ve komik içerikler paylaşan bir hesap.
8. seyyar.tasarimci : Freelance olarak çalışan bir tasarımcı. Yaptığı iş ile ilgili bilgi içerikleri paylaşıyor.
9. prototurk.official : Tayfun erbilen i bilmeyen yoktur her halde. 😀 Web yazılım ile ilgili içerikler paylaşıyor.
10. tolgahan.webdev : Web yazılım alanı ile ilgili bolca içerik paylaşan bir hesap.
11. codemvia : Mentör veya menteeleri birleştirmek amaçlı kuruşmuş bir kuruluştur. Mentörlük hizmeti ücretsizdir.
12. luisdanielroviracontreras : Yapmış olduğu tasarımları kodları ile paylaşan bir hesap.
13. siber_ybs : Yazılım ile ilgili genelde komik içerikler paylaşan bir hesap.
14. kodlarintercumani : Yazılım ile ilgili bilgi içerikleri paylaşan bir hesap.
15. btkakademi : Btk akademinin resmi instagram hesabı. Bazen eğitmenler ile de canlı yayın yapılmakta.
16. kodmuhendisi : Yazılım ile ilgili bilgi içerikleri paylaşan bir hesap.
17. yazilimturk : Bilgi ve mizah odaklı paylaşımlar yapan bir yazılım toplulugudur.
18. yazilimtoplulugu : Yazılım ile ilgili komik içerikler paylaşan bir hesap.
19. yazilimci.genclik : Yazılım ile ilgili komik,bilgi ve motivasyon içerikleri paylaşan bir hesap.
20. kodrehberi : Yazılım ile ilgili komik,bilgi ve motivasyon içerikleri paylaşan bir hesap.
21. gencyazilimci : Yazılım ile ilgili komik içerikler paylaşan bir hesap.
22. yazilimci.adamm : Yazılım ile ilgili komik,bilgi,motivasyon ve gündem içerikleri paylaşan bir hesap.
23. endertopaloglu : Aktif olarak instagram hesabında içerik paylaşmıyor ama youtube kanalına bakmanızı öneririm. Usta bir tasarımcı. Tasarım babası. 😂
24. kerimcanyektekcom : Karekod un kurucusu.
25. uxswipe : Tasarım ile ilgili bilgi içerikleri paylaşan bir hesap.
26. ui8net : UI ile ilgili tasarımlar paylaşan bir hesap.
27. web.talk : Taarım ile ilgili bilgiler paylaşan bir hesap.
28. uiturkiye : Tasarım ile ilgili bilgiler dosyalar paylaşan hesap. Bu arada içerikler türkçe.😁
29. interfacely : Tasarım örnekleri ve o örnekte kullanılan yapılar ile ilgili içerikler paylaşan bir hesap.
30. ux.ferdicildiz : Uzman bir tasarımcı. Youtube kanalına bakmanızı öneririm.
31. designspective : Tasarım ile ilgili içerikler paylaşan bir hesap.
32. uidacozeriz : Bazı firmaların ui tasarımlarını inceleyen bir hesap. Youtube kanallarına bakmanızı öneririm.
33. afshint2y : Severek takip ettiğim bir grafik tasarımcısı. İconset lerini kullanıyorum bolca tasarımlarımda.
34. amirbaqian : Bir üsteki ile aynı.
35. awsmd_com : Tasarım ile ilgili içerikler paylaşan bir hesap.
36. ui_gradient : Tasarım ile ilgili bilgi içerikleri paylaşan bir hesap.
37. ademilter : Severek takip ettiğim bir yazılımcı. İnstagram hesabını kişisel içerikler paylaşmak için kullanıyor. Youtube kanalına bakmanızı öneririm.
38. ux.base : UX ile ilgili bilgi içerikleri paylaşan bir hesap.
39. uxbucket : UX ile ilgili bilgi içerikleri paylaşan bir hesap.
40. qclaydesign : Tasarım ile ilgili içerikler paylaşan bir hesap.
41. uiuxdailytips : UI ve UX ile ilgili bilgiler paylaşan bir hesap.
42. codinggyan : Yazılım ile ilgili içerikler paylaşan bir hesap.
43. coding.beast : Yazılım ile ilgili içerikler paylaşan bir hesap.
44. ahmetekincicomtr : Dijital içerik üreten bir hesap.
45. ravi.graphicdesigner : Tasarım ile ilgili içerikler paylaşan bir hesap.
46. grafikirfan : Takip ettiğim bir grafik tasarımcısı.
47. talha.creative : Severek takip ettiğim bir UI/UX Tasarımcısı. Güzel içerikler paylaşıyor. Söylemeden geçemeyeceğim.
48. busra.ui : Güzel içerikler paylaşan bir tasarımcı.
49. developer_nikhil27 : Güzel içerikler paylaşan bir frontend developer.
50. ankitcreatives : Tasarımcılar için takip etmesini önerdiğim bir instagram hesabı.
51. designill4u : Yine takip ettiğim bir tasarımcı instagram hesabı.
52. thalion_pb : Tasarım ile ilgili içerikler paylaşan bir hesap.
53. ariqchowdhury.uiux : Tasarım ile ilgili içerikler paylaşan bir hesap.
54. bydanromero : Tasarım ile ilgili içerikler paylaşan bir hesap.
55. satyam.js : Yazılım ile ilgili içerikler paylaşan bir hesap.
56. onlysiamak : Yazılım ve tasarım ile ilgili içerikler paylaşan bir hesap.
57. ui__ux : Tasarım ile ilgili içerikler paylaşan bir hesap.
58. lubnadev : Web yazılım ile ilgili içerikler paylaşan bir hesap.
59. janm_ux : Tasarım ile ilgili içerikler paylaşan bir hesap.
60. orix.agency : Tasarım ile ilgili içerikler paylaşan bir hesap.
61. uxcel.app : Tasarım ile ilgili içerikler paylaşan bir hesap.
62. michael.filipiuk : Tasarım ile ilgili içerikler paylaşan bir hesap.
63. thewebdeveloper_ : Web yazılım ile ilgili içerikler paylaşan bir hesap.
64. themizko : Web tasarım ile ilgili içerikler paylaşan bir hesap.
65. ui.colour : Daha çok renkler ile ilgili içerikler paylaşan bir hesap.
66. ransegall : Tasarım ile ilgili içerikler paylaşan bir hesap.
67. colours.cafe : Renk uyumluluğu ile ilgili renk kitleri paylaşan bir hesap.
68. uxbrainy : Tasarım ile ilgili içerikler paylaşan bir hesap.
69. wilycoder : Genelde web yazılım ile ilgili bilgilendirici içerikler paylaşan bir hesap.
70. kod_evreni : Yazılımcı bir abimiz. 😀 Genel anlamda kişisel paylaşımlar yapan bir hesap.

Üye Olduğum Telegram Grupları

1. Yazılım Topluluğu
2. Kablosuzkedi
3. YazılımTürk 🇹🇷
4. Yazılım Eğitim
5. ./prototurk
6. Laravel İstanbul
7. Sadık Turan
8. Geleceğini Tasarlayanlar
9. FULL STACK DEVELOPERS
10. Kod Rehberi
11. ReactJS Turkey
12. Yazılım İş İlanları
13. Vue.js & Nuxt.js
14. Yazılımcı Gençlik
15. #herkesicinegitim
16. Codemvia Frontend Devs
17. Donanım & Bilgisayar Sorunları
18. Askıda Eğitim 📚
19. İLETİŞİM - SEYYAR TASARIMCI ⭐️
20. Yazılım Yardımlaşma
21. KEROKOD KÜTÜPHANE 📚
22. Codem<ia Topluluğu
23. Tasarım Yardımlaşma
24. Seo Yardımlaşma
25. Hayallerini Kodlayanlar - mstfkrtll
26. KodRehberi Kaynak
27. Türkçe Kaynaklar Kanalı

Abone Olduğum Youtube Kanalları

Güzel bir bölüme geldik. Siz yapıyor musunuz bilmiyorum ama ben her hafta 1 saatimi "Html,css,javascript design" gibi kelimeleri kullanarak youtube da yeni kanallar bulmaya çalışıyorum. Bulduklarıma da abone oluyorum. Ben yaklaşık 100 kanala abone olmuşumdur diye düşünüyordum. Ama tamı tamına 224 kanala abone olmuşum. Vay canına 😅. Bu kanalların Web tasarım ve Web yazılım ile ilgili kanallar. Ama aralarında farklı kanallarda var. Her zaman yazılım olmuyor birazda eğlenmek şart. 😁

1. Abdullah Zübeyir Yıldız
2. Academind
3. ACM HACETTEPE
4. Adem Ilter
5. Adrian Twarog
6. Ahmet Buğra Çakıcı
7. Ahmet Rende
8. AHP Tech
9. Alessandro Castellani
10. Alper Akyüz
11. Alperen Ertürk
12. Animation Coding
13. Arin Yazilim
14. Armağan Amcalar
15. Armağan Gökçe
16. ArmyYazılım
17. Atetax Software
18. Atil Samancioglu
19. AYBÜ BİLTEK - Bilim ve Teknoloji Topluluğu
20. Barış Özcan
21. Batuhan Zorbey Zengin
22. Bedimcode
23. Berke Küsmenoğlu
24. BEST AKADEMİ
25. bestcloudforme
26. Bewakuf Designer
27. bidoluyazılım
28. Bilgisayar Genetiği
29. Bilgisayar Mühendisliği
30. Bitfumes
31. bmakukariyer
32. BookMark Code
33. Brian Design
34. Bro Jenuel
35. BTK Akademi
36. Burak Doğan
37. Buğra & Aybars AYAN
38. Buğra Yazar
39. Can Deger
40. Can Gökçeaslan
41. ChornyGlaza
42. Chris Coyier
43. cihan koc
44. CODE HASH
45. Code Of The Day
46. Code Resource
47. codefoxx
48. Codeigniter Hocası
49. CodeInFarm
50. Coder in Chief
51. codevo
52. Codic Gyan
53. Coding Artist
54. Coding Circle
55. Coding Gyan
56. Coding Market
57. Codingflag
58. CodingLab
59. CodingNepal
60. codingwithdidem
61. Computer Code
62. Çay Kahve İnsan
63. DarkCode
64. Daron Yondem
65. dcode
66. DeepLab.Bootcamp
67. Demet Tuncer
68. Design Medium
69. DesignCourse
70. DesignGost
71. Designus
72. Dev Dev Show
73. Dev Ed
74. Divinector
75. Easy Tutorials
76. EGE SABAHCI
77. egirişim
78. Emrah Yüksel
79. Emrah Öz
80. Ender Topaloğlu
81. Enes Tuzlu
82. Engin Demiroğ
83. Eren Alkış
84. Erhan Kahraman
85. FalconMasters
86. Fatih Acet
87. Fatih Girgiç
88. Fatih Şenol
89. Fehmi UYAR
90. Ferdi Cildiz
91. FK LANGUAGE
92. Florin Pop
93. Franks laboratory
94. Fransix Web
95. freeCodeCamp.org
96. Funda İydir
97. GDG & WTM Tekirdağ
98. GDG / WTM Kirklareli
99. GDG Istanbul
100. GDG&WTM Kayseri
101. Going-To Internet
102. Google Developer Communities Turkey
103. GTU Bilgisayar Topluluğu
104. GYGRUP - Youtube
105. Hakan Ertan
106. halil ibrahim yavuz
107. hasan gürsan
108. Hikmet Anıl Öztekin
109. How 2 Create
110. I Make Design Easy
111. Innovation Teach
112. JavaScript Mastery
113. Jesse Showalter
114. Julio Codes
115. K2classroom
116. kablosuzkedi
117. KeroKOD
118. Kod Günlüğüm
119. KODAKTIF VIDEO EGITIM
120. Kodla Ogren
121. Kodluyoruz
122. Koray SADIKLAR
123. Laravel Daily
124. LearnCode.academy
125. LearnDesign
126. LearnWebCode
127. Mahallenin Yazılımcısı
128. Make Coding Easier
129. Mehmet Ali FIRAT
130. Mehmet Online
131. Mert Buldur
132. Mert ÖZEN
133. MinzCode
134. Mohammad Rakib
135. moradam
136. Mr Digital
137. Mr. Web Designer
138. Muhammet İlbaş
139. Mustafa Değirmenci
140. Mustafa Filiz
141. nezihi gözen
142. OctAcademy
143. Okan DAVUT
144. Omer Celikel
145. Online Tutorials
146. Online web ustaad
147. Orhan Dogan
148. Ozan Teoman Dayanan
149. Oğur UYANIK
150. Paradox Way
151. Paylaştıkça
152. Penguin Digital
153. PHP Türkiye
154. pixeladam
155. povodu
156. Prisync Labs
157. PROTOTURK
158. RaddyTheBrand
159. Raptiye
160. Sadık Bahadır Memiş
161. Sadık Turan
162. Sanagrafi
163. sanalonyedi
164. Selahattin Ünlü
165. Selman Kahya
166. Selman Kahya | Teknik
167. Siber Güvenlik Eğitimleri
168. Sifirdan Bire Hersey
169. Sinan Soylu
170. Slobodan Gajic
171. smashtheshell
172. SoengSouy Webdesign
173. SoftCode
174. SOSYAL BİLİŞİM
175. Tahsin Berk Ceylan
176. Tarik Guney
177. Tasarımcı Dayı
178. Tayfun Erbilen
179. Techie Coder
180. Tekno Dershane
181. The Net Ninja
182. The Tom Media
183. The WebShala
184. Thu Nghiem
185. Traversy Media
186. Trikz On Tip
187. True Coder
188. Tuat Tran Anh
189. Tuncer Turna
190. Ugur Umutluoglu
191. UI'da Çözeriz
192. Unicoder
193. UX' minimal
194. Uygula Öğren
195. Uğur Aktaş
196. Uğurcan Çetin & Mahmut Yıldız
197. Ücretsiz Yazılım Dersleri
198. Ümit Ünver
199. Veysel AKBULUT
200. Video Kod
201. Vishweb Design
202. WDS Web Developer Student
203. Web Makinası
204. Web Velocity
205. WebKitCoding
206. WebsCode Media
207. Workshopers
208. wpshopmart
209. Xir Forum
210. Yakın Kampüs
211. Yashwanth B
212. Yazilimciolmakistiyorum
213. Yazılım Bilimi
214. Yazılım Eğitim
215. Yazılım Kafası
216. Yazılım Yolcusu
217. Yazılım İlk Adım
218. Yazılım Dilleri Eğitimleri
219. Yazılımcı Erkek
220. Yordam
221. Yusuf DİNÇYAR
222. Yücel Alkan
223. Zamansız Eğitimler
224. Zekeriya Mulbay

Bookmarks (Yer İşaretleri)

Bir yazılım dili öğrenirken veya bir şey araştırırken ilgimi çeken bazı siteler oluyordu. Herkesin yaptığı gibi bende tarayıcının yer işaretleri (yer imleri) kısmına kayıt ederim. Son günlerde yer imleri klasörler halinde düzenledim. Ama klasörler içerisine atmış olduğum siteleri pekte düzenlediğimi söyleyemem. Burada ise yer imlere kaydetmiş olduğum siteleri hem sizler ile paylaşacağım hemde klasörlerin içerisini düzenlemiş olacağım.

Social Klasörü

1. Reddit : İngilizce bir site. Sorularımı genel anlamda bu sitede paylaşıyorum. İnanın ki türkçe sitelere göre daha net ve hızlı yanıtlar alıyorum.
2. stackoverflow : Bilgisayar programcılığı ile ilgili kullanıcı odaklı soru cevap sitesi.
3. Kommunity : Etkinliklere katılmak istiyorsunuz ama bulamıyorm musunuz? Aha tam yeri.
4. Laravel Türkiye Forumları : Laravel Framework u için kurulmuş bir yardımlaşma sitesi.
5. Wordpress Development : Wordpress geliştiricilerin yardımlaşma yeri.
6. Kod Mühendisleri Topluluğu : Dili Türkçe olan yazılılımcıların yardımlaşma sitesi.
7. WMaracı : Webmaster yardımlaşma sitesi.
8. R10 : Herkesin üye olması gerektiği bir site. Ama tabi üyelikler davet kodu ile mümkün.
9. Atom Discuss : Atom kod editörü için bir yardımlaşma sitesi.
10. Meetup : Gerçek hayattaki grup buluşmalarını kolaylaştıran bir sosyal ağ.
11. Dev.to : Geliştiricilerin blog yazılarını paylaştığı medium gibi bir blog sitesi. Çok güzel bir site bağımlı oldum siteye. 😁
12. Polygram : Bir kolajin yapmış olduğu bir yardımlaşma forumu. (ingilizce)
13. Spectrum : Tasarımcılar ve yazılımcıların belli bir alanda grup oluşturulmuş gruplarda sohbet veya soru sormasını sağlayan bir forum. Tanım pek iyi olmadı ama bakmanızı öneririm.
14. Mesuthoca : Mesut hocanın forum sitesi.
15. Stackexchange : Bu sitede sorularınızı sorabileceğiniz güzel bir forum sitesi. Ama ingilizce.
16. Indiehackers : Online projeler geliştiren insanlar topluluğu.
17. yen.chat
18. webdeveloper : Yazılımcılar için basit bir forum sitesi.
19. sitepoint : Yazılım ile ilgili Sorularına cevap alabileceğiniz güzel bir forum (Community) sitesi.
20. coffeecup : Hem yazılım ile ilgili hemde web tasarım ile ilgili sorularınızı sorabileceğiz bir forum sitesi.
21. hashnode : Geliştiricile için bir blog platformudur..
22. hackernoon : Yazılım ile ilgili blog yazılarının paylaşıldığı bir site.
23. remoteclan
24. devdojo : Geliştiricilerin blog yazıları paylaştığı bir platformdur.
25. monthcamp : Geliştiriciler için kurulmuş bir soru cevap platfromudur.

Document Klasörü

Bu klasörü yeni oluşturdum. Bu klasörde öğrenmiş olduğum css,javascript,node.js ve php ile ilgili kütüphanelerin dokümantasyon sayfalarını ve dillere ait hoşuma giden siteleri tutmaya başladım.

1. W3schools : Web yazılımcıların mutlaka bir kez de olsa bakmış olduğu müthiş bir site.
2. Bootstrap 5 : Bootstrap css kütüphenesinin dokümantasyon sayfası.
3. Wordpress Developer Reference : Wordpress developer dokümantasyon sayfası.
4. Jquery : Jquery dokümantasyon sayfası.
5. Htmlreference : Html ile ilgili bir Reference sitesi. Bu sitenin tasarımı cok hoşuma gidiyor.
6. Cssreference : Css ile ilgili bir Reference sitesi. Yukarıdaki sitenin aynısı
7. Emmet : Kodlama yaparken emmet kullanmıyorsanız büyük işkence çekiyorsunuz demektir. Emmet kod yazmayı kolaylaştırır.
8. Mozilla Developer : Web yazılımcılar için güzel bir site.
9. Roadmap : Yazılım öğreniyorum ama nasıl yol izlemeliyim diye soruyor isen bu siteye mutlaka bakmalısın.
10. Listium : Herkesin kendi listesini oluşturabildiği bir site ama ben birisinin en popüler js kütüphanelerinin listesini yaptığı bir liste buldum buraya eklemek istedim.
11. Bulma : Bootstrap gibi güzel bir css kütüphanesi.
12. Reactjs : Javascript öğrendikten sonra mutlaka öğrenilmesi gerekilen bir javascrip kütüphanesi.
13. Vuejs : Javascript öğrendikten sonra mutlaka öğrenilmesi gerekilen bir javascrip kütüphanesi. React a göre öğrenilmesi daha basittir.
14. shortcode : Html,css,javascript ve laravel gibi dillerde küçük kod örneklerinin ve anlatılarının olduğu bir site.
15. devdocs : Yukarıdakinin aynısı ama daha iyisi.
16. Goalkicker Book : Bir çok yazılım dilinin kitaplarının olduğu bir site. (Betik ve işaretleme dillerininde kitapları bulunuyor Ama hepsi ingilizce)
17. npmjs commands : Npm CLI komutları ile ilgili bir Docs sitesidir.

Html Klasörü

Html ile ilgili çok fazla site depolamamışım. Zaten kolay bir dildir. Ama yinede bu dokümantasyona bu klasörün içerisinde bulunan siteleride eklemek istedim.

1. W3schools : Anlatmaya gerek yok görüyorsuuzz. 😂
2. Htmlreference
3. Htmldersleri : Türkçe bir site ingilizceden anlamıyorum ben diyorsanız.
4. Lifeacode : Bu sitede daha düzenli bir şekilde anlatıyor html etiketlerini. Ama ben youtube dan fehmi uyar kanalına bakmanızı öneririm.
5. m5bilisim : Her html etileti ile ilgili detaylı bilgi veren türkçe bir sitedir.

Css Klasörü

Html web sitesini iskeletidir. Css ile onu süslü gösteren her şeydir. Ben biraz daha UI bakışlı birisiyim bu yüzden css ile ilgili çok fazla site toplamışım. Birazda onlara bakalım. Bu klasörde bolca kütüphane biliktirmişim mutlaka bilmediğiniz bir css kütüphanesi vardır.😀

Education

1. css_reference
2. csslayout
3. mehsatek
4. magic-of-css
5. You-need-to-know-css

Libraries & Frameworks

1. getbootstrap
2. materializecss
3. normalize.css
4. placeholder-loading
5. foundation
6. minicss
7. bulma
8. getuikit
9. webui
10. getskeleton
11. semantic
12. minstyle
13. getmdl
14. minireset.css
15. purecss
16. luxbar
17. tailwindcss
18. cardinalcss
19. blazeui
20. metafizzy
21. shoelace
22. web-grid
23. chartscss
24. tailwind-starter-kit
25. watercss
26. shorthandcss
27. gethalfmoon
28. spectre
29. bttn
30. mui-treasury

Tools

1. Carbon
2. Clippy
3. Malven
4. autoprefixer
5. bootstrap-magic
6. getwaves
7. unused
8. mybrandnewlogo
9. xscoder

Animations

1. animista
2. vivify
3. justinaguilar
4. animate.style
5. ianlunn Hover
6. minimamente
7. csshake
8. Effeckt.css
9. tuesday
10. Dynamic.css
11. wickedCSS
12. Animatopy
13. animatelo
14. all-animation
15. cssfx
16. csswand
17. animsition
18. animatedbackgrounds
19. webslides
20. konstaui

Small Structures

1. Pie-Menu
2. redq-megamenu
3. spinkit
4. loaders
5. crayon
6. jessepollak
7. tailblocks
8. flexboxpatterns
9. getcssscan
10. styler
11. markodenic

Others

1. cssnano

Javascript Klasörü

1. Jquery
2. Owlcarousel2 : Türkçesi atlı karınca olarak geçen Carousel yapımı için güzel bir kütüphane. Haber sitelerinde gördüğünüz sağa sola kayan resimli kartlar vardır. İşte onların yapımında kullanılıyor.
3. Chartjs : Veri görselleştirme için 8 grafik türünü destekleyen ücretsiz bir açık kaynaklı JavaScript kütüphanesidir: bar, çizgi, alan, pasta, kabarcık, radar, polar ve dağılım.
4. Sigmajs : Grafik çizimine adanmış bir JavaScript kütüphanesi.
5. Pizza-pie-charts : Chartjs e benzer bir kütüphane.
6. Electronjs : Javascript kullanarak masaüstü program yapılabilir mi diye soranlar için visual studio code bu javascript kütüphanesi kullanılarak yapılmış.
7. Hammerjs : Nesneyi sürükleme bırakma işlemlerini yapabileceğiniz bir kütüphane. Üstelik mobil uyumlu.
8. Sortable : Hammerjs gibi bir kütüphane.
9. Swiperjs : Owlcarousel2 benzer bir kütüphane ama daha iyisi.
10. Alpine
11. Aurelia
12. D3js
13. Taucharts
14. Animejs
15. Fancyapps
16. Jarallax : Arka plan görüntüleri için pürüzsüz paralaks kaydırma efekti verebileceğiniz bir kütüphane.
17. Aquarelle
18. FunnyText : Yazılar üzerinde güzel animasyonlar yapabileceğiniz bir kütüphane.
19. FullPage : Full sayfa üzerinde güzel animasyonlar ile geçiş yapmak için kullanılan bir kütüphane.
20. PagePiling : Yukarıdaki ile aynı işi yapıyor.
21. MultiScroll
22. Vanilla-tilt.js
23. Jquerypp
24. Anijs
25. Bouncejs
26. Magnific Popup : Resmin üzerine tıklanınca popup olarak açılmasını sağlayan bir kütüphane.
27. Apexcharts
28. Mapbox
29. Urlcat
30. Slick
31. Modernizr
32. Axios
33. Webpack Boilerplate
34. Eggjs
35. Cypress
36. Echarts
37. Editorjs
38. Revealjs
39. Slidev
40. Keystonejs
41. Crank.js
42. Sweetalert
43. Serverless
44. Prisma
45. Layrjs
46. Alephjs
47. Lando
48. Tensorflow
49. Vitejs
50. Snowpack
51. Esbuild
52. Animo.js
53. Micron.js
54. Astro
55. Handsfree.js
56. Flicking
57. H3manth
58. Slideout.js
59. Svelte
60. Stenciljs
61. Alpinejs
62. Emberjs
63. Linaria
64. zooming
65. parceljs
66. Unlayer Embed

Vue.js Klasörü

1. Vuejs : React ta göre öğrenmesi daha basit olan bir javascript kütüphanesi.
2. Nuxtjs

React.js Klasörü

1. Reactjs : Çok kullanılan popüler bir javascript kütüphanesidir.
2. Create React App
3. Chakra Ui
4. React Spring
5. React Flip Toolkit
6. Reactstrap
7. React Bootstrap
8. Nextjs
9. React Query

Php Klasörü

Php klasöründe de pek bir şey biliktirmmemişim. Web tasarım ve web yazılımın front end tarafına yöneldiğimi sanırım söylemiştim.😀 Ama ilk başlarda php ile de başladığımıda söylemiştim tabi o zamanlar bu kadar arşiv tutan birisi değildim. Ondan bu klasörde pek fazla kaynak bilikmemiş. 😁

1. Laravel
2. Codeigniter
3. Znframework
4. Bestlaravel
5. Laradock
6. Laravel-livewire
7. Jetstream.laravel

Icon Klasörü

Her tasarımcı mutlaka kullandığı favori bir ikon seti vardır. Benimde favorim şu anda iconsax icon seti. Tasarımcı iconların tasarımını baya ince ayarlara göre hazırlamış. Neyse bu klasörde de bulabilildiğim bütün icon setlerini veya iconları bulabileceğiniz siteleri depoladım.

1. iconfinder
2. flaticon
3. bootstrap icon
4. google font (icon)
5. fontawesome
6. svgrepo
7. fontello
8. icomoon
9. iconpark
10. iconscout
11. icons8
12. iconshock
13. dryicons
14. iconmonstr
15. iconarchive
16. androidicons
17. tablericons
18. SuperTinyIcons
19. iconninja
20. devicons
21. iconduck
22. iconsax
23. glyphy
24. drawkit
25. iconoir
26. uplabs
27. lineicons

Font Klasörü

Şu anda en popüler font sitesi google font hatta ben sadece google fontta bulunan fontları kodlamalarımda kullanıyorum. Ama bu klasörede gerekli gereksiz bütün font sitelerini eklemişim.

1. Google Font
2. fontstruct
3. Adobe Font
4. freebestfonts
5. abstractfonts
6. dafont
7. fontsquirrel
8. 1001freefonts
9. 1001fonts
10. cssauthor

Color Klasörü

Ah şu renkler diyerek başlıyorum. Tasarımcı iseniz renkleri anlamanız baya zamanınızı alıyor. Renkler ile ilgili baya site biliktirmişim.😀

1. Flatuicolors
2. Mycolor
3. colordesigner
4. coolors
5. grabient
6. coolhue
7. cssgradient
8. colorhunt
9. Adobe-Color
10. materialui
11. colorsinspo
12. lolcolors
13. colordrop
14. webgradients
15. materialcolors
16. materialpalette
17. material
18. cssauthor
19. htmlcolors
20. colourlovers
21. abecem
22. angrytools
23. paletton
24. colourlovers
25. colrd
26. 0to255
27. colorhunter
28. checkmycolours
29. colorbox

Img Klasörü

Bu klasörde de projelerinde kullanabileceğiniz ücretli ücretsiz resimleri paylaşan siteleri bulunmakta. Uyarı olarak projelerinizde direk olarak google dan resim alıp kullanmayın. Her sanat eserinin olduğu gibi resimlerinde telif hakları vardır. Bu aşağıdaki sitelerin de çoğunda kullanacağınız resimler ticari olarakta kullanabileceğiniz ücretsiz resimleri içermektedir. Unutmayın projenizde kullanacağınız içerinin lisan ına mutlaka dikkat ediniz.

1. freepik
2. pixabay
3. loremipsum
4. generated
5. meshgradients
6. pixeltrue
7. unsplash
8. vecteezy
9. hiclipart
10. flickr
11. grafikarsiv
12. placeholder
13. freeimages
14. 500px
15. adobe stock
16. vektorelcizim
17. negativespace
18. alphacoders
19. lifeofpix
20. picography
21. kaboompics
22. freestocks
23. skitterphoto
24. shotstash
25. stocksnap
26. picjumbo
27. foodiesfeed
28. focastock
29. gratisography
30. pexels
31. splitshire
32. clipartlogo

Remove Klasörü

Elinizde bulunan resimlerin photoshop programına ihtiyaç duymadan arka planlarını silebileceğiniz siteler

1. removal
2. remove
3. photoscissors
4. pixlr
5. unscreen

Videos Klasörü

Bu klasörde de projelerinizde kullanabileceğiniz video sitelerini depoladım. Projelerinizde youtube içeriklerini video olarak kullanmayın sıkıntı yaşarsınız.😊

1. vecteezy
2. lifeofvids
3. pexels
4. splitshire
5. coverr

Design Klasörü

Bu klasörde de tasarım ile ilgili ilham alabileceğiniz siteleri topladım. Toplamayada devam ediyorum.

1. dribbble
2. behance
3. uidesigndaily
4. saaslandingpage
5. land-book
6. landingfolio
7. onepagelove
8. humans
9. awwwards
10. siteinspire
11. ecomm
12. uxarchive
13. scrnshts
14. webframe
15. codewell

İllustrations Klasörü

Bu klasörde de vektorel çizimlerin olduğu siteleri topladım. Bir çok siteye girdiğinizde de böyle çizimlerin bolca kullanıldığını görürsünüz.

1. undraw
2. iradesign
3. drawkit
4. icons8
5. humaaans
6. flexiple
7. manypixels
8. freeillustrations.xyz
9. illlustrations
10. sleekbundle
11. delesign
12. isometric
13. error404
14. flexiple
15. woobro
16. glazestock
17. blush
18. lukaszadam
19. freellustrations.com
20. kapustin
21. storyset
22. uplabs

Package Klasörü

1. packagist
2. npmjs
3. cdnjs
4. pypi

Database Klasörü

Aaa bu klasör boş kalmış neredeyse... 😂

1. Drawsql
2. phpmyadmin

Generator Klasörü

Evet en güzel klasöre geldik bence. Bu klasörde ise işinizi kolaylaştıracak bir çok şey var diyebilirim. Yazacak başke bir şey bulamadım. Sitelere bakınca böle sitelermi varmış diyeyeceğinize eminim. 🤣

1. css-separator-generator
2. getwaves
3. shadows.brumm.af
4. cssgrid-generator
5. clippy
6. fancy-border-radius
7. easing-gradient
8. blobmaker
9. svgwave
10. squircley
11. svg-shape-generator
12. blobs
13. grid.layoutit
14. griddy
15. css-grid-layout-generator
16. theappguruz
17. cssanimate
18. keyframes
19. jeremyckahn
20. haikei
21. ray.so
22. neumorphism
23. editor.md
24. 10015
25. tabbied
26. getcssscan
27. patternico
28. omatsuri
29. shapedivider
30. generated.photos
31. duotone
32. ui.glass
33. tinter.uxie
34. nice-avatar.chilllab
35. gradientmagic
36. trianglify
37. webcode.tools
38. mega-creator
39. glassmorphism
40. getavataaars
41. coolbackgrounds

Ücretli ücretsiz mentörlük hizmeti alabileceğiniz kaynaklar

1. designgost : Daha çok tasarımcıların bulunduğu bir mentörlük sitesidir. Verilen mentörlük hizmeti ücretsizdir ve site türkçedir.
2. frontendmentor
3. adplist
4. superpeers : Uzman kişiler ile ücretli ücretsiz sohbet edebileceğiniz bir platform. Aha bende buradayım 😁
5. codemvia : İster mentör olabileceğiniz isterseniz mentee olabileceğiniz yeni kurulmuş bir kuruluş.

Freelance hizmetler verebileceğiniz siteler

Dönem freelance olarak çalışma devri atık diyebiliriz özellikle yazılım alanında. Ama freelance çalışmakta kolay bir iş versiyonu değil her müşteriniz sizin yeni patronunuz oluyor. Bu durumda freelance çalışmak normal çalışmaya göre biraz daha zorlayıcı olabiliyor. Ben bu klasörde freelance işleri alabileceğiniz siteleri listeledim. Bayaa site varmış freelance çalışabileceğiniz site. 😁

1. Fiverr
2. Peopleperhour
3. Upwork
4. Freelancer
5. Zillancer
6. Toptal
7. Simplyhired
8. Aquent
9. Crowded
10. Guru
11. R10
12. Wmaraci
13. bionluk
14. Armut
15. Uzmankirala
16. Projekurdu
17. Webly
18. İcerikbulutu
19. Nexxt

Yaptığınız projeleri yayına alabileceğiniz ücretsiz siteler

Yaptığınız projelerinizi yayına almak istersiniz ama ne host nede domain için paranız vardır. Birde node.js veya python ile proje yapıyor iseniz host yerine sanal sunucuya ihtiyacınız olacaktır. Onlarında size yaklaşık aylık 20-30 tl maliyeti olacaktır. Ama artık ihtiyacınız yok. Heroku, dinamik basit ihtiyaçlarınız için her işinizi görmekte. Diğerlerinde ise ise sadece statik projelerinizi yayına alabiliyorsunuz. Ben projelerimi ücretsiz yayına albileceğim 4 tane site bulabildim. Daha fazlası var ise iletişim adreslerimden bana bildirebilirsiniz.

1. heroku
2. netlify
3. vercel
4. surge

Tarayıcıda kullandığım eklentiler

1. Bitwarden : Önceden sitelerde aynı şifreyi kullanırdım. Ama son zamanlarda hacklenen çok fazla site duymaya başladım. Bundan dolayıda artık her sitede birbirinden farklı şifreler kullanmaya başladım. Tabi ku kadar şifreyide kafamda tutamazdım. Bu yüzen de şifrelerimi depolayacak bir depoya ihtiyacım vardı. Bende Bitwarden i buldum.
2. Google Translate : Hâlâ ingilizcem o kadar iyi değil. Çeviri için kullandığım bir eklenti.
3. Clear cache : Tek tıkla her şeyi silmek için kullandığım bir eklenti. Genelde ön belleği silmek için kullanıyorum.
4. Fake filler : Sayfada bulunan inputları fake data ile otomatik doldurmak için kullandığım bir eklenti.
5. Colorpick eyedropper : Sayfadaki renklerin renk kodlarını bulmak için kullandığım bir eklenti.
6. What font : Sayfada bulunan yazılarda hangi fontlar kullanıldığını öğrenmek için kullandığım bir eklenti.
7. Awesome screenshot screen : Ekran resmini veya videosunu alabildiğim bir eklenti.
8. Tureng dictionary : Biraz ingilizce öğrendiğim söylenebilir. Seçtiğim kelimenin hemen türkçesini ve okunuşunu görebileceğim siteye yönlendiriyor.
9. Wakatime : Acaba kaç dakika kodlama yaptım veya kaç dakika tarayıcıyı kullandım diye merak ettiniz mi? Bu eklenti ile hangi proje üzerinde kaç dakika kodlama yapmışım veya kaç dakika tarayıcıyı kullanmışım görebiliyorum.
10. Enhancer for youtube : Youtube üzerinde küçük ayarlamalar yapmak için kullanıyorum.
11. Grid ruler : Klasik bir çetvel eklentisi diyebilirim.
12. Wappalyzer : Girdiğiniz sitede hangi web teknolojilerinin kullanıldığını gösteren bir eklenti
13. Whatruns : Bir yukarıdaki ile aynı işe yarıyor.
14. Json viewer : Json verilerin daha düzenli ve göze hoş bir şekilde gözükmesini sağlıyor.
15. Keywords everywhere keywo : Anaktar kelime önerisi veren bir eklenti. Kişisel sitememe içerik hazırladığımda çok işime yaradığını söyleyebilirim.
16. Vuejs devtools : Vue kodlaması yaparken baya işimi kolaylaştıran bir eklenti.
17. React developer tools : React kodlaması yaparken baya işimi kolaylaştıran bir eklenti.

Visual Studio Code Editöründe Kullandığım Ayarlar Ve Eklentiler

Günümüz kodlama ekranına bakarak geçiyor. Bunun içinde bazı ide veya kod editörleri kullanıyoruz. Bende genel anlamda phpstorm ide'sini ve visual studio code editörünü kullanıyorum. Phpstorm ücretli bir ide. Bu yüzden de pek fazla özelleştirme yapamıyorsunuz ama visual studio code editörü ise tamamen ücretsiz ve açık kaynak bir program. Bende özelleştirmeyi aşırı seven birisiyim. Bu başlık altında ise sizler ile visual studio code editöründe kullandığım ayarları ve eklentilerini paylaşıyor olacağım.

Ayarlar

Burada sizlere visual studio code editöründe kullanıyor olduğum ayarları paylaşıyor olacağım. Bazı ayarların ne işe yaradıklarını sizler ile kaba taslak olsa da paylaştım. Olmayanları ise deneyerek ne işe yaradığını öğrenirsiniz artık.😄 Ha bir uyarı olarak eklentileri yüklemeden ayarları kopyala yapıştır yapmaya kalkışmayın. Bazı ayarlar eklentilerin ayarları söylemiş olam.

{
  "files.autoSave": "afterDelay", // Otomatik kaydetme ayarı.
  "editor.wordWrap": "on", // Satıra sığmayan kodları alt satıra indirerek alt scroll un çıkmasını engelliyor.
  "breadcrumbs.enabled": false, // editör alanının(Kodların yazıldığı alan) üstünde bulunan gezinti çubuğunu gizleyip görünür yapmayı sağlıyor.
  "editor.formatOnSave": true, // Kodlarınızı save sonrası otomatik formatlamayı düzenlemeyi sağlıyor.
  "editor.fontWeight": "400", // Font kalınlığı ayarı
  "editor.fontFamily": "Poppins", // Font tipi ayarı. Ben Poppins fontunu kullanıyorum. Kodlamada daha okunabilir bir font.
  "editor.fontLigatures": false, // Nerd Font kullanımında etkinleştirilmesi gerekilen bir ayar.
  "editor.cursorSmoothCaretAnimation": true, // Bir animasyon için ama ne için bilmiyorum.
  "editor.cursorBlinking": "expand", // Cursor animasyon ayarı.
  "editor.minimap.enabled": false, // Minimap açma kapatma ayarı
  "editor.tabSize": 3, // Kodlamadaki tab girintisinin ayarı.
  "editor.insertSpaces": false, // Kodlamadaki tab girintisinin otomatik aayarlanmasını sağlar. Kapalı tutulması önerilir.
  "editor.lineHeight": 1.4, // Kodların satır yüksekliği ayarı.
  "editor.fontSize": 16, // Font büyüklüği ayarı
  "editor.suggestSelection": "recentlyUsedByPrefix", // Kod yazarken çıkan öneri listesinde en son kullanılanı nasıl bir öncelikte seçeceğinizi belirleyen ayar.
  "editor.mouseWheelZoom": true, // Mouse daki scroll tuşunu kullanarak font büyüklüğünü değiştirebilmeniz için bir ayar.
  "editor.linkedEditing": true, // Düzenleyicinin bağlantılı düzenlemeyi etkinleştirip etkinleştirmediğini kontrol eder.
  "editor.letterSpacing": 1.02, // Kodlardaki harfler arası boşluğu ayarlamak için kullanılır.
  "explorer.confirmDelete": true,
  "window.zoomLevel": -0.8,
  "workbench.colorCustomizations": {
    // ! Editöre ait renk ayarları
    "sideBar.border": "#7739e0",
    "tab.activeBackground": "#2d1656a8",
    "tab.activeBorderTop": "#7739e0",
    "tab.hoverBackground": "#7739e0",
    "tab.hoverForeground": "#FFFFFF",
    "list.hoverBackground": "#7639e038",
    "activityBar.background": "#7739e0",
    "scrollbarSlider.activeBackground": "#7739e0",
    "activityBar.activeBackground": "#2d1656a8",
    "activityBar.activeFocusBorder": "#2d1656a8",
    "activityBar.activeBorder": "#2d1656a8",
    "activityBar.inactiveForeground": "#fff",
    "badge.background": "#7739e0",
    "panel.border": "#7739e0",
    "panelTitle.activeForeground": "#ffffff",
    "panelTitle.inactiveForeground": "#fff",
    "statusBar.border": "#7739e0",
    "button.background": "#7739e0",
    "statusBar.background": "#7739e0",
    "statusBar.noFolderBackground": "#7739e0",
    "statusBar.debuggingBackground": "#7739e0",
    "menu.selectionBackground": "#7739e0"
  },
  "liveServer.settings.donotVerifyTags": true,
  "editor.snippetSuggestions": "top",
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "presentationMode.zoomLevel": -0.8, // presentationMode eklentisinin zoom ayarı.
  // ! Git Ayarları
  "git.confirmSync": false,
  "gitlens.advanced.messages": {
    "suppressLineUncommittedWarning": true
  },
  "git.postCommitCommand": "push",
  "git.autofetch": false,
  "git.enableSmartCommit": true,
  // ! Better  Comments Eklentisiniz Ayarları
  "better-comments.tags": [
    {
      "tag": "!",
      "color": "#FF2D00",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "?",
      "color": "#3498DB",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "strikethrough": true,
      "backgroundColor": "transparent"
    },
    {
      "tag": "*",
      "color": "#98C379",
      "strikethrough": false,
      "backgroundColor": "transparent"
    }
  ],
  "workbench.iconTheme": "material-icon-theme", // İcon ayarıdır.
  // ! Codesnap Eklentisi Ayarları
  "codesnap.backgroundColor": "none", // Arka Plan ayarı
  "codesnap.containerPadding": "3em", // Container alanı padding ayarı
  "codesnap.transparentBackground": true, // Arka plan transparent olmasını isterseniz true yapın.
  "codesnap.boxShadow": "rgba(0, 0, 0, 0.30) 0px 5px 20px", // Gölge ayarı
  "emmet.triggerExpansionOnTab": true, //Tab tuşuna yazılan emmet kodunun işlevsellik kazanması için bir ayar true olarak ayarlanması önerilir.
  "html-css-class-completion.enableEmmetSupport": true, // Proje dosyasına dahil edilen css doslayarındaki css classlarının emmet önerilen listesinde çıkmasını ayarlayacağınız bir ayar. Bir eklenti ile gelen ayardır.
  "liveServer.settings.donotShowInfoMsg": true, // Live server eklentisi açılırken gelen bildirim mesajını ayarlamak için kullanılan bir ayar.
  "emmet.includeLanguages": {
    // Varsayılan olarak desteklenmeyen dillerde Emmet kısaltmalarını etkinleştirir.
    "javascript": "javascriptreact"
  },
  "workbench.colorTheme": "Dracula", // Kullanılan tema ayarı
  "[javascript]": {
    // Javascript dili için geçersiz kılınacak düzenleyici ayarlarını yapılandırır
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[css]": {
    // Css dili için geçersiz kılınacak düzenleyici ayarlarını yapılandırır
    "editor.defaultFormatter": "aeschli.vscode-css-formatter"
  },
  /* 
	
	! Live Sass Compile Eklentisi Ayarları Start
	
	*/
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css/"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "~/../css/"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "~/../css/"
    }
  ],
  "liveSassCompile.settings.generateMap": true, // Derlenmiş sass dosyalarının içinde map dosyası olup olmamasını ayarladığınız ayardır.
  "liveSassCompile.settings.showOutputWindow": false, // Anlık derleme çıktı bilgisini almamak için kullanacağınız bir ayardır. True olarak ayarlamanız önerilir. Kodlama bir hata olur ise göremezsiniz.
  "liveSassCompile.settings.autoprefix": [
    // Derlemede tarayıcı uyumluluğu ayarlarını yapabileceğiniz autoprefix ayarlarıdır.
    "> 1%",
    "last 5 versions"
  ],
  /* 

	! Live Sass Compile Eklentisi Ayarları End

	*/
  "terminal.integrated.fontFamily": "FiraCode Nerd Font", // Terminal font ayarı
  "terminal.integrated.fontSize": 15, // Terminal font büyüklüğü ayarı
  "terminal.integrated.lineHeight": 1.2, // Terminal satır yüksekliği ayarı
  "terminal.integrated.fontWeight": 100, // Terminal font kalınlığı ayarı
  "terminal.integrated.letterSpacing": 0.9, // Terminal harflerin arası boşluk ayarı
  "terminal.integrated.cursorBlinking": true, // Terminal imlecinin yanıp sönme animasyonu ayarı
  "terminal.integrated.cursorStyle": "line", // Terminal imleci stili ayarı
  "terminal.integrated.cursorWidth": 2, // Terminal imleci genişlik ayarı
  "terminal.integrated.fontWeightBold": 600, // Terminal kalın font kalınlığı ayarı
  "terminal.integrated.defaultProfile.windows": "Git Bash", //Varsayılan olarak kullanılacak terminali belirler.
  // ! CustomizeUi Eklentisi Ayarları // Uyarı: Linux da çalışmıyor.
  "customizeUI.activityBar": "bottom", // ActivityBar konumunu ayarlar. (Sol köşede bulunan iconlar)
  "customizeUI.fontSizeMap": {
    // Font ayarları
    "11px": "13px",
    "13px": "14px",
    "monospace": "14px",
    "icons": "14px"
  },
  "customizeUI.font.regular": "Poppins", //Kullanılacak font ayarı. Uygulamanın kendi font unu değiştiriyorsunuz.
  "customizeUI.font.monospace": "Poppins", // Monospace olarak kullanılacak font ayarı.
  "customizeUI.listRowHeight": 24, // Programda sol tarafta bulunan proje dosyalarının listesinin satır yüksekliğini ayarlıyor.
  "customizeUI.moveStatusbar": true, // Durum çubuğunu panelin altına taşır.
  "customizeUI.titleBar": "regular", // 	macOS için satır içi başlık çubuğu stili ayarı
  "customizeUI.stylesheet": {
    // Daha fazla kişisel özelleştirme :)
    "body.activity-bar-at-bottom .monaco-workbench .activitybar .monaco-action-bar .action-label": "font-size:18px !important;",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit": "height:40px;",
    ".monaco-workbench .part.titlebar>.window-appicon": "width:35px",
    ".monaco-workbench .part.titlebar > .window-appicon:not(.codicon),.monaco-workbench .part.titlebar .window-appicon > .home-bar-icon-badge": "background-image: url('URL_Giriniz'); background-repeat: no-repeat;background-position: 50%;" // Programın sol üst köşesinde bulunan vsc logosunu ayarlamaya yarar.
  },
  "security.workspace.trust.untrustedFiles": "open", // Güvenilir bir çalışma alanında güvenilmeyen dosyaların açılmasının nasıl ele alınacağını denetler.
  "window.titleBarStyle": "custom", // Title bar ın stilin ayarlayabileceğiniz bir ayardır. Programın en üst barı.
  "window.menuBarVisibility": "toggle", // Menu bar ayarıdır. Toggle ayarlar iseniz alt tuşuna basarak gizleyip gösterebilirsiniz.
  // ! Background Eklentisi Ayarları
  "background.filepath": "", // Arkaplana ayarlanacak resim yolu. Localden de ayarlayabilirsiniz. Ama ben bir türlü ayarlayıp çalıştıramadım.
  "background.size": "cover", // Eklenen resmin boyutlarını ayarlamak için kullanılır.
  "background.opacity": 0.95, // Eklenen resmin verilen değere göre görünürlük ayarı yapmaya yarıyor.
  "background.alignment": "Center Center" // Eklenen resmin verilen değerlere göre hizalanmaya yarıyor.
}

Eklentiler

Burada ise size visual studio code editöründe kullanmış olduğum eklentileri sizler ile paylaşıyor olacağım. Baya eklenti kullanmama rağmen editör çok fazla yavaşlama olmadı. 😄

1. Auto Close Tag : Html etiketini otomatik olarak kapatmaya yarayan bir eklenti.
2. Auto Rename Tag : Eşli başlağıç ve bitiş etiketini otomatik aynı anda değiştirmeye yarayan bir eklenti.
3. Background : Editörün arka plan ayarları için kullandığım bir eklenti.
4. Better Comments : Kodlarınıza renkli yorum satırları eklemenizi sağlayan bir eklenti.
5. Bloop : Kodlamanızı yaparken benzer kod parçacıkları veren bir eklenti.
6. Bracket Pair Colorizer 2 : Eşleşen parantezleri renklendirmek için kullandığım bir eklenti.
7. CodeSnap : Seçtiğiniz kod parçasının ekran görüntüsünü paylaşabileceğiniz bir eklenti.
8. CSS Formatter : Css kodlarını biçimlendirmek için kullandığım bir eklenti.
9. CSS Peek : Html taglarında kullandığınız classları css dosyasına gitmeden göz atmanızı sağlayan bir eklenti.
10. Customize UI : Vsc programını özelleştirmek için kullandığım bir eklenti.
11. Dracula Official : Kullandığın bir temadır.
12. EditorConfig for VS Code : Vsc için EditorConfig desteğini sağlamak için kullandığım bir eklenti.
13. ES7 React/Redux/GraphQL/React-Native snippets : İsimdeki teknolojiler için basit bir kod parçacığı eklentisidir.
14. Fix JSON : Json dosyasını biçimlendirmek için kullandığım bir eklentidir.
15. GitHub Copilot : Kodlamayı yazarken tamamlamalar sunan bir eklenti. Hâlâ yapım aşamasında olan bir eklenti ve bende kullanmak için sırada bekleyen birisiyim. 😄Hâlâ onay bekliyorum.
16. GitLens — Git supercharged : Git özelliklerini güçlendirmek için kullandığım bir eklenti.
17. Highlight Matching Tag : Eşleşen açılış ve kapanış etiketlerini vurgulamak için kullandığım bir eklenti.
18. HTMLHint : Yazılan html etiketlerinde hata olup olmadığı konusunda analiz eden bir eklenti.
19. IntelliSense for CSS class names in HTML : Projeye dahil edilen css kütüphenelerinde bulunan css classlarını html etiketlerinde bulunan class özelliğinde yazarken otomatik olarak önerilenler listesinde gözükmesini sağlayan bir eklenti. Çok işime yarayan bir eklenti.
20. indent-rainbow : Girintilerin renklendirerek kodların okunmasını kolaylaştıran bir eklenti.
21. jQuery Code Snippets : 130'dan fazla jQuery Kod Parçacığı olan bir eklenti. Jquery kodlaması yaparken bana kolaylık sağlayan bir eklenti.
22. json : Vsc da json desteği için bir eklenti.
23. Live Sass Compiler : Tarayıcının yeniden yüklemesiyle Sass veya Scss'in gerçek zamanlı olarak CSS'e derlemeyi sağlayan bir eklenti. Ben artık scss kodlarımın derlemesini node-sass npm paketi ile yapıyorum. Yani artık kullandığım bir eklenti değil. 😊
24. Live Server : Statik ve dinamik sayfalar için canlı yeniden yükleme özelliğini sağlayan , yerel sunucusu başlatan bir eklenti. Çok fazla kullandığım bir eklenti.
25. Material Icon Theme : İcon eklentisi.
26. Monkey Patch : Özel javascript'i vscode'a eklemenizi sağlayan bir eklenti. Customize UI eklentisinin çalışması için gerekli olan bir eklenti.
27. NPM Scripts : Kenar çubuğunda NPM komut dosyalarını görüntülemeyi ve çalıştırmayı sağlayan bir eklenti.
28. Path Intellisense : Dosya adlarını otomatik olarak tamamlayan bir eklenti. href ve src özeliklerinde çok işe yarıyor.
29. Presentation Mode : Kodunuzu bir sunumda düzgün bir şekilde göstermek için basit bir eklenti. Ben daha çok programın ekranda kaplayan gereksiz kısımlarını gizleyip sadece kodları görmek için kullanıyoru. Çokta güzel oluyor ha. 😂
30. Prettier - Code formatter : Tek bir eklenti ile bütün formatlarda kodlarınızın biçimlendirmesini sağlayan bir eklenti.
31. SCSS Formatter : SCSS kodlalrını biçimlendirmek için kullanılandığım bir eklenti.
32. Simple React Snippets : React.js kod parçacıkları için kullandığım bir eklenti.
33. Turkish Language Pack for Visual Studio Code : Vsc için Türkçe dil paketi. Ben ingilizce öğrenmek için bu eklentiyi aktif olarak kullanmıyorum ama listeye eklemek istedim. Zaten bilgisayarınızın dili türkçe ise bu eklenti vsc u yüklediğinizde bir uyarı vererek sizden yüklenmesini istiyor. Bu arada çeviri çok başarılı olmuş. Buradan Adem Coşkuner'e ve diğer katkı sağlayan herkese teşekkürlerimi iletiyorum.😊
34. WakaTime : Hangi projede kaç dakika zaman harcamış olduğumu gösteren bir eklenti. Ben günlük rapor olarak e posta alıyorum ve ücretsiz sürümü baya iş görüyor.
35. Settings Sync : Programda bulunan bütün ayarlarınızı,eklentilerinizi github a depolayan bir eklenti.

THE END

Evet reponun sonuna ulaşmış bulunmaktasınız. Bu repoyu hazırlamam iş yoğunluğuna bağlı olarak yaklaşık bir ayımı aldı diyebilirim. Bu arada bu repoyu hazırlarken tarayıcımda bulunan yer imleri kısmınıda küçükte olsa düzenledim diyebilirim. Önceden it bağlasan durmaz durumdaydı.😂 Umarım yani başlayan tasarımcı ve yazılımcı kardeşlerim için güzel bir repo olmuştur. Birde abone olmayı... yok o değildi.🤣 Aşağıdaki bulunan sosyal medya adreslerimden beni takip ederseniz sevinirim.

Uyar Kaldır

Uyar – Kaldır sistemi; telif hakkı ile korunan bir içeriğin, herhangi bir internet sitesinde hak sahiplerinden izinsiz olarak yer aldığının tespit edilmesi halinde, eserin hak sahipleri veya yetkili temsilcilerinin, site yetkililerine uyarı göndermek suretiyle haksız içeriğin siteden kaldırılmasını yasal olarak talep etme sürecidir. Bende bu sisteme uyarak eğer repo da sizden izinsiz bir eserinizi kullanmış isem beni uyarabilirsiniz. En geç 3 iş günü içerisinde eseriniz repodan kaldırılır.