Önce Reklam 😁😁

Ö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.

🏫 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.)
👨‍👧‍👦 Her yazılımcının katılması gereken discord ve telegram grupları.
🔖 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)
#️⃣ Yaptığınız projeleri demo link olarak paylaşabileceğiniz siteler.
#️⃣ Her yazılımcının takip etmesi gerektiği siteler.
🎓 Üniversite öğrencileri için ücretsiz olan kaynaklar.
#️⃣Tarayıcıda kullandığım eklentiler.
🤑 Para kazanabileceğiniz freelance siteler.
▶️ Takip ettiğim Youtube kanalları.
🧔 Mentör desteği alabileceğiniz ücretli ücretsiz siteler gruplar.
🤩 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.😁

workshoperscomm : Bolca ücretsiz ve sertifikalı online eğitim veren bir kuruluş.
girisimcikafasi : Girişimcilikle ilgili motivasyon ve öneri içerikleri paylaşan bir hesap.
algoritmikfikir : Yazılım alanı ile ilgili genelde bilgi içerikleri paylaşan bir hesap.
yazilimoji : Yazılım alanı ile ilgili bilgi ve komik içerikler paylaşan bir hesap.
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.
kod.efendi : Yazılım alanı ile ilgili bilgi içerikleri paylaşan bir hesap.
kerokod : Yazılım alanı ile ilgili bilgi,motivasyon ve komik içerikler paylaşan bir hesap.
seyyar.tasarimci : Freelance olarak çalışan bir tasarımcı. Yaptığı iş ile ilgili bilgi içerikleri paylaşıyor.
prototurk.official : Tayfun erbilen i bilmeyen yoktur her halde. 😀 Web yazılım ile ilgili içerikler paylaşıyor.
tolgahan.webdev : Web yazılım alanı ile ilgili bolca içerik paylaşan bir hesap.
codemvia : Mentör veya menteeleri birleştirmek amaçlı kuruşmuş bir kuruluştur. Mentörlük hizmeti ücretsizdir.
luisdanielroviracontreras : Yapmış olduğu tasarımları kodları ile paylaşan bir hesap.
siber_ybs : Yazılım ile ilgili genelde komik içerikler paylaşan bir hesap.
kodlarintercumani : Yazılım ile ilgili bilgi içerikleri paylaşan bir hesap.
btkakademi : Btk akademinin resmi instagram hesabı. Bazen eğitmenler ile de canlı yayın yapılmakta.
kodmuhendisi : Yazılım ile ilgili bilgi içerikleri paylaşan bir hesap.
yazilimturk : Bilgi ve mizah odaklı paylaşımlar yapan bir yazılım toplulugudur.
yazilimtoplulugu : Yazılım ile ilgili komik içerikler paylaşan bir hesap.
yazilimci.genclik : Yazılım ile ilgili komik,bilgi ve motivasyon içerikleri paylaşan bir hesap.
kodrehberi : Yazılım ile ilgili komik,bilgi ve motivasyon içerikleri paylaşan bir hesap.
gencyazilimci : Yazılım ile ilgili komik içerikler paylaşan bir hesap.
yazilimci.adamm : Yazılım ile ilgili komik,bilgi,motivasyon ve gündem içerikleri paylaşan bir hesap.
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ı. 😂
kerimcanyektekcom : Karekod un kurucusu.
uxswipe : Tasarım ile ilgili bilgi içerikleri paylaşan bir hesap.
ui8net : UI ile ilgili tasarımlar paylaşan bir hesap.
web.talk : Taarım ile ilgili bilgiler paylaşan bir hesap.
uiturkiye : Tasarım ile ilgili bilgiler dosyalar paylaşan hesap. Bu arada içerikler türkçe.😁
interfacely : Tasarım örnekleri ve o örnekte kullanılan yapılar ile ilgili içerikler paylaşan bir hesap.
ux.ferdicildiz : Uzman bir tasarımcı. Youtube kanalına bakmanızı öneririm.
designspective : Tasarım ile ilgili içerikler paylaşan bir hesap.
uidacozeriz : Bazı firmaların ui tasarımlarını inceleyen bir hesap. Youtube kanallarına bakmanızı öneririm.
afshint2y : Severek takip ettiğim bir grafik tasarımcısı. İconset lerini kullanıyorum bolca tasarımlarımda.
amirbaqian : Bir üsteki ile aynı.
awsmd_com : Tasarım ile ilgili içerikler paylaşan bir hesap.
ui_gradient : Tasarım ile ilgili bilgi içerikleri paylaşan bir hesap.
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.
ux.base : UX ile ilgili bilgi içerikleri paylaşan bir hesap.
uxbucket : UX ile ilgili bilgi içerikleri paylaşan bir hesap.
qclaydesign : Tasarım ile ilgili içerikler paylaşan bir hesap.
uiuxdailytips : UI ve UX ile ilgili bilgiler paylaşan bir hesap.
codinggyan : Yazılım ile ilgili içerikler paylaşan bir hesap.
coding.beast : Yazılım ile ilgili içerikler paylaşan bir hesap.
ahmetekincicomtr : Dijital içerik üreten bir hesap.
ravi.graphicdesigner : Tasarım ile ilgili içerikler paylaşan bir hesap.
grafikirfan : Takip ettiğim bir grafik tasarımcısı.
talha.creative : Severek takip ettiğim bir UI/UX Tasarımcısı. Güzel içerikler paylaşıyor. Söylemeden geçemeyeceğim.
busra.ui : Güzel içerikler paylaşan bir tasarımcı.
developer_nikhil27 : Güzel içerikler paylaşan bir frontend developer.
ankitcreatives : Tasarımcılar için takip etmesini önerdiğim bir instagram hesabı.
designill4u : Yine takip ettiğim bir tasarımcı instagram hesabı.
thalion_pb : Tasarım ile ilgili içerikler paylaşan bir hesap.
ariqchowdhury.uiux : Tasarım ile ilgili içerikler paylaşan bir hesap.
bydanromero : Tasarım ile ilgili içerikler paylaşan bir hesap.
satyam.js : Yazılım ile ilgili içerikler paylaşan bir hesap.
onlysiamak : Yazılım ve tasarım ile ilgili içerikler paylaşan bir hesap.
ui__ux : Tasarım ile ilgili içerikler paylaşan bir hesap.
lubnadev : Web yazılım ile ilgili içerikler paylaşan bir hesap.
janm_ux : Tasarım ile ilgili içerikler paylaşan bir hesap.
orix.agency : Tasarım ile ilgili içerikler paylaşan bir hesap.
uxcel.app : Tasarım ile ilgili içerikler paylaşan bir hesap.
michael.filipiuk : Tasarım ile ilgili içerikler paylaşan bir hesap.
thewebdeveloper_ : Web yazılım ile ilgili içerikler paylaşan bir hesap.
themizko : Web tasarım ile ilgili içerikler paylaşan bir hesap.
ui.colour : Daha çok renkler ile ilgili içerikler paylaşan bir hesap.
ransegall : Tasarım ile ilgili içerikler paylaşan bir hesap.
colours.cafe : Renk uyumluluğu ile ilgili renk kitleri paylaşan bir hesap.
uxbrainy : Tasarım ile ilgili içerikler paylaşan bir hesap.
wilycoder : Genelde web yazılım ile ilgili bilgilendirici içerikler paylaşan bir hesap.
kod_evreni : Yazılımcı bir abimiz. 😀 Genel anlamda kişisel paylaşımlar yapan bir hesap.

Üye Olduğum Telegram Grupları

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. 😁

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ü

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.
stackoverflow : Bilgisayar programcılığı ile ilgili kullanıcı odaklı soru cevap sitesi.
Kommunity : Etkinliklere katılmak istiyorsunuz ama bulamıyorm musunuz? Aha tam yeri.
Laravel Türkiye Forumları : Laravel Framework u için kurulmuş bir yardımlaşma sitesi.
Wordpress Development : Wordpress geliştiricilerin yardımlaşma yeri.
Kod Mühendisleri Topluluğu : Dili Türkçe olan yazılılımcıların yardımlaşma sitesi.
WMaracı : Webmaster yardımlaşma sitesi.
R10 : Herkesin üye olması gerektiği bir site. Ama tabi üyelikler davet kodu ile mümkün.
Atom Discuss : Atom kod editörü için bir yardımlaşma sitesi.
Meetup : Gerçek hayattaki grup buluşmalarını kolaylaştıran bir sosyal ağ.
Dev.to : Geliştiricilerin blog yazılarını paylaştığı medium gibi bir blog sitesi. Çok güzel bir site bağımlı oldum siteye. 😁
Polygram : Bir kolajin yapmış olduğu bir yardımlaşma forumu. (ingilizce)
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.
Mesuthoca : Mesut hocanın forum sitesi.
Stackexchange : Bu sitede sorularınızı sorabileceğiniz güzel bir forum sitesi. Ama ingilizce.
Indiehackers : Online projeler geliştiren insanlar topluluğu.
yen.chat
webdeveloper : Yazılımcılar için basit bir forum sitesi.
sitepoint : Yazılım ile ilgili Sorularına cevap alabileceğiniz güzel bir forum (Community) sitesi.
coffeecup : Hem yazılım ile ilgili hemde web tasarım ile ilgili sorularınızı sorabileceğiz bir forum sitesi.
hashnode : Geliştiricile için bir blog platformudur..
hackernoon : Yazılım ile ilgili blog yazılarının paylaşıldığı bir site.
remoteclan
devdojo : Geliştiricilerin blog yazıları paylaştığı bir platformdur.
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.

W3schools : Web yazılımcıların mutlaka bir kez de olsa bakmış olduğu müthiş bir site.
Bootstrap 5 : Bootstrap css kütüphenesinin dokümantasyon sayfası.
Wordpress Developer Reference : Wordpress developer dokümantasyon sayfası.
Jquery : Jquery dokümantasyon sayfası.
Htmlreference : Html ile ilgili bir Reference sitesi. Bu sitenin tasarımı cok hoşuma gidiyor.
Cssreference : Css ile ilgili bir Reference sitesi. Yukarıdaki sitenin aynısı
Emmet : Kodlama yaparken emmet kullanmıyorsanız büyük işkence çekiyorsunuz demektir. Emmet kod yazmayı kolaylaştırır.
Mozilla Developer : Web yazılımcılar için güzel bir site.
Roadmap : Yazılım öğreniyorum ama nasıl yol izlemeliyim diye soruyor isen bu siteye mutlaka bakmalısın.
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.
Bulma : Bootstrap gibi güzel bir css kütüphanesi.
Reactjs : Javascript öğrendikten sonra mutlaka öğrenilmesi gerekilen bir javascrip kütüphanesi.
Vuejs : Javascript öğrendikten sonra mutlaka öğrenilmesi gerekilen bir javascrip kütüphanesi. React a göre öğrenilmesi daha basittir.
shortcode : Html,css,javascript ve laravel gibi dillerde küçük kod örneklerinin ve anlatılarının olduğu bir site.
devdocs : Yukarıdakinin aynısı ama daha iyisi.
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)
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.

W3schools : Anlatmaya gerek yok görüyorsuuzz. 😂
Htmlreference
Htmldersleri : Türkçe bir site ingilizceden anlamıyorum ben diyorsanız.
Lifeacode : Bu sitede daha düzenli bir şekilde anlatıyor html etiketlerini. Ama ben youtube dan fehmi uyar kanalına bakmanızı öneririm.
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

Libraries & Frameworks

Tools

Animations

Small Structures

Others

cssnano

Javascript Klasörü

Jquery
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.
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.
Sigmajs : Grafik çizimine adanmış bir JavaScript kütüphanesi.
Pizza-pie-charts : Chartjs e benzer bir kütüphane.
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ış.
Hammerjs : Nesneyi sürükleme bırakma işlemlerini yapabileceğiniz bir kütüphane. Üstelik mobil uyumlu.
Sortable : Hammerjs gibi bir kütüphane.
Swiperjs : Owlcarousel2 benzer bir kütüphane ama daha iyisi.
Alpine
Aurelia
D3js
Taucharts
Animejs
Fancyapps
Jarallax : Arka plan görüntüleri için pürüzsüz paralaks kaydırma efekti verebileceğiniz bir kütüphane.
Aquarelle
FunnyText : Yazılar üzerinde güzel animasyonlar yapabileceğiniz bir kütüphane.
FullPage : Full sayfa üzerinde güzel animasyonlar ile geçiş yapmak için kullanılan bir kütüphane.
PagePiling : Yukarıdaki ile aynı işi yapıyor.
MultiScroll
Vanilla-tilt.js
Jquerypp
Anijs
Bouncejs
Magnific Popup : Resmin üzerine tıklanınca popup olarak açılmasını sağlayan bir kütüphane.
Apexcharts
Mapbox
Urlcat
Slick
Modernizr
Axios
Webpack Boilerplate
Eggjs
Cypress
Echarts
Editorjs
Revealjs
Slidev
Keystonejs
Crank.js
Sweetalert
Serverless
Prisma
Layrjs
Alephjs
Lando
Tensorflow
Vitejs
Snowpack
Esbuild
Animo.js
Micron.js
Astro
Handsfree.js
Flicking
H3manth
Slideout.js
Svelte
Stenciljs
Alpinejs
Emberjs
Linaria
zooming
parceljs
Unlayer Embed

Vue.js Klasörü

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

React.js Klasörü

Reactjs : Çok kullanılan popüler bir javascript kütüphanesidir.
Create React App
Chakra Ui
React Spring
React Flip Toolkit
Reactstrap
React Bootstrap
Nextjs
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ş. 😁

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.

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.

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.😀

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.

Remove Klasörü

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

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.😊

Design Klasörü

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

İ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.

Package Klasörü

Database Klasörü

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

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. 🤣

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

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.
frontendmentor
adplist
superpeers : Uzman kişiler ile ücretli ücretsiz sohbet edebileceğiniz bir platform. Aha bende buradayım 😁
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. 😁

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.

Tarayıcıda kullandığım eklentiler

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.
Google Translate : Hâlâ ingilizcem o kadar iyi değil. Çeviri için kullandığım bir eklenti.
Clear cache : Tek tıkla her şeyi silmek için kullandığım bir eklenti. Genelde ön belleği silmek için kullanıyorum.
Fake filler : Sayfada bulunan inputları fake data ile otomatik doldurmak için kullandığım bir eklenti.
Colorpick eyedropper : Sayfadaki renklerin renk kodlarını bulmak için kullandığım bir eklenti.
What font : Sayfada bulunan yazılarda hangi fontlar kullanıldığını öğrenmek için kullandığım bir eklenti.
Awesome screenshot screen : Ekran resmini veya videosunu alabildiğim bir eklenti.
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.
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.
Enhancer for youtube : Youtube üzerinde küçük ayarlamalar yapmak için kullanıyorum.
Grid ruler : Klasik bir çetvel eklentisi diyebilirim.
Wappalyzer : Girdiğiniz sitede hangi web teknolojilerinin kullanıldığını gösteren bir eklenti
Whatruns : Bir yukarıdaki ile aynı işe yarıyor.
Json viewer : Json verilerin daha düzenli ve göze hoş bir şekilde gözükmesini sağlıyor.
Keywords everywhere keywo : Anaktar kelime önerisi veren bir eklenti. Kişisel sitememe içerik hazırladığımda çok işime yaradığını söyleyebilirim.
Vuejs devtools : Vue kodlaması yaparken baya işimi kolaylaştıran bir eklenti.
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ı. 😄

Auto Close Tag : Html etiketini otomatik olarak kapatmaya yarayan bir eklenti.
Auto Rename Tag : Eşli başlağıç ve bitiş etiketini otomatik aynı anda değiştirmeye yarayan bir eklenti.
Background : Editörün arka plan ayarları için kullandığım bir eklenti.
Better Comments : Kodlarınıza renkli yorum satırları eklemenizi sağlayan bir eklenti.
Bloop : Kodlamanızı yaparken benzer kod parçacıkları veren bir eklenti.
Bracket Pair Colorizer 2 : Eşleşen parantezleri renklendirmek için kullandığım bir eklenti.
CodeSnap : Seçtiğiniz kod parçasının ekran görüntüsünü paylaşabileceğiniz bir eklenti.
CSS Formatter : Css kodlarını biçimlendirmek için kullandığım bir eklenti.
CSS Peek : Html taglarında kullandığınız classları css dosyasına gitmeden göz atmanızı sağlayan bir eklenti.
Customize UI : Vsc programını özelleştirmek için kullandığım bir eklenti.
Dracula Official : Kullandığın bir temadır.
EditorConfig for VS Code : Vsc için EditorConfig desteğini sağlamak için kullandığım bir eklenti.
ES7 React/Redux/GraphQL/React-Native snippets : İsimdeki teknolojiler için basit bir kod parçacığı eklentisidir.
Fix JSON : Json dosyasını biçimlendirmek için kullandığım bir eklentidir.
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.
GitLens — Git supercharged : Git özelliklerini güçlendirmek için kullandığım bir eklenti.
Highlight Matching Tag : Eşleşen açılış ve kapanış etiketlerini vurgulamak için kullandığım bir eklenti.
HTMLHint : Yazılan html etiketlerinde hata olup olmadığı konusunda analiz eden bir eklenti.
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.
indent-rainbow : Girintilerin renklendirerek kodların okunmasını kolaylaştıran bir eklenti.
jQuery Code Snippets : 130'dan fazla jQuery Kod Parçacığı olan bir eklenti. Jquery kodlaması yaparken bana kolaylık sağlayan bir eklenti.
json : Vsc da json desteği için bir eklenti.
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. 😊
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.
Material Icon Theme : İcon eklentisi.
Monkey Patch : Özel javascript'i vscode'a eklemenizi sağlayan bir eklenti. Customize UI eklentisinin çalışması için gerekli olan bir eklenti.
NPM Scripts : Kenar çubuğunda NPM komut dosyalarını görüntülemeyi ve çalıştırmayı sağlayan bir eklenti.
Path Intellisense : Dosya adlarını otomatik olarak tamamlayan bir eklenti. href ve src özeliklerinde çok işe yarıyor.
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. 😂
Prettier - Code formatter : Tek bir eklenti ile bütün formatlarda kodlarınızın biçimlendirmesini sağlayan bir eklenti.
SCSS Formatter : SCSS kodlalrını biçimlendirmek için kullanılandığım bir eklenti.
Simple React Snippets : React.js kod parçacıkları için kullandığım bir eklenti.
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.😊
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.
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.

Name		Name	Last commit message	Last commit date
Latest commit History 140 Commits
image		image
LICENSE		LICENSE
README.md		README.md

License

musayazlik/resource-archive-for-designers-and-developers

Folders and files

Latest commit

History

Repository files navigation