HTML, yani HyperText Markup Language, ziyaret ettiğiniz her web sitesinin temelini oluşturur. HTML'i web sayfalarına yapı kazandıran bir iskelet olarak düşünebilirsiniz – içeriklerin nereye gideceğini, nasıl organize edileceğini ve her bir parçanın neyi temsil ettiğini tanımlar. CSS daha sonra HTML'inizi renkler ve düzenlerle "süsler" ve JavaScript interaktivite ile "canlandırır", ancak HTML her şeyin mümkün olmasını sağlayan temel yapıyı sunar.
@ -88,7 +88,7 @@ Teraryum projeniz için özel bir klasör oluşturacak ve ilk HTML dosyanızı e
4. Explorer panelinde "New File" simgesine tıklayın
5. Dosyanıza `index.html` adını verin
**Seçenek 2: Terminal Komutlarını Kullanarak**
```bash
@ -238,48 +238,48 @@ Resimleri HTML'ye eklemeden önce, proje dosyalarınızı düzgün bir şekilde
HTML teraryumunuzun oldukça basit göründüğünü hatırlıyor musunuz? CSS, bu sade yapıyı görsel olarak çekici bir şeye dönüştürdüğümüz yerdir.
@ -205,7 +205,7 @@ body {
Tarayıcınızın geliştirici araçlarını (F12) açın, Elementler sekmesine gidin ve `<h1>` öğenizi inceleyin. Body'den yazı tipi ailesini miras aldığını göreceksiniz:
✅ **Deney Zamanı**: Body öğesinde `color`, `line-height` veya `text-align` gibi diğer miras alınabilir özellikleri ayarlamayı deneyin. Başlığınız ve diğer öğeler üzerinde ne olur?
@ -335,7 +335,7 @@ Teraryumumuzda, her bitkinin benzer bir stile ihtiyacı var ancak aynı zamanda
**Her bitki için HTML yapısı:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.tr.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/tr/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -599,7 +599,7 @@ Teraryumunuzu gerçekçi cam yansımalarıyla geliştirmeye hazır mısınız? B
Cam yüzeylerden ışığın nasıl yansıdığını simüle eden ince vurgular oluşturacaksınız. Bu yaklaşım, Jan van Eyck gibi Rönesans ressamlarının boyalı camı üç boyutlu göstermek için ışık ve yansımayı nasıl kullandıklarına benzer. İşte hedefiniz:
Web geliştirme dünyasının en eğlenceli yönlerinden birine hoş geldiniz - şeyleri interaktif hale getirmek! Belge Nesne Modeli (DOM), HTML ve JavaScript arasında bir köprü gibidir ve bugün teraryumunuzu hayata geçirmek için onu kullanacağız. Tim Berners-Lee ilk web tarayıcısını oluşturduğunda, belgelerin dinamik ve etkileşimli olabileceği bir web hayal etmişti - DOM bu vizyonu mümkün kılıyor.
> DOM'un ve onu referans alan HTML işaretlemesinin bir temsili. Kaynak: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Kapanışları Anlamak**: Kapanışlar JavaScript'te önemli bir konudur ve birçok geliştirici yıllarca teorik yönlerini tam olarak kavramadan kullanır. Bugün pratik uygulamaya odaklanıyoruz - interaktif özelliklerimizi oluştururken kapanışların doğal olarak nasıl ortaya çıktığını göreceksiniz. Anlayışınız, onların gerçek sorunları nasıl çözdüğünü gördükçe gelişecektir.
> DOM'un ve onu referans alan HTML işaretlemesinin bir temsili. Kaynak: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ Tebrikler! Vanilla JavaScript kullanarak sofistike bir sürükle-bırak sistemi
- **Cihazlar arası destek**: Masaüstü ve mobilde çalışır
- **Performans bilinci**: Bellek sızıntısı veya gereksiz hesaplama yok
> Bazı erken tarayıcılar, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) aracılığıyla
### Tarayıcılar Web İçeriğini Nasıl İşler?
@ -198,7 +198,7 @@ quadrantChart
Uzantı yükleme sürecini anlamak, insanların uzantınızı yüklediğinde yaşayacakları kullanıcı deneyimini tahmin etmenize yardımcı olur. Yükleme süreci modern tarayıcılar arasında standartlaştırılmıştır, arayüz tasarımında küçük farklılıklar vardır.
> **Önemli**: Kendi uzantılarınızı test ederken geliştirici modunu açmayı ve diğer mağazalardan uzantılara izin vermeyi unutmayın.
@ -313,10 +313,10 @@ Bu, bilgi ve seçenekleri mantıklı bir sırayla ortaya çıkararak kullanıcı
### Uzantı Görünümleri Genel Bakış
**Kurulum Görünümü** - İlk kez kullanıcı yapılandırması:
**Sonuç Görünümü** - Karbon ayak izi veri görüntüleme:
> ⚠️ **Güvenlik Düşüncesi**: Üretim uygulamalarında, API anahtarlarını Yerel Depolama'da saklamak güvenlik riskleri taşır çünkü JavaScript bu verilere erişebilir. Öğrenme amacıyla bu yaklaşım uygundur, ancak gerçek uygulamalar hassas kimlik bilgileri için güvenli sunucu tarafı depolama kullanmalıdır.
@ -126,7 +126,7 @@ Edge'de Geliştirici Araçlarını açmak için sağ üst köşedeki üç noktay
Haydi bunu deneyelim. Bir web sitesi açın (Microsoft.com bu iş için iyi çalışır) ve 'Kaydı başlat' düğmesine tıklayın. Şimdi sayfayı yenileyin ve profil oluşturucu her şeyi yakalasın. Kaydı durdurduğunuzda, tarayıcının siteyi 'komut dosyaları', 'render' ve 'boyama' işlemleriyle nasıl işlediğine dair ayrıntılı bir döküm göreceksiniz. Bu, görev kontrolünün bir roket fırlatışı sırasında her sistemi izlediği gibi - tam olarak neler olduğunu ve ne zaman olduğunu gerçek zamanlı verilerle görüyorsunuz.
✅ [Microsoft Belgeleri](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) daha fazla ayrıntı için harika bir kaynak
✅ Profil oluşturucuyu tanıyın! Bu sitede geliştirici araçlarını açın ve herhangi bir darboğaz olup olmadığını kontrol edin. En yavaş yüklenen varlık hangisi? En hızlı olan hangisi?
Elektrik kullanımını takip etmek için tmrow'un CO2 Signal API'sini kullanarak bir tarayıcı uzantısı oluşturun. Bu uzantı, bölgenizdeki elektrik kullanımının ne kadar yoğun olduğunu tarayıcınızda hatırlatıcı olarak gösterebilir. Bu uzantıyı anlık olarak kullanmak, bu bilgilere dayanarak aktiviteleriniz hakkında karar vermenize yardımcı olacaktır.
Edge tarayıcısına yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak Uzantılar panelini bulun. Buradan 'Paketlenmemiş Yükle' seçeneğini seçerek yeni bir uzantı yükleyin. İstendiğinde 'dist' klasörünü açın ve uzantı yüklenecektir. Kullanmak için CO2 Signal API'si için bir API anahtarına ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Electricity Map](https://www.electricitymap.org/map) ile ilgili bölgenizin koduna ([kodları burada bulabilirsiniz](http://api.electricitymap.org/v3/zones)) ihtiyacınız olacak (örneğin, Boston'da 'US-NEISO' kullanıyorum).
API anahtarı ve bölge uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta bölgenizin enerji kullanımını yansıtacak şekilde değişmelidir ve enerji yoğun aktiviteleriniz için uygun bir yönlendirme sağlayacaktır. Bu 'nokta' sisteminin konsepti, Kaliforniya emisyonları için [Energy Lollipop uzantısı](https://energylollipop.com/) tarafından bana önerildi.
Elektrik kullanımını takip etmek için tmrow'un CO2 sinyal API'sini kullanarak, bölgenizdeki elektrik tüketimi hakkında doğrudan tarayıcınızda bir hatırlatıcı almanızı sağlayan bir tarayıcı eklentisi oluşturun. Bu özel eklentiyi kullanmak, bu bilgileri temel alarak aktiviteleriniz hakkında kararlar almanıza yardımcı olacaktır.
Edge'e yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak Uzantılar panelini bulun. Buradan, yeni bir uzantı yüklemek için 'Paketlenmemiş yükle' seçeneğini seçin. İstendiğinde 'dist' klasörünü açın ve eklenti yüklenecektir. Kullanmak için, CO2 Signal API'si için bir API anahtarına ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Elektrik Haritası](https://www.electricitymap.org/map)'na karşılık gelen bölgenizin [kodu](http://api.electricitymap.org/v3/zones)'na ihtiyacınız olacak (örneğin, Boston'da 'US-NEISO' kullanıyorum).
API anahtarı ve bölge eklenti arayüzüne girildiğinde, tarayıcı uzantı çubuğundaki renkli nokta, bölgenizdeki enerji kullanımını yansıtacak şekilde değişmeli ve size yüksek enerji tüketen aktiviteler hakkında uygun bir gösterge sunmalıdır. Bu "nokta" sistemi fikrini, Kaliforniya emisyonları için [Energy Lollipop uzantısından](https://energylollipop.com/) aldım.
Tmrow'un C02 Signal API'sini kullanarak elektrik tüketimini takip edin ve bölgenizdeki elektrik tüketimi hakkında doğrudan tarayıcınızda bir hatırlatıcı almanızı sağlayan bir tarayıcı uzantısı oluşturun. Bu özel uzantıyı kullanmak, bu bilgilere dayanarak aktiviteleriniz hakkında daha bilinçli kararlar vermenize yardımcı olacaktır.
Edge tarayıcısına yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak Uzantılar panelini bulun. Buradan 'Sıkıştırılmamış uzantıyı yükle' seçeneğini seçerek yeni bir uzantı yükleyin. İstendiğinde 'dist' klasörünü açın ve uzantı yüklenecektir. Kullanabilmek için CO2 Signal API'si için bir API anahtarına ihtiyacınız olacak ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Elektrik Haritası](https://www.electricitymap.org/map) ile eşleşen bölgenizin [koduna](http://api.electricitymap.org/v3/zones) ihtiyacınız olacak (örneğin, Boston'da 'US-NEISO' kodunu kullanıyorum).
API anahtarı ve bölge uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta bölgenizdeki enerji tüketimini yansıtacak şekilde değişmelidir ve enerji yoğun aktiviteler için uygun bir gösterge sunmalıdır. Bu 'nokta' sistemi konsepti, [Energy Lollipop uzantısından](https://energylollipop.com/) Kaliforniya emisyonları için ilham alınarak geliştirilmiştir.
Elektrik kullanımını izlemek için tmrow'un CO2 Signal API'sini kullanarak, tarayıcınızda bölgenizdeki elektrik kullanımının ne kadar yoğun olduğunu hatırlatacak bir tarayıcı uzantısı oluşturmak. Bu uzantıyı kullanarak, bu bilgiye dayanarak aktiviteleriniz hakkında karar vermenize yardımcı olabilirsiniz.
Edge tarayıcısına yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak uzantılar panelini bulun. Buradan, yeni bir uzantı yüklemek için 'Load unpacked' seçeneğini seçin. Açılan pencerede 'dist' klasörünü seçin ve uzantı yüklenecektir. Uzantıyı kullanabilmek için CO2 Signal API'sinden ([buradan e-posta ile alın](https://www.co2signal.com/)) bir API anahtarına ihtiyacınız olacak - bu sayfadaki kutuya e-posta adresinizi girin. Ayrıca [bölgeniz için kod](http://api.electricitymap.org/v3/zones) [Elektrik Haritası](https://www.electricitymap.org/map) üzerinden bulunabilir (örneğin, Boston için 'US-NEISO' kodunu kullanıyorum).
API anahtarı ve bölge kodu uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta bölgenizdeki enerji kullanımını yansıtacak şekilde değişmelidir ve enerji yoğun aktivitelerin performansınıza uygun olup olmadığını gösteren bir işaretçi sunmalıdır. Bu 'nokta' sistemi fikri, Kaliforniya emisyonları için [Energy Lollipop Uzantısı](https://energylollipop.com/) tarafından bana ilham verdi.
Elektrik kullanımını izlemek için tmrow'un Signal CO2 API'sini kullanarak, bölgenizdeki elektrik kullanımının ne kadar yoğun olduğunu doğrudan tarayıcınızda hatırlatacak bir tarayıcı eklentisi oluşturacağız. Bu özel eklentiyi kullanmak, bu bilgilere dayanarak kendi aktivitelerinizi değerlendirmenize yardımcı olacaktır.
Edge'e yüklemek için, tarayıcının sağ üst köşesindeki "üç nokta" menüsünü kullanarak Eklentiler panelini bulun. Henüz etkin değilse, Geliştirici Modu'nu (sol alt köşede) etkinleştirin. Yeni bir eklenti yüklemek için "Sıkıştırılmamış yükle" seçeneğini seçin. İstemde "dist" klasörünü açın ve eklenti yüklenecektir. Kullanmak için, CO2 Signal API'si için bir API anahtarına ihtiyacınız olacak ([buradan e-posta yoluyla alabilirsiniz](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [elektrik haritasına](https://www.electricitymap.org/map) karşılık gelen [bölge koduna](http://api.electricitymap.org/v3/zones) ihtiyacınız olacak (örneğin, Boston için "US-NEISO").
API anahtarı ve bölge eklenti arayüzüne girildiğinde, tarayıcı eklenti çubuğundaki renkli nokta, bölgenin enerji kullanımını yansıtacak şekilde değişmelidir ve yüksek enerji tüketen hangi aktivitelerin uygun olabileceği konusunda bir gösterge sağlayacaktır. Bu "nokta" sisteminin arkasındaki konsept, Kaliforniya emisyonları için [Energy Lollipop eklentisi](https://energylollipop.com/) tarafından sağlanmıştır.
tmrow'un CO2 Signal API'sini kullanarak enerji tüketiminizi takip etmek için, bölgenizdeki enerji kullanımının ne kadar yoğun olduğunu tarayıcıda bir hatırlatıcı olarak gösterebilen bir tarayıcı uzantısı oluşturacağız. Bu uzantıyı ad-hoc olarak kullanarak, bu bilgiye dayanarak aktivitelerinizi değerlendirebilirsiniz.
Edge'e yüklemek için, tarayıcının sağ üst köşesindeki "üç nokta" menüsünden "Uzantılar" panelini bulun. Buradan "Load Unpacked" seçeneğini seçerek yeni uzantıyı yükleyin. İstendiğinde "dist" klasörünü açın, böylece uzantı yüklenir. Kullanmak için, CO2 Signal API'nin API anahtarına ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Electricity Map](https://www.electricitymap.org/map) ile uyumlu [bölgenizin koduna](http://api.electricitymap.org/v3/zones) ihtiyacınız olacak (örneğin, Boston için 'US-NEISO' kullanabilirsiniz).
API anahtarını ve bölgenizi uzantı arayüzüne girdikten sonra, tarayıcı uzantı çubuğunda görünen renkli bir nokta değişir ve bölgenizdeki enerji kullanımını yansıtarak hangi tür enerji gerektiren aktiviteleri yapmanın uygun olduğunu gösterir. Bu "nokta" sistemi konsepti, Kaliforniya'daki emisyonlar için [Energy Lollipop uzantısı](https://energylollipop.com/) tarafından bana ilham verilmiştir.
Elektrik kullanımını izlemek için tmrow CO2 Signal API'sini kullanarak, bölgenizdeki elektrik tüketiminin yoğunluğuna dair tarayıcınızda uyarılar almanızı sağlayan bir tarayıcı uzantısı oluşturun. Bu uzantıyı kullanmak, bu bilgiler doğrultusunda aktivitelerinizi değerlendirmenize yardımcı olacaktır.
Edge tarayıcısına yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak Uzantılar panelini bulun. Buradan 'Load Unpacked' seçeneğini seçerek yeni bir uzantı yükleyin. İstendiğinde 'dist' klasörünü açın ve uzantı yüklenecektir. Kullanabilmek için CO2 Signal API için bir API anahtarına ihtiyacınız olacak ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Elektrik Haritası](https://www.electricitymap.org/map) ile uyumlu olan bölgenize ait [kod](http://api.electricitymap.org/v3/zones) (örneğin, Boston'da 'US-NEISO' kullanıyorum).
API anahtarı ve bölge bilgisi uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta, bölgenizdeki enerji tüketimini yansıtacak şekilde değişir ve size uygun aktiviteler hakkında önerilerde bulunur. Bu 'nokta' sisteminin konsepti, [California için Energy Lollipop tarayıcı uzantısından](https://energylollipop.com/) ilham alınmıştır.
Elektrik kullanımını takip etmek için tmrow'un CO2 Signal API'sini kullanarak, bölgenizdeki elektrik kullanımının ne kadar yoğun olduğunu tarayıcınızda hatırlatıcı olarak görebileceğiniz bir tarayıcı uzantısı oluşturun. Bu uzantıyı rastgele kullanmak, bu bilgilere dayanarak aktiviteleriniz hakkında karar vermenize yardımcı olacaktır.
Edge tarayıcısında yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak Uzantılar panelini bulun. Buradan 'Paketlenmemiş Yükle' seçeneğini seçerek yeni bir uzantı yükleyin. İstendiğinde 'dist' klasörünü açın ve uzantı yüklenecektir. Kullanmak için, CO2 Signal API'si için bir API anahtarına ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Electricity Map](https://www.electricitymap.org/map) ile ilgili bölgenizin koduna ([kodları burada bulabilirsiniz](http://api.electricitymap.org/v3/zones)) ihtiyacınız olacak (örneğin, Boston'da 'US-NEISO' kullanıyorum).
API anahtarı ve bölge uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta bölgenizin enerji kullanımını yansıtacak şekilde değişmelidir ve enerji yoğun aktiviteleriniz için uygun bir yönlendirme sağlayacaktır. Bu 'nokta' sisteminin konsepti, California emisyonları için [Energy Lollipop uzantısı](https://energylollipop.com/) tarafından bana önerildi.
> Görsel [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) üzerinden alınmıştır
Canvas öğesi üzerinde çizim yapmak için, tüm canvas grafiklerinin temelini oluşturan aynı üç adımlı süreci takip edeceksiniz. Bunu birkaç kez yaptığınızda, doğal bir hale gelir:
@ -329,11 +329,11 @@ Bir Canvas öğesi içeren bir web sayfası oluşturacaksınız. `1024*768` boyu
- **Puanlama sistemi**: Yok edilen her düşman gemisi 100 puan kazandırır (yuvarlak sayılar oyuncuların zihinsel olarak hesaplamasını kolaylaştırır). Puan, sol alt köşede gösterilir.
- **Can sayacı**: Kahramanınız üç canla başlar - erken dönem arcade oyunlarının zorluk ile oynanabilirlik arasında denge kurmak için belirlediği bir standart. Düşmanla her çarpışma bir cana mal olur. Kalan canları sağ altta gemi ikonlarıyla göstereceğiz .
- **Can sayacı**: Kahramanınız üç canla başlar - erken dönem arcade oyunlarının zorluk ile oynanabilirlik arasında denge kurmak için belirlediği bir standart. Düşmanla her çarpışma bir cana mal olur. Kalan canları sağ altta gemi ikonlarıyla göstereceğiz .
`history.pushState` kullanımı, tarayıcının navigasyon geçmişinde yeni girişler oluşturur. Tarayıcınızın *geri düğmesini* basılı tutarak bunu kontrol edebilirsiniz, şöyle bir şey göstermesi gerekir:
Geri düğmesine birkaç kez tıklamayı deneyin, URL'nin değiştiğini ve geçmişin güncellendiğini göreceksiniz, ancak aynı şablon görüntülenmeye devam eder.
3. Sayfanın yeniden yüklendiğini ve verilerin URL'de göründüğünü fark edin
### HTTP Yöntemleri Karşılaştırması
@ -350,7 +350,7 @@ Kayıt formunuzu POST yöntemi kullanarak arka uç API ile doğru şekilde ileti
2. **"Hesap Oluştur"** düğmesine tıklayın
3. **Sunucu yanıtını** tarayıcınızda gözlemleyin
**Görmeniz gerekenler:**
- **Tarayıcı** API uç noktasının URL'sine yönlendirme yapar
@ -615,7 +615,7 @@ async function register() {
3. **"Hesap Oluştur" düğmesine tıklayın**
4. **Konsol mesajlarını ve kullanıcı geri bildirimlerini gözlemleyin**
**Görmeniz gerekenler:**
- **Gönder düğmesinde** yükleme durumu görünür
@ -790,7 +790,7 @@ Kayıt formunuzu mükemmel bir kullanıcı deneyimi ve veri kalitesi sağlayan s
3. **Kullanıcı adı alanına özel karakterler deneyin**
4. **Negatif bir bakiye miktarı girin**
**Gözlemleyecekleriniz:**
- **Tarayıcı** yerel doğrulama mesajlarını gösterir
@ -938,7 +938,7 @@ Kullanıcı zaten varsa HTML'de bir hata mesajı gösterin.
İşte biraz stil ekledikten sonra son giriş sayfasının nasıl görünebileceğine dair bir örnek:
@ -190,7 +190,7 @@ Titanik'in bölümlere ayrılmış tasarımı gibi, bu sorunları tek tek çözm
Kendi etrafımızda dönmek yerine, **merkezi bir durum yönetim sistemi** oluşturacağız. Bunu, tüm önemli şeylerin sorumluluğunu üstlenen gerçekten organize bir kişi gibi düşünün:
```mermaid
flowchart TD
@ -804,7 +804,7 @@ Bu meydan okuma, hem kullanıcı deneyimini hem de uygulama verimliliğini düş
İşte ödevi tamamladıktan sonra ortaya çıkan bir örnek:
@ -112,7 +112,7 @@ Diyalogunuzu uygulamak için aşağıdaki iki yaklaşımdan birini seçin:
**Beklenen Sonuç:**
Bu görevi tamamladıktan sonra, bankacılık uygulamanız profesyonel bir görünüme ve davranışa sahip, tamamen işlevsel bir "İşlem Ekle" özelliğine sahip olmalıdır:
Bu projede, hayali bir banka nasıl kurulur öğreneceksiniz. Bu dersler, bir web uygulamasının nasıl tasarlanacağı ve yönlendirmelerin nasıl sağlanacağı, formların nasıl oluşturulacağı, durumun nasıl yönetileceği ve bir API'den banka verilerini nasıl çekeceğiniz gibi konularda talimatlar içerir.
3. Herhangi bir GitHub depo URL'sini yapıştırın (bunu deneyin: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Enter tuşuna basın ve sihri izleyin!
@ -242,7 +242,7 @@ Bu yöntem, VSCode.dev'de yeni başlıyorsanız ve belirli bir depoyu açmak ist
Kendinizi bir kodlama sihirbazı gibi hissetmek ister misiniz? Şu klavye kısayolunu deneyin: Ctrl+Shift+P (veya Mac'te Cmd+Shift+P) ile Komut Paletini açın:
CodeSwing yüklendikten sonra, özgeçmiş web sitenizin canlı önizlemesi düzenleyicide görünür. Bu, siteyi düzenlerken tam olarak nasıl göründüğünü görmenizi sağlar.
**Geliştirilmiş arayüzü anlama:**
- **Bölünmüş görünüm**: Kodunuzu bir tarafta ve canlı önizlemeyi diğer tarafta **gösterir**
## 🗺️ AI Uygulama Geliştirme Yolculuğunuz
@ -194,7 +194,7 @@ mindmap
**Temel İlke**: AI uygulama geliştirme, geleneksel web geliştirme becerilerini AI hizmet entegrasyonu ile birleştirerek kullanıcılar için doğal ve duyarlı hissedilen akıllı uygulamalar oluşturur.
**Oyun alanını bu kadar kullanışlı yapan şey:**
- **Farklı AI modellerini deneyin**: GPT-4o-mini, Claude ve diğerleri (hepsi ücretsiz!)
@ -204,7 +204,7 @@ mindmap
Biraz oynadıktan sonra, sadece "Code" sekmesine tıklayın ve ihtiyacınız olan uygulama kodunu almak için programlama dilinizi seçin.
## Python Backend Entegrasyonunu Kurma
@ -2355,14 +2355,14 @@ Bu projeyi bir bulut geliştirme ortamında denemek ister misiniz? GitHub Codesp
- [Web Dev For Beginners deposuna](https://github.com/microsoft/Web-Dev-For-Beginners) **gidin**
- Sağ üst köşedeki "Use this template" (Bu şablonu kullan) düğmesine **tıklayın** (GitHub'da oturum açtığınızdan emin olun)
**Adım 2: Codespaces'i Başlat**
- Yeni oluşturduğunuz depoyu **açın**
- Yeşil "Code" düğmesine **tıklayın** ve "Codespaces" seçeneğini seçin
- Geliştirme ortamınızı başlatmak için "Create codespace on main" seçeneğini **seçin**
Her ders; tamamlanacak bir ödev, bilgi kontrolü ve şu konulara rehberlik eden bir zorluk içerir:
@ -99,7 +99,7 @@ Bu müfredat hazır bir geliştirme ortamına sahiptir! Başlarken, müfredatı
Oluşturduğunuz deponuzda **Code** (Kod) düğmesine tıklayın ve **Open with Codespaces** (Codespaces ile Aç) seçeneğini seçin. Bu, üzerinde çalışmanız için yeni bir Codespace oluşturacaktır.
> DOM 與參照它的 HTML 標記的表示圖。取自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
> DOM 與參照它的 HTML 標記的表示圖。取自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
Сьогодні ми дослідимо неймовірні інструменти, які роблять сучасну веб-розробку не просто можливою, а дійсно захоплюючою. Я говорю про ті самі редактори, браузери та робочі процеси, які розробники Netflix, Spotify та твоєї улюбленої студії інді-додатків використовують щодня. І ось частина, яка змусить тебе танцювати від радості: більшість із цих професійних, стандартних для галузі інструментів абсолютно безкоштовні!
Ми пройдемо цей шлях разом, крок за кроком. Без поспіху, без тиску – лише ти, я і кілька дійсно крутих інструментів, які стануть твоїми новими найкращими друзями!
> Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -583,7 +583,7 @@ flowchart TD
✅ Хороший спосіб знайти репозиторії, дружні до новачків, – це [шукати за тегом 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
> Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -928,12 +928,12 @@ pie title "Common ARIA Usage Patterns"
**Інформативні зображення** - передають важливу інформацію:
```html
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.uk.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/uk/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**Декоративні зображення** - суто візуальні, без інформаційної цінності:
> Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, або HyperText Markup Language, є основою кожного вебсайту, який ви коли-небудь відвідували. Уявіть HTML як скелет, який надає структуру вебсторінкам – він визначає, де розміщується контент, як він організований і що кожен елемент представляє. Хоча CSS пізніше "одягне" ваш HTML кольорами та макетами, а JavaScript оживить його інтерактивністю, HTML забезпечує основну структуру, яка робить усе інше можливим.
@ -88,7 +88,7 @@ mindmap
4. У панелі Explorer натисніть на іконку "New File"
5. Назвіть ваш файл `index.html`
**Варіант 2: Використання команд терміналу**
```bash
@ -239,48 +239,48 @@ HTML використовує парні теги для визначення е
> Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
Пам'ятаєте, як ваш HTML-тераріум виглядав досить просто? Завдяки CSS ми перетворимо цю просту структуру на щось візуально привабливе.
@ -205,7 +205,7 @@ body {
Відкрийте інструменти розробника вашого браузера (F12), перейдіть на вкладку Elements і перевірте ваш елемент `<h1>`. Ви побачите, що він успадковує шрифт від body:
✅ **Час експерименту**: Спробуйте встановити інші властивості, які можна успадкувати, для `<body>`, такі як `color`, `line-height`або`text-align`. Що відбувається з вашим заголовком та іншими елементами?
@ -335,7 +335,7 @@ h1 {
**Ось структура HTML для кожної рослини:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.uk.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/uk/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -560,7 +560,7 @@ flowchart LR
Ви створите тонкі відблиски, які імітують, як світло відбивається від скляних поверхонь. Цей підхід схожий на те, як художники епохи Відродження, такі як Ян ван Ейк, використовували світло і відображення, щоб зробити намальоване скло тривимірним. Ось до чого ви прагнете:
> Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac)
Ласкаво просимо до одного з найцікавіших аспектів веб-розробки — створення інтерактивності! Document Object Model (DOM) — це як міст між вашим HTML і JavaScript, і сьогодні ми використаємо його, щоб оживити ваш тераріум. Коли Тім Бернерс-Лі створив перший веб-браузер, він уявляв веб як динамічний і інтерактивний простір — DOM робить це можливим.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
> Представлення DOM і HTML-розмітки, яка його описує. Від [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Розуміння замикань**: Замикання — це важлива тема в JavaScript, і багато розробників використовують їх роками, перш ніж повністю зрозуміти всі теоретичні аспекти. Сьогодні ми зосередимося на практичному застосуванні — ви побачите, як замикання природно виникають під час створення наших інтерактивних функцій. Розуміння розвиватиметься, коли ви побачите, як вони вирішують реальні проблеми.
> Представлення DOM і HTML-розмітки, яка його описує. Від [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -573,7 +573,7 @@ function stopElementDrag() {
- **Підтримка різних пристроїв**: Працює на настільних комп'ютерах і мобільних пристроях
- **Свідомість продуктивності**: Без витоків пам'яті чи зайвих обчислень
> Деякі ранні браузери, через [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Як браузери обробляють веб-контент
@ -198,7 +198,7 @@ quadrantChart
Розуміння процесу встановлення розширень допомагає передбачити досвід користувача під час встановлення вашого розширення. Процес встановлення стандартизований у сучасних браузерах, з невеликими варіаціями в дизайні інтерфейсу.
> **Важливо**: Переконайтеся, що ви увімкнули режим розробника та дозволили розширення з інших магазинів під час тестування власних розширень.
@ -313,10 +313,10 @@ project-root/
### Огляд вигляду розширення
**Екран налаштувань** - Конфігурація для першого використання:
**Екран результатів** - Відображення даних про вуглецевий слід:
> ⚠️ **Міркування про безпеку**: У виробничих додатках зберігання ключів API у LocalStorage становить ризики безпеки, оскільки JavaScript може отримати доступ до цих даних. Для навчальних цілей цей підхід підходить, але реальні додатки повинні використовувати безпечне серверне сховище для конфіденційних даних.
Спробуймо це. Відкрийте веб-сайт (Microsoft.com добре підходить для цього) і натисніть кнопку 'Record'. Тепер оновіть сторінку і спостерігайте, як профайлер фіксує все, що відбувається. Коли ви зупините запис, ви побачите детальний розподіл того, як браузер "скриптує", "рендерить" і "малює" сайт. Це нагадує, як центр управління польотами моніторить кожну систему під час запуску ракети - ви отримуєте дані в реальному часі про те, що саме відбувається і коли.
✅ [Документація Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) має багато додаткових деталей, якщо ви хочете заглибитися.
@ -136,11 +136,11 @@ flowchart LR
Отримайте знімок продуктивності вашої сторінки, вибравши частину шкали часу профілю та переглянувши панель зведення:
✅ Ознайомтеся з вашим профайлером! Відкрийте інструменти розробника на цьому сайті і перевірте, чи є якісь вузькі місця. Який ресурс завантажується найповільніше? Найшвидше?
Використовуючи API C02 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб мати нагадування прямо у вашому браузері про те, наскільки інтенсивним є споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати обґрунтовані рішення щодо ваших дій на основі цієї інформації.
Щоб встановити розширення в Edge, скористайтеся меню з трьома крапками у верхньому правому куті браузера, щоб знайти панель розширень. Там виберіть "Завантажити розпаковане" для завантаження нового розширення. У вікні вибору відкрийте папку 'dist', і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка на панелі розширення браузера повинна змінитися, щоб відобразити споживання енергії у вашому регіоні, і надати вам підказку щодо того, які енергоємні дії будуть доречними. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для викидів у Каліфорнії.
Використовуючи API CO2 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, яке дозволить вам отримувати нагадування безпосередньо у вашому браузері про споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій, спираючись на цю інформацію.
Щоб встановити в Edge, скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель Розширення. Звідти виберіть "Завантажити розпаковане", щоб додати нове розширення. Виберіть папку "dist", коли буде запропоновано, і розширення буде завантажено. Для використання вам знадобиться API-ключ для CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) – введіть свою електронну адресу у відповідне поле на цій сторінці) та [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Карті електроенергії](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую "US-NEISO").
Після введення API-ключа та регіону в інтерфейсі розширення, кольорова точка на панелі розширення браузера повинна змінитися, щоб відобразити споживання енергії у вашому регіоні, і надати вам індикатор щодо дій з високим споживанням енергії, які будуть для вас доречними. Концепцію цієї системи "точок" я запозичив із [розширення Energy Lollipop](https://energylollipop.com/) для викидів у Каліфорнії.
Використовуючи API C02 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб ви могли отримувати нагадування безпосередньо у своєму браузері про споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій на основі цієї інформації.
Щоб встановити на Edge, скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель Розширення. Звідти виберіть "Завантажити розпаковане розширення", щоб додати нове розширення. Укажіть папку 'dist' у запиті, і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) – введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Карті електроенергії](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
Після введення API-ключа та регіону в інтерфейсі розширення кольорова точка на панелі розширень браузера повинна змінюватися, відображаючи споживання енергії у вашому регіоні, і надавати вам індикатор щодо енергоємних дій, які вам варто виконувати. Концепція цієї системи "точок" була натхненна [розширенням Energy Lollipop](https://energylollipop.com/) для каліфорнійських викидів.
Використання API CO2 Signal від tmrow для відстеження споживання електроенергії, створення розширення для браузера, яке нагадуватиме вам про те, наскільки інтенсивно використовується електроенергія у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій на основі цієї інформації.
Щоб встановити на Edge, скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель розширень. Звідти виберіть "Завантажити неупаковане" для завантаження нового розширення. У вікні виберіть папку "dist", і розширення буде завантажено. Для використання вам знадобиться API-ключ CO2 Signal ([отримайте його через електронну пошту тут](https://www.co2signal.com/) — введіть свою електронну адресу у поле на сторінці) та [код вашого регіону](http://api.electricitymap.org/v3/zones) [на електричній карті](https://www.electricitymap.org/map) (наприклад, для Бостона я використовую 'US-NEISO').
Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка у панелі розширень браузера повинна змінитися, відображаючи споживання енергії у вашому регіоні, і надавати вам індикатор того, які енергоємні дії будуть доречними. Концепція цієї системи "точок" була запропонована мені розширенням [Energy Lollipop](https://energylollipop.com/) для каліфорнійських викидів.
Ви будете використовувати API Signal CO2 від tmrow для моніторингу споживання електроенергії, щоб створити розширення для браузера, яке надаватиме нагадування безпосередньо у вашому браузері про те, наскільки інтенсивним є використання електроенергії у вашому регіоні. Використання цього спеціального розширення допоможе оцінити ваші дії на основі цієї інформації.
Для встановлення в Edge скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель Розширення. Якщо ще не активовано, увімкніть Режим розробника (внизу ліворуч). Виберіть "Завантажити розпаковане", щоб завантажити нове розширення. Укажіть папку "dist" у запиті, і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal (його можна [отримати тут через електронну пошту](https://www.co2signal.com/) — введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [електричній мапі](https://www.electricitymap.org/map) (наприклад, для Бостона це "US-NEISO").
Після введення API-ключа та регіону в інтерфейсі розширення кольорова точка на панелі розширення браузера має змінитися, щоб відображати споживання енергії у вашому регіоні, і надавати підказки щодо того, які енергоємні дії доцільно виконувати. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для викидів у Каліфорнії.
Ми створимо розширення для браузера, яке використовує API CO2 Signal від tmrow, щоб відстежувати споживання електроенергії у вашому регіоні. Це розширення відображатиме нагадування у вашому браузері про рівень споживання електроенергії, що дозволить вам приймати рішення щодо вашої діяльності на основі цієї інформації.
Щоб встановити розширення в Edge, знайдіть панель "Розширення" через меню з "трьома крапками" у верхньому правому куті браузера. Там виберіть "Load Unpacked" і завантажте нове розширення. У вікні, що з'явиться, відкрийте папку "dist", і розширення буде завантажено. Для використання вам знадобиться API-ключ CO2 Signal ([отримайте його тут через email](https://www.co2signal.com/) - введіть вашу електронну адресу у відповідне поле на сторінці) та [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, для Бостона використовується 'US-NEISO').
Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка, що відображається на панелі розширень браузера, змінюватиметься відповідно до рівня енергоспоживання у вашому регіоні. Це допоможе вам визначити, які види діяльності, що потребують енергії, є доцільними в даний момент. Концепція цієї "точкової" системи була натхненна розширенням [Energy Lollipop](https://energylollipop.com/) для відстеження викидів у Каліфорнії.
Використовуючи API CO2 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, яке дозволить вам отримувати сповіщення про рівень споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій, спираючись на цю інформацію.
## Початок роботи
@ -31,7 +31,7 @@ npm run build
Щоб встановити в Edge, скористайтеся меню "три точки" у верхньому правому куті браузера, щоб знайти панель Розширення. Звідти виберіть "Load Unpacked", щоб завантажити нове розширення. Відкрийте папку 'dist' за запитом, і розширення буде завантажено. Для використання вам знадобиться API-ключ для CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть вашу електронну адресу у відповідне поле на сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Електричній карті](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка на панелі розширення браузера змінюватиметься, відображаючи рівень споживання енергії у вашому регіоні, і надаватиме вам рекомендації щодо відповідних дій. Ідея системи "точок" була запозичена з [розширення браузера Energy Lollipop](https://energylollipop.com/) для Каліфорнії.
Використовуючи API CO2 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб мати нагадування прямо у вашому браузері про те, наскільки інтенсивно використовується електроенергія у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій, спираючись на цю інформацію.
Щоб встановити розширення в Edge, скористайтеся меню з трьома крапками у верхньому правому куті браузера, щоб знайти панель розширень. Там виберіть "Завантажити розпаковане" для додавання нового розширення. У вікні вибору відкрийте папку 'dist', і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка в панелі розширення браузера має змінитися, відображаючи споживання енергії у вашому регіоні, і підказувати, які енергоємні дії вам варто виконувати. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для відстеження викидів у Каліфорнії.
> Зображення з [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Щоб малювати на елементі canvas, ви будете дотримуватися того самого триетапного процесу, який є основою всієї графіки canvas. Після кількох спроб це стане для вас природним:
- **Система очок**: Кожен знищений ворожий корабель приносить 100 очок (круглі числа легше підраховувати подумки). Очки відображаються в нижньому лівому куті.
- **Лічильник життя**: Ваш герой починає з трьох життів — стандарт, встановлений ранніми аркадними іграми для балансу між викликом і зручністю гри. Кожне зіткнення з ворогом коштує одного життя. Ми відобразимо залишок життів у нижньому правому куті за допомогою ікон кораблів .
- **Лічильник життя**: Ваш герой починає з трьох життів — стандарт, встановлений ранніми аркадними іграми для балансу між викликом і зручністю гри. Кожне зіткнення з ворогом коштує одного життя. Ми відобразимо залишок життів у нижньому правому куті за допомогою ікон кораблів .
Використання `history.pushState` створює нові записи в історії навігації браузера. Ви можете перевірити це, утримуючи *кнопку назад* вашого браузера, вона повинна показувати щось на кшталт цього:
Якщо ви спробуєте кілька разів натиснути кнопку назад, ви побачите, що поточний URL змінюється, а історія оновлюється, але той самий шаблон продовжує відображатися.
3. **Спостерігайте** відповідь сервера у вашому браузері
**Що ви повинні побачити:**
- **Браузер перенаправляє** на URL кінцевого пункту API
@ -532,7 +532,7 @@ async function register() {
3. **Натисніть** "Створити акаунт"
4. **Спостерігайте** повідомлення в консолі та зворотний зв'язок для користувача
**Що ви повинні побачити:**
- **Стан завантаження** з'являється на кнопці надсилання
@ -707,7 +707,7 @@ input:focus:invalid {
3. **Спробуйте** спеціальні символи в полі імені користувача
4. **Введіть** негативну суму балансу
**Що ви спостерігатимете:**
- **Браузер відображає** нативні повідомлення про перевірку
@ -829,7 +829,7 @@ timeline
Ось приклад того, як може виглядати фінальна сторінка входу після невеликого стилювання:
Замість того, щоб бігати по колу, ми створимо **централізовану систему управління станом**. Уявіть це як одну дуже організовану людину, яка відповідає за всі важливі речі:
Після завершення цього завдання ваш банківський додаток повинен мати повністю функціональну функцію "Додати транзакцію", яка виглядає та працює професійно:
У цьому проєкті ви навчитеся створювати вигаданий банк. Ці уроки включають інструкції щодо створення макету веб-додатку, налаштування маршрутів, створення форм, управління станом і отримання даних з API, з якого можна отримати дані банку.
4. **Напишіть** повідомлення про коміт: "Додано початкову структуру HTML"
5. **Натисніть** "Commit new file", щоб зберегти зміни
**Що забезпечує це початкове налаштування:**
- **Встановлює** правильну структуру документа HTML5 із семантичними елементами
@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA:
✅ **Індикатор успіху**: Ви повинні побачити файли вашого проєкту у боковій панелі Explorer, а`index.html` буде доступний для редагування у головній області редактора.
**Що ви побачите в інтерфейсі:**
- **Бокова панель Explorer**: **Відображає** файли вашого репозиторію та структуру папок
@ -448,7 +448,7 @@ li:before {
**Результати після встановлення:**
Після встановлення CodeSwing ви побачите живий попередній перегляд вашого вебсайту-резюме в редакторі. Це дозволяє вам бачити, як виглядає ваш сайт, у міру внесення змін.
**Розуміння покращеного інтерфейсу:**
- **Розділений вигляд**: **Показує** ваш код з одного боку та живий попередній перегляд з іншого
## 🗺️ Ваш навчальний шлях через розробку AI-додатків
@ -194,7 +194,7 @@ mindmap
**Основний принцип**: Розробка AI-додатків поєднує традиційні навички веб-розробки з інтеграцією AI-сервісів, створюючи інтелектуальні додатки, які здаються природними і чуйними для користувачів.
**Ось що робить Playground таким корисним:**
- **Спробуйте** різні AI-моделі, такі як GPT-4o-mini, Claude та інші (усі безкоштовні!)
@ -204,7 +204,7 @@ mindmap
Після того, як ви трохи пограєте, просто натисніть вкладку "Code" і виберіть вашу мову програмування, щоб отримати код для реалізації.
## Налаштування бекенд-інтеграції на Python
@ -2102,14 +2102,14 @@ mindmap
- **Перейдіть** до [репозиторію Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Натисніть** "Use this template" у верхньому правому куті (переконайтеся, що ви увійшли до GitHub)
**Крок 2: Запуск Codespaces**
- **Відкрийте** щойно створений репозиторій
- **Натисніть** зелену кнопку "Code" і виберіть "Codespaces"
- **Виберіть** "Create codespace on main", щоб запустити середовище розробки
**Крок 3: Налаштування середовища**
Після завантаження Codespace ви отримаєте доступ до:
Кожен урок включає завдання для виконання, перевірку знань і виклик, щоб допомогти вам у вивченні таких тем:
- Запити і інженерія запитів
@ -114,7 +114,7 @@ CO_OP_TRANSLATOR_METADATA:
У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code**і виберіть **Open with Codespaces**. Це створить для вас новий Codespace для роботи.
آج، ہم ان حیرت انگیز ٹولز کو دریافت کرنے جا رہے ہیں جو جدید ویب ڈیولپمنٹ کو نہ صرف ممکن بناتے ہیں بلکہ واقعی دلچسپ بناتے ہیں۔ میں ان ایڈیٹرز، براؤزرز، اور ورک فلو کے بارے میں بات کر رہا ہوں جو نیٹ فلکس، اسپاٹیفائی، اور آپ کے پسندیدہ انڈی ایپ اسٹوڈیو کے ڈیولپرز ہر روز استعمال کرتے ہیں۔ اور یہاں وہ حصہ ہے جو آپ کو خوشی سے جھومنے پر مجبور کر دے گا: ان میں سے زیادہ تر پروفیشنل گریڈ، انڈسٹری اسٹینڈرڈ ٹولز مکمل طور پر مفت ہیں!
> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے
ہم یہ سفر ایک ساتھ کریں گے، ایک قدم بہ ایک قدم۔ کوئی جلدی نہیں، کوئی دباؤ نہیں – بس آپ، میں، اور کچھ واقعی زبردست ٹولز جو آپ کے نئے بہترین دوست بننے والے ہیں!
> اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -583,7 +583,7 @@ flowchart TD
✅ 'beginner-friendly' ریپوزٹریز تلاش کرنے کا ایک اچھا طریقہ [tag 'good-first-issue' کے ذریعے تلاش کرنا](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/) ہے۔
کوڈ کو کاپی کرنے کے کئی طریقے ہیں۔ ایک طریقہ یہ ہے کہ ریپوزٹری کے مواد کو "کلون" کریں، HTTPS، SSH، یا GitHub CLI (کمانڈ لائن انٹرفیس) کا استعمال کرتے ہوئے۔
> اسکیچ نوٹ از [ٹومومی ایمورا](https://twitter.com/girlie_mac)
```mermaid
@ -1014,12 +1014,12 @@ pie title "Common ARIA Usage Patterns"
**معلوماتی تصاویر** - اہم معلومات فراہم کرتی ہیں:
```html
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.ur.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/ur/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**سجاوٹی تصاویر** - صرف بصری ہیں اور کوئی معلوماتی قدر نہیں رکھتی:
localizeflow[bot]
1 week ago