CSS kodundaki hatalar nasıl anlaşılır?

Beroski dedi:

Sadece birkaç değişiklik yapılırsa kod daha okunaklı ve kolayca düzenlenebilir hale gelir, ama onlar da o kadar önemli değil.

Kod:Panoya kopyala

Örnek Değişiklik

.navbar div {
 display: inline-block;
 padding-top: 5px;
 padding-bottom: 5px;
 padding-left: 15px;
 padding-right: 15px;
 margin-right: 20px;
 transition: .5s;
}

Genişletmek için tıkla...

ErrorCorrection dedi:

Flex ile daha iyi olabilir mi site?
Yoksa bu hali daha mi iyi?

Genişletmek için tıkla...

Beroski dedi:

Kod:Panoya kopyala

Örnek Değişiklik

.navbar div {
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
  margin-right: 20px;
  transition: .5s;
}

Genişletmek için tıkla...

Fatalis dedi:

CSS'te sıkıntı yok gibi ama HTML yapısında ufak tefek hatalar var, gözüme çarpan ilk sıkıntı Türkçe kullanıyor oluşunuz, Türkçe kullanmamaya özen gösterin. Bir de ürün detayları için ul li yapısını kullanmışsınız ancak navbar için kullanmamışsınız. Navbarı da ul li ile yapmanızı tavsiye ederim. Son olarak <img> etiketinde alt attribute'u yok, SEO'yu olumsuz şekilde etkiler, resimlerde içi boş da olsa alt attribute'u olmalı.

Genişletmek için tıkla...

ErrorCorrection dedi:

Ul li lipısına navbara nasıl dönüştürürüm aklımda bir taslağını oluşturamadım. Çizim ile gösterirseniz belki daha iyi olur hocam.

Genişletmek için tıkla...

serhatcandev dedi:

Böyle tek tek yazacağınıza tek satırda halledebilirsiniz.

padding: 5px 15px; // 2 Tane değer verirsek ilk değer yukarı ve aşağı, ikinci değer ise sağ ve sola yarar. 3 veya 4 değer de verebiliriz. Mantık ise saat yönünde. 4 değer verirseniz değerler üst,sağ,alt ve sol diye ayrılır. 3 değer de ise yukarı, sağ ve sol, sol olarak verir.

Genişletmek için tıkla...

serhatcandev dedi:

Çok basit aslında zor gibi gözüküyor ama.

Header açın. İçine ul ekleyin. İçine iseli ile itemleri verin Home, About gibi.

Header'ın Width'i 100% olacak.
Ul ise display ile Flex ve justify-content'i keyfinize göre.

Genişletmek için tıkla...

Beroski dedi:

CSS kodlarında kullanılan tekrarlayan özellikleri gruplandırarak kısaltabiliriz, ancak şu anlık için gerekli mi

Genişletmek için tıkla...

ErrorCorrection dedi:

Taslak gözümde canlandı ama biraz çirkin durdu. Onun yerine özellikler, yorumlar gibi etiketler içeren navbar daha mantıklı. Onun içnde de işte özellikler diğerini seçince de yorumlar daha manıktlı olur ama daha o kadar öğrenmedim maalesef

Genişletmek için tıkla...

GitHub - serhatcandev/udemy.com-clone: Udemy.com clone with HTML and CSS.

Udemy.com clone with HTML and CSS. Contribute to serhatcandev/udemy.com-clone development by creating an account on GitHub.

github.com

serhatcandev dedi:

Neden olmasın? En başta öğrensin ve eli alışsın bence.

Yavaş yavaş öğrenirsiniz. Size önerim böyle küçük site yaptıysanız bir kaç tane büyük şeylere atlamanızı öneririm. 3 gün 4 gün sürsün ama büyük bir proje yapın. Hem profilinizde iyi gözükür hem de bu tarz büyük projeler çok daha fazla geliştirir. Nereden başlayacağınızı bilmiyorsanız benim yaptığım Udemy sitesine bakabilirsiniz. (Mobil için yapmadım)

GitHub - serhatcandev/udemy.com-clone: Udemy.com clone with HTML and CSS.

Udemy.com clone with HTML and CSS. Contribute to serhatcandev/udemy.com-clone development by creating an account on GitHub.

github.com

Genişletmek için tıkla...