\n \u00dcniversitenizde d\u00fczenlenen “\u0130lk Web Siteni Olu\u015ftur” program\u0131, bir\u00e7ok \u00f6\u011frenci i\u00e7in teknoloji d\u00fcnyas\u0131na a\u00e7\u0131lan bir kap\u0131 oldu. Peki, bu ilk ad\u0131m\u0131 att\u0131ktan sonra ne olacak? Daha fazla bilgi edinme, yeni beceriler kazanma ve bu heyecan verici alanda ilerleme arzusuyla yan\u0131p tutu\u015fanlar i\u00e7in bu makale, web geli\u015ftirme yolculu\u011funda at\u0131lacak ad\u0131mlar\u0131 ve derinle\u015filecek konular\u0131 ele al\u0131yor. Ba\u015fta k\u0131demli misafir konu\u015fmac\u0131m\u0131z olmak \u00fczere, bu f\u0131rsat\u0131 bizlere sunan herkese te\u015fekk\u00fcrler.\n <\/p>\n
\n Bug\u00fcn, dijital d\u00fcnyan\u0131n temel ta\u015flar\u0131ndan biri olan web geli\u015ftirme alan\u0131na ad\u0131m at\u0131yoruz. Belki de ilk defa bir web sayfas\u0131n\u0131n nas\u0131l kodland\u0131\u011f\u0131n\u0131 g\u00f6rd\u00fcn\u00fcz, belki de HTML ve CSS’in ne kadar temel oldu\u011funu fark ettiniz. Bu ba\u015flang\u0131\u00e7, sadece bir pencereyi aralamak gibi. As\u0131l macera, bu pencereden i\u00e7eri girip, web sitelerinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, hangi teknolojilerin kullan\u0131ld\u0131\u011f\u0131n\u0131 ve bu alanda nas\u0131l bir kariyer in\u015fa edilebilece\u011fini anlamaktan ge\u00e7iyor. Bu yolculuk, sab\u0131r, pratik ve s\u00fcrekli \u00f6\u011frenmeyi gerektiriyor. Ama unutmay\u0131n, her b\u00fcy\u00fck yap\u0131n\u0131n temeli k\u00fc\u00e7\u00fck ad\u0131mlarla at\u0131l\u0131r. Bu makalede, web geli\u015ftirmenin temel kavramlar\u0131ndan ba\u015flayarak, daha ileri d\u00fczey konulara ve ger\u00e7ek d\u00fcnya uygulamalar\u0131na kadar geni\u015f bir yelpazede bilgi bulacaks\u0131n\u0131z. Amac\u0131m\u0131z, bu ilk ad\u0131mdan sonra kaybolmu\u015f hissetmenizi engellemek ve size yol g\u00f6sterecek bir harita sunmakt\u0131r.\n <\/p>\n
\n Web geli\u015ftirme, k\u0131saca internet \u00fczerinde eri\u015filebilir olan web siteleri ve web uygulamalar\u0131n\u0131n tasarlanmas\u0131, olu\u015fturulmas\u0131 ve bak\u0131m\u0131d\u0131r. Bu s\u00fcre\u00e7, kullan\u0131c\u0131lar\u0131n etkile\u015fimde bulunabilece\u011fi ve bilgi alabilece\u011fi dijital platformlar\u0131 hayata ge\u00e7irmeyi ama\u00e7lar. G\u00fcn\u00fcm\u00fczde, bir i\u015fletmenin veya bireyin dijital kimli\u011fi b\u00fcy\u00fck \u00f6l\u00e7\u00fcde web sitesi arac\u0131l\u0131\u011f\u0131yla \u015fekillenir. Bu nedenle, web geli\u015ftirme becerileri, hem profesyonel kariyerler hem de ki\u015fisel projeler i\u00e7in olduk\u00e7a de\u011ferlidir. Bir web sitesi, bir \u015firketin vitrini gibidir; potansiyel m\u00fc\u015fterilere ula\u015fman\u0131n, \u00fcr\u00fcn ve hizmetleri tan\u0131tman\u0131n ve marka bilinirli\u011fini art\u0131rman\u0131n en etkili yollar\u0131ndan biridir. Ayr\u0131ca, bloglar, portf\u00f6y siteleri, e-ticaret platformlar\u0131 ve hatta karma\u015f\u0131k web tabanl\u0131 yaz\u0131l\u0131mlar gibi \u00e7ok \u00e7e\u015fitli ama\u00e7larla web siteleri kullan\u0131l\u0131r. Bu \u00e7e\u015fitlilik, web geli\u015ftirme alan\u0131n\u0131n ne kadar geni\u015f ve dinamik oldu\u011funu g\u00f6stermektedir.\n <\/p>\n
\n Web geli\u015ftirmenin \u00f6nemi, giderek artan dijitalle\u015fme ile do\u011fru orant\u0131l\u0131d\u0131r. \u0130nsanlar bilgiye ula\u015fmak, al\u0131\u015fveri\u015f yapmak, sosyalle\u015fmek ve i\u015flerini halletmek i\u00e7in interneti yo\u011fun bir \u015fekilde kullan\u0131yor. Bu durum, i\u015fletmeleri de dijital d\u00fcnyada var olmaya zorluyor. Rekabetin yo\u011fun oldu\u011fu g\u00fcn\u00fcm\u00fcz pazar\u0131nda, g\u00fc\u00e7l\u00fc ve kullan\u0131c\u0131 dostu bir web sitesine sahip olmak, i\u015fletmeler i\u00e7in bir avantajd\u0131r. Kullan\u0131c\u0131lar\u0131n bir web sitesinde ge\u00e7irdi\u011fi s\u00fcre, geri d\u00f6n\u00fc\u015f oranlar\u0131 ve genel memnuniyet, sitenin kalitesiyle do\u011frudan ili\u015fkilidir. Bu kaliteyi sa\u011flamak ise iyi bir web geli\u015ftirme s\u00fcreciyle m\u00fcmk\u00fcnd\u00fcr. Teknik a\u00e7\u0131dan bak\u0131ld\u0131\u011f\u0131nda, web geli\u015ftirme, \u00f6n y\u00fcz (frontend) ve arka y\u00fcz (backend) olmak \u00fczere iki ana alana ayr\u0131l\u0131r. \u00d6n y\u00fcz, kullan\u0131c\u0131lar\u0131n do\u011frudan g\u00f6rd\u00fc\u011f\u00fc ve etkile\u015fimde bulundu\u011fu k\u0131s\u0131md\u0131r. Arka y\u00fcz ise sunucu taraf\u0131nda \u00e7al\u0131\u015fan ve veritaban\u0131 y\u00f6netimi, kullan\u0131c\u0131 kimlik do\u011frulama gibi i\u015flemleri ger\u00e7ekle\u015ftiren k\u0131s\u0131md\u0131r. Bu iki alan\u0131n uyumlu \u00e7al\u0131\u015fmas\u0131, ba\u015far\u0131l\u0131 bir web sitesinin temelini olu\u015fturur.\n <\/p>\n
\n \u00d6zellikle T\u00fcrkiye’de e-ticaretin h\u0131zla b\u00fcy\u00fcmesi ve KOB\u0130’lerin dijitalle\u015fme \u00e7abalar\u0131, nitelikli web geli\u015ftiricilere olan talebi art\u0131rmaktad\u0131r. Yerel i\u015fletmelerin de k\u00fcresel pazarda rekabet edebilmesi i\u00e7in profesyonel web siteleri ve online sat\u0131\u015f platformlar\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131maktad\u0131r. Bu nedenle, web geli\u015ftirme \u00f6\u011frenmek, hem bireysel kariyer geli\u015fiminiz hem de yerel ekonomiye katk\u0131 sa\u011flama potansiyeli a\u00e7\u0131s\u0131ndan olduk\u00e7a stratejik bir ad\u0131md\u0131r. Bir web geli\u015ftirici olarak, sadece kod yazmakla kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimi (UX – User Experience) ve kullan\u0131c\u0131 aray\u00fcz\u00fc (UI – User Interface) tasar\u0131m\u0131 gibi alanlarda da bilgi sahibi olman\u0131z beklenir. Kullan\u0131c\u0131lar\u0131n siteyi kolayca kullanabilmesi, arad\u0131\u011f\u0131n\u0131 bulabilmesi ve keyifli bir deneyim ya\u015fayabilmesi, web sitesinin ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. Bu da ancak hem teknik bilgi hem de tasar\u0131m prensiplerini birle\u015ftiren yetenekli geli\u015ftiricilerle m\u00fcmk\u00fcnd\u00fcr.\n <\/p>\n
\n Web geli\u015ftirme yolculu\u011funa ba\u015flarken ilk kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z dil HTML’dir. HTML (HyperText Markup Language), web sayfalar\u0131n\u0131n iskeletini olu\u015fturan temel i\u015faretleme dilidir. Bir binan\u0131n betonarme yap\u0131s\u0131 gibi d\u00fc\u015f\u00fcnebilirsiniz; sayfadaki ba\u015fl\u0131klar, paragraflar, g\u00f6rseller, ba\u011flant\u0131lar gibi t\u00fcm temel \u00f6\u011feleri tan\u0131mlar. HTML, i\u00e7eri\u011fi yap\u0131land\u0131rmak i\u00e7in etiketler (tag) kullan\u0131r. \u00d6rne\u011fin, bir ba\u015fl\u0131k olu\u015fturmak i\u00e7in \n HTML ile temel yap\u0131y\u0131 olu\u015fturduktan sonra, bu yap\u0131y\u0131 g\u00f6rsel olarak g\u00fczelle\u015ftirmek ve stilize etmek i\u00e7in CSS (Cascading Style Sheets) devreye girer. CSS, web sayfalar\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc belirleyen stil dilidir. Renkler, yaz\u0131 tipleri, boyutlar, bo\u015fluklar, d\u00fczenler gibi her t\u00fcrl\u00fc g\u00f6rsel ayar\u0131 CSS ile yap\u0131l\u0131r. HTML yap\u0131y\u0131 sa\u011flarken, CSS bu yap\u0131ya hayat verir. Bir evin i\u00e7 dekorasyonu gibi d\u00fc\u015f\u00fcnebilirsiniz; duvar rengi, mobilyalar\u0131n yerle\u015fimi, perdeler gibi unsurlar CSS ile belirlenir. CSS kurallar\u0131, belirli HTML \u00f6\u011felerine uygulan\u0131r. \u00d6rne\u011fin, t\u00fcm paragraflar\u0131n rengini mavi yapmak veya belirli bir ba\u015fl\u0131\u011f\u0131n yaz\u0131 tipini de\u011fi\u015ftirmek CSS ile m\u00fcmk\u00fcnd\u00fcr. CSS, selekt\u00f6rler (se\u00e7iciler) arac\u0131l\u0131\u011f\u0131yla hangi HTML \u00f6\u011felerinin stilize edilece\u011fini belirler. Bu se\u00e7iciler, etiket isimleri (\u00f6rne\u011fin, \n Bu iki teknoloji, web geli\u015ftirmenin \u00f6n y\u00fcz (frontend) k\u0131sm\u0131n\u0131n temelini olu\u015fturur. Bir web sayfas\u0131n\u0131n temel i\u00e7eri\u011fi HTML ile, bu i\u00e7eri\u011fin g\u00f6rsel sunumu ise CSS ile belirlenir. Ba\u015flang\u0131\u00e7 seviyesindeki geli\u015ftiriciler i\u00e7in bu ikiliyi sa\u011flam bir \u015fekilde \u00f6\u011frenmek, gelecekteki daha karma\u015f\u0131k teknolojilere ge\u00e7i\u015f i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r. \u00d6rne\u011fin, basit bir ki\u015fisel portf\u00f6y sitesi olu\u015ftururken, \u00f6ncelikle hangi b\u00f6l\u00fcmlerin olaca\u011f\u0131na (ileti\u015fim, hakk\u0131mda, projeler gibi) karar verip bunlar\u0131 HTML ile yap\u0131land\u0131r\u0131rs\u0131n\u0131z. Ard\u0131ndan, bu b\u00f6l\u00fcmlerin yaz\u0131 tipi, renkleri, arka planlar\u0131, kenarl\u0131klar\u0131 ve genel d\u00fczenini CSS ile belirlersiniz. Bu s\u00fcre\u00e7te, taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131n\u0131 (browser developer tools) kullanmak, kodunuzun nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc anl\u0131k olarak incelemenize ve hatalar\u0131 tespit etmenize yard\u0131mc\u0131 olur. Bu ara\u00e7lar, web geli\u015ftiricili\u011fin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r.\n <\/p>\n \n \u00d6rnek bir HTML yap\u0131s\u0131:<\/p>\n \n Ve bu HTML’i stilize eden \u00f6rnek bir \n HTML ve CSS ile statik (sabit) bir web sitesi olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr. Ancak g\u00fcn\u00fcm\u00fczdeki interaktif ve dinamik web deneyimleri i\u00e7in bu yeterli de\u011fildir. \u0130\u015fte bu noktada JavaScript devreye girer. JavaScript (JS), web sayfalar\u0131na etkile\u015fim ve dinamizm katmak i\u00e7in kullan\u0131lan bir programlama dilidir. Kullan\u0131c\u0131lar\u0131n d\u00fc\u011fmelere t\u0131klamas\u0131yla i\u00e7eriklerin de\u011fi\u015fmesi, formlar\u0131n do\u011frulanmas\u0131, animasyonlar, sayfay\u0131 yenilemeden veri \u00e7ekme (AJAX) gibi \u00f6zellikler JavaScript sayesinde m\u00fcmk\u00fcn olur. JavaScript, taray\u0131c\u0131da \u00e7al\u0131\u015fan bir dildir, yani web sayfalar\u0131n\u0131n client-side (istemci taraf\u0131) taraf\u0131nda \u00e7al\u0131\u015f\u0131r. Bu, kullan\u0131c\u0131n\u0131n bilgisayar\u0131nda, yani taray\u0131c\u0131s\u0131nda do\u011frudan \u00e7al\u0131\u015fmas\u0131 anlam\u0131na gelir. Bu sayede, sunucuya s\u00fcrekli istek g\u00f6ndermeden an\u0131nda tepkiler \u00fcretebilir.\n <\/p>\n \n JavaScript \u00f6\u011frenmek, web geli\u015ftirme becerilerinizi bir \u00fcst seviyeye ta\u015f\u0131man\u0131n anahtar\u0131d\u0131r. Temel JavaScript kavramlar\u0131 aras\u0131nda de\u011fi\u015fkenler, veri tipleri, operat\u00f6rler, kontrol yap\u0131lar\u0131 (if\/else, d\u00f6ng\u00fcler), fonksiyonlar ve nesneler bulunur. Bu kavramlar\u0131 anlad\u0131ktan sonra, DOM (Document Object Model) manip\u00fclasyonu ile web sayfas\u0131ndaki HTML \u00f6\u011felerine eri\u015febilir, onlar\u0131 de\u011fi\u015ftirebilir, ekleyebilir veya silebilirsiniz. \u00d6rne\u011fin, bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda bir metin kutusunun i\u00e7eri\u011fini de\u011fi\u015ftirmek veya bir resmi g\u00f6stermek\/gizlemek gibi i\u015flemler DOM manip\u00fclasyonu ile yap\u0131l\u0131r.\n <\/p>\n \n JavaScript’in g\u00fcc\u00fcn\u00fc g\u00f6steren basit bir \u00f6rnek: Kullan\u0131c\u0131 bir d\u00fc\u011fmeye t\u0131klad\u0131\u011f\u0131nda bir mesaj kutusu g\u00f6stermek.<\/p>\n \n JavaScript, web geli\u015ftirmenin \u00f6n y\u00fcz\u00fcnde (frontend) kullan\u0131c\u0131 deneyimini zenginle\u015ftirmenin yan\u0131 s\u0131ra, Node.js gibi platformlar sayesinde arka y\u00fcz (backend) geli\u015ftirmede de kullan\u0131labilmektedir. Bu, “full-stack” geli\u015ftirici olma yolunda \u00f6nemli bir ad\u0131md\u0131r. Full-stack geli\u015ftiriciler, hem \u00f6n y\u00fcz hem de arka y\u00fcz teknolojilerine hakimdir. JavaScript’in bu \u00e7ift y\u00f6nl\u00fc kullan\u0131m\u0131, onu g\u00fcn\u00fcm\u00fcz\u00fcn en pop\u00fcler ve \u00e7ok y\u00f6nl\u00fc programlama dillerinden biri haline getirmi\u015ftir. Ayr\u0131ca, React, Angular ve Vue.js gibi pop\u00fcler JavaScript k\u00fct\u00fcphaneleri ve framework’leri (yaz\u0131l\u0131m \u00e7er\u00e7eveleri), daha karma\u015f\u0131k ve \u00f6l\u00e7eklenebilir web uygulamalar\u0131 geli\u015ftirmeyi kolayla\u015ft\u0131r\u0131r. Bu framework’ler, tekrarlayan kodlar\u0131 azaltarak, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve daha organize bir yap\u0131 sunar.\n <\/p>\n \n Ger\u00e7ek d\u00fcnya senaryosu: Bir e-ticaret sitesinde \u00fcr\u00fcnlerin sepete eklenmesi ve sepetin g\u00fcncellenmesi. Bu t\u00fcr dinamik etkile\u015fimler, JavaScript’in DOM manip\u00fclasyonu ve olay dinleyicileri (event listeners) ile ger\u00e7ekle\u015ftirilir. Kullan\u0131c\u0131 bir \u00fcr\u00fcn\u00fc sepete ekledi\u011finde, JavaScript o \u00fcr\u00fcn bilgisini al\u0131r, bir sepet dizisine (array) ekler ve sayfan\u0131n \u00fcst k\u0131sm\u0131ndaki sepet ikonunda \u00fcr\u00fcn say\u0131s\u0131n\u0131 g\u00fcnceller. Bu i\u015flem, sayfan\u0131n tamam\u0131n\u0131n yeniden y\u00fcklenmesine gerek kalmadan arka planda ger\u00e7ekle\u015fir, bu da kullan\u0131c\u0131ya ak\u0131c\u0131 bir deneyim sunar. Bu t\u00fcr etkile\u015fimler, web sitelerini sadece bilgi sunan ara\u00e7lardan, kullan\u0131c\u0131larla etkile\u015fim kuran canl\u0131 platformlara d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.\n <\/p>\n \n \u00dcniversitenizde d\u00fczenlenen “Built Your First Website” program\u0131, web geli\u015ftirme alan\u0131na ilgi duyan \u00f6\u011frenciler i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131 olmu\u015ftur. Bu t\u00fcr programlar\u0131n ba\u015far\u0131s\u0131, birka\u00e7 temel fakt\u00f6re dayan\u0131r:\n <\/p>\n \n Bu program, \u00f6\u011frencilere sadece teknik beceriler kazand\u0131rmakla kalmay\u0131p, ayn\u0131 zamanda problem \u00e7\u00f6zme yeteneklerini geli\u015ftirme, analitik d\u00fc\u015f\u00fcnme becerilerini g\u00fc\u00e7lendirme ve dijital d\u00fcnyada kendilerine bir yer edinme konusunda bir \u00f6zg\u00fcven de a\u015f\u0131lar. Kendi web sitesini ba\u015far\u0131yla tamamlayan bir \u00f6\u011frenci, gelecekte daha karma\u015f\u0131k projeleri de ba\u015farabilece\u011fine dair g\u00fc\u00e7l\u00fc bir inan\u00e7 kazan\u0131r. Bu, kariyer hedeflerine ula\u015fmada \u00f6nemli bir motivasyon kayna\u011f\u0131d\u0131r. Bu t\u00fcr programlar, \u00fcniversitelerin \u00f6\u011frencilerine sundu\u011fu de\u011ferli f\u0131rsatlard\u0131r ve mezuniyet sonras\u0131 i\u015f hayat\u0131na haz\u0131rlanmalar\u0131nda kritik bir rol oynar. \u00d6\u011frencilerin teknolojiyle erken ya\u015fta tan\u0131\u015fmas\u0131 ve bu alanda pratik deneyim kazanmas\u0131, T\u00fcrkiye’nin dijital d\u00f6n\u00fc\u015f\u00fcm\u00fcne de katk\u0131 sa\u011flayacakt\u0131r.\n <\/p>\n \n HTML, CSS ve JavaScript temellerini sa\u011flamla\u015ft\u0131rd\u0131ktan sonra, web geli\u015ftirme d\u00fcnyas\u0131nda kar\u015f\u0131n\u0131za s\u0131k\u00e7a \u00e7\u0131kacak olan “framework” (yaz\u0131l\u0131m \u00e7er\u00e7evesi) ve “k\u00fct\u00fcphane” (library) kavramlar\u0131 olacakt\u0131r. Bu ara\u00e7lar, daha karma\u015f\u0131k ve \u00f6l\u00e7eklenebilir web uygulamalar\u0131 geli\u015ftirmeyi kolayla\u015ft\u0131rmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Framework’ler, belirli bir yap\u0131 ve kurallar b\u00fct\u00fcn\u00fc sunarak geli\u015ftirme s\u00fcrecine bir rehberlik sa\u011flar. K\u00fct\u00fcphaneler ise, belirli g\u00f6revleri yerine getiren haz\u0131r kod par\u00e7ac\u0131klar\u0131d\u0131r ve geli\u015ftirici taraf\u0131ndan daha serbest\u00e7e kullan\u0131l\u0131r. Her ikisi de geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, hatalar\u0131 azalt\u0131r ve daha organize kod yazmaya te\u015fvik eder.\n <\/p>\n \n \u00d6n y\u00fcz (frontend) geli\u015ftirme i\u00e7in pop\u00fcler JavaScript framework’lerinden baz\u0131lar\u0131 \u015funlard\u0131r:<\/p>\n \n Bu framework’ler, tek sayfa uygulamalar\u0131 (SPA – Single Page Applications) geli\u015ftirmeyi kolayla\u015ft\u0131r\u0131r. SPA’lar, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in sayfay\u0131 yeniden y\u00fcklemeden i\u00e7erikleri dinamik olarak g\u00fcnceller. Bu da web sitelerini masa\u00fcst\u00fc uygulamalar\u0131 kadar ak\u0131c\u0131 hale getirir. \u00d6rne\u011fin, bir sosyal medya platformunda yeni g\u00f6nderilerin sayfay\u0131 yenilemeden otomatik olarak y\u00fcklenmesi, bir SPA’n\u0131n \u00f6zelli\u011fidir. Bu framework’ler, geli\u015ftiricilerin karma\u015f\u0131k mant\u0131klar\u0131 y\u00f6netmelerine, veri ak\u0131\u015f\u0131n\u0131 kontrol etmelerine ve kullan\u0131c\u0131 aray\u00fczlerini daha verimli bir \u015fekilde olu\u015fturmalar\u0131na yard\u0131mc\u0131 olur.\n <\/p>\n \n Arka y\u00fcz (backend) geli\u015ftirme i\u00e7in de bir\u00e7ok framework bulunmaktad\u0131r. Bunlardan baz\u0131lar\u0131 \u015funlard\u0131r:<\/p>\n \n Bu backend framework’leri, veritaban\u0131 i\u015flemleri, API (Application Programming Interface) olu\u015fturma, kullan\u0131c\u0131 kimlik do\u011frulama ve sunucu taraf\u0131 mant\u0131k y\u00fcr\u00fctme gibi g\u00f6revleri y\u00f6netir. Bir web uygulamas\u0131n\u0131n hem \u00f6n y\u00fcz\u00fc hem de arka y\u00fcz\u00fc oldu\u011fundan, bu iki taraf\u0131n uyumlu \u00e7al\u0131\u015fmas\u0131 kritik \u00f6neme sahiptir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 bir formu doldurup g\u00f6nderdi\u011finde, \u00f6n y\u00fcz JavaScript bu veriyi toplar ve arka y\u00fcze g\u00f6nderir. Arka y\u00fcz framework’\u00fc bu veriyi al\u0131r, i\u015fler (\u00f6rne\u011fin, bir veritaban\u0131na kaydeder) ve bir yan\u0131t d\u00f6nd\u00fcr\u00fcr. Bu yan\u0131t, \u00f6n y\u00fcze geri g\u00f6nderilir ve kullan\u0131c\u0131ya bir ba\u015far\u0131 mesaj\u0131 g\u00f6sterilir.\n <\/p>\n \n Ger\u00e7ek d\u00fcnya senaryosu: Bir haber sitesinin ana sayfas\u0131nda en son haberlerin g\u00f6r\u00fcnt\u00fclenmesi. Bu haberler genellikle bir veritaban\u0131nda saklan\u0131r. Backend framework’\u00fc (\u00f6rne\u011fin, Node.js ve Express.js), veritaban\u0131ndan en son haberleri \u00e7eker ve bunlar\u0131 bir API arac\u0131l\u0131\u011f\u0131yla \u00f6n y\u00fcze g\u00f6nderir. Frontend framework’\u00fc (\u00f6rne\u011fin, React), bu veriyi alarak ana sayfada listeler halinde g\u00f6sterir. E\u011fer kullan\u0131c\u0131 bir habere t\u0131klarsa, \u00f6n y\u00fcz yine API’yi kullanarak o haberin detaylar\u0131n\u0131 \u00e7eker ve ayr\u0131 bir sayfada veya modal pencerede g\u00f6sterir. Bu s\u00fcre\u00e7te kullan\u0131lan framework’ler, bu veri ak\u0131\u015f\u0131n\u0131 ve bile\u015fen y\u00f6netimini \u00e7ok daha organize ve verimli hale getirir.\n <\/p>\n \n Web geli\u015ftirme yolculu\u011funda s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan sorular ve cevaplar\u0131:\n <\/p>\n \n Ba\u015flang\u0131\u00e7 i\u00e7in HTML ve CSS temeldir. Ard\u0131ndan dinamiklik katmak i\u00e7in JavaScript \u00f6\u011frenmek en mant\u0131kl\u0131s\u0131d\u0131r. JavaScript’i hem \u00f6n y\u00fcz hem de arka y\u00fcz (Node.js ile) i\u00e7in kullanabilirsiniz. Hangi alana y\u00f6nelece\u011finize karar verdikten sonra, o alan\u0131n pop\u00fcler framework’lerine (React, Angular, Vue.js \u00f6n y\u00fcz i\u00e7in; Django, Laravel, Express.js arka y\u00fcz i\u00e7in) odaklanabilirsiniz.\n <\/p>\n<\/li>\n \n Bu, \u00f6\u011frenme h\u0131z\u0131n\u0131za, ay\u0131rd\u0131\u011f\u0131n\u0131z zamana ve hedeflerinize ba\u011fl\u0131d\u0131r. Temel HTML, CSS ve JavaScript’i birka\u00e7 ayda \u00f6\u011frenebilirsiniz. Ancak bir “full-stack” geli\u015ftirici olmak veya belirli bir alanda uzmanla\u015fmak y\u0131llar s\u00fcrebilir. \u00d6nemli olan sab\u0131rl\u0131 olmak ve d\u00fczenli pratik yapmakt\u0131r.\n <\/p>\n<\/li>\n \n K\u00fc\u00e7\u00fck projelerle ba\u015flay\u0131n: Ki\u015fisel bir portf\u00f6y sitesi, basit bir blog, bir hesap makinesi uygulamas\u0131 gibi. Online kodlama platformlar\u0131n\u0131 (Codecademy, freeCodeCamp, Udemy, Coursera) kullan\u0131n. GitHub gibi platformlarda ba\u015fkalar\u0131n\u0131n kodlar\u0131n\u0131 inceleyin ve kendi projelerinizi payla\u015f\u0131n. Ger\u00e7ek d\u00fcnya problemlerini \u00e7\u00f6zmeye y\u00f6nelik projeler geli\u015ftirmek en etkili \u00f6\u011frenme y\u00f6ntemidir.\n <\/p>\n<\/li>\n \n Web geli\u015ftirme, g\u00fcn\u00fcm\u00fcz\u00fcn en \u00e7ok talep g\u00f6ren mesleklerinden biridir. Dijitalle\u015fmenin artmas\u0131yla birlikte, iyi yeti\u015ftirilmi\u015f web geli\u015ftiricilere olan ihtiya\u00e7 s\u00fcrekli artmaktad\u0131r. \u00d6zellikle hem \u00f6n y\u00fcz hem de arka y\u00fcz bilgisine sahip (full-stack) geli\u015ftiriciler, daha geni\u015f i\u015f olanaklar\u0131na sahiptir. T\u00fcrkiye’de de bu alanda \u00f6nemli bir b\u00fcy\u00fcme ve i\u015f f\u0131rsat\u0131 bulunmaktad\u0131r.\n <\/p>\n<\/li>\n<\/ol>\n \n “#100DaysOfCode” gibi programlar, web geli\u015ftirme yolculu\u011funa ba\u015flamak veya mevcut becerilerinizi ilerletmek i\u00e7in harika bir motivasyon kayna\u011f\u0131d\u0131r. Bu t\u00fcr zorluklar, d\u00fczenli pratik yapmay\u0131 te\u015fvik eder ve \u00f6\u011frenme s\u00fcrecini daha yap\u0131land\u0131r\u0131lm\u0131\u015f hale getirir. \u0130lk web sitenizi olu\u015fturmak, bu uzun ve heyecan verici yolculu\u011fun sadece ilk ad\u0131m\u0131d\u0131r. Unutmay\u0131n ki teknoloji s\u00fcrekli geli\u015fmektedir ve bir web geli\u015ftirici olarak s\u00fcrekli \u00f6\u011frenme k\u00fclt\u00fcr\u00fcn\u00fc benimsemek zorundas\u0131n\u0131z. Yeni diller, framework’ler ve ara\u00e7lar ortaya \u00e7\u0131kt\u0131k\u00e7a, kendinizi g\u00fcncel tutmak \u00f6nemlidir.\n <\/p>\n \n Bu makalede ele ald\u0131\u011f\u0131m\u0131z HTML, CSS, JavaScript ve pop\u00fcler framework’ler, web geli\u015ftirmenin geni\u015f yelpazesindeki temel yap\u0131 ta\u015flar\u0131d\u0131r. Bu temelleri sa\u011flam bir \u015fekilde \u00f6\u011frenmek, gelecekteki karma\u015f\u0131k projeler i\u00e7in size g\u00fcven verecektir. En \u00f6nemlisi, sab\u0131rl\u0131 olmak, bol bol pratik yapmak ve kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z zorluklardan ders \u00e7\u0131karmakt\u0131r. Hatalar, \u00f6\u011frenme s\u00fcrecinin do\u011fal bir par\u00e7as\u0131d\u0131r. \u00d6nemli olan, bu hatalardan ders \u00e7\u0131kararak ilerlemeye devam etmektir. \u00dcniversitenizdeki bu t\u00fcr programlar, bu yolculukta size \u00f6nemli bir ba\u015flang\u0131\u00e7 noktas\u0131 sunmu\u015ftur. Bu f\u0131rsat\u0131 de\u011ferlendirerek, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayabilir ve kendinize parlak bir gelecek in\u015fa edebilirsiniz. Unutmay\u0131n, her b\u00fcy\u00fck teknoloji devi, bir zamanlar sizin gibi ilk kod sat\u0131r\u0131n\u0131 yazan bir geli\u015ftiriciydi.\n <\/p>\n \n #WebGeli\u015ftirme #Frontend #Backend #JavaScript #HTML #CSS #Teknoloji\n <\/p>\n<h1><\/code>, bir paragraf i\u00e7in <p><\/code>, bir g\u00f6rsel eklemek i\u00e7in <img><\/code> etiketi kullan\u0131l\u0131r. Bu etiketler, taray\u0131c\u0131ya i\u00e7eri\u011fin ne oldu\u011funu ve nas\u0131l g\u00f6sterilmesi gerekti\u011fini s\u00f6yler. HTML’in \u00f6\u011frenmesi nispeten kolayd\u0131r \u00e7\u00fcnk\u00fc komut tabanl\u0131 bir dil de\u011fil, daha \u00e7ok i\u00e7eri\u011fi i\u015faretleme \u00fczerine kuruludur. Her etiketin bir ba\u015flang\u0131c\u0131 ve genellikle bir de biti\u015fi vard\u0131r (\u00f6rne\u011fin, <p>Bu bir paragraft\u0131r.<\/p><\/code>). Baz\u0131 etiketler ise kendi kendine kapan\u0131r (self-closing), \u00f6rne\u011fin <img src=\"resim.jpg\" alt=\"A\u00e7\u0131klama\"><\/code>.\n <\/p>\np<\/code>), s\u0131n\u0131f isimleri (\u00f6rne\u011fin, .iletisim-formu<\/code>) veya ID’ler (\u00f6rne\u011fin, #ana-baslik<\/code>) olabilir.\n <\/p>\nstyle.css<\/code> dosyas\u0131:<\/p>\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f4f4f4; \/* A\u00e7\u0131k gri arka plan *\/\n color: #333; \/* Koyu gri metin *\/\n}\n\nheader {\n background-color: #333; \/* Koyu gri ba\u015fl\u0131k arka plan\u0131 *\/\n color: #fff; \/* Beyaz ba\u015fl\u0131k metni *\/\n padding: 10px 0;\n text-align: center;\n}\n\nh1, h2 {\n color: #007bff; \/* Mavi ba\u015fl\u0131k rengi *\/\n}\n\nsection {\n margin-bottom: 20px;\n padding: 15px;\n background-color: #fff; \/* Beyaz b\u00f6l\u00fcm arka plan\u0131 *\/\n border-radius: 5px;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 10px 0;\n}\n\na {\n color: #007bff; \/* Mavi ba\u011flant\u0131 rengi *\/\n text-decoration: none; \/* Alt\u0131n\u0131 \u00e7izme *\/\n}\n\na:hover {\n text-decoration: underline; \/* \u00dczerine gelince alt\u0131n\u0131 \u00e7iz *\/\n}\n\nfooter {\n text-align: center;\n margin-top: 30px;\n padding-top: 10px;\n border-top: 1px solid #ccc; \/* A\u00e7\u0131k gri \u00fcst \u00e7izgi *\/\n font-size: 0.9em;\n}<\/code><\/pre>\n<\/p><\/div>\n<\/p>\nDinamik Web Siteleri \u0130\u00e7in JavaScript<\/h3>\n
<button id=\"mesajGosterBtn\">Mesaj G\u00f6ster<\/button>\n\n<script>\n \/\/ D\u00fc\u011fmeyi se\u00e7\n const mesajButonu = document.getElementById('mesajGosterBtn');\n\n \/\/ D\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda \u00e7al\u0131\u015facak fonksiyonu tan\u0131mla\n mesajButonu.addEventListener('click', function() {\n alert('Merhaba! JavaScript ile ilk etkile\u015fiminiz!');\n });\n<\/script><\/code><\/pre>\n<\/p><\/div>\n<\/p>\nVaka Analizi: “Built Your First Website” Program\u0131n\u0131n Ba\u015far\u0131s\u0131<\/h3>\n
\n
Daha Derinlere \u0130ni\u015f: Frameworkler ve K\u00fct\u00fcphaneler<\/h3>\n
\n
\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n
Sonu\u00e7: #100DaysOfCode ve S\u00fcrekli \u00d6\u011frenme K\u00fclt\u00fcr\u00fc<\/h3>\n