Pizza Sipariş Formu - Tasarımdan Koda I

Bu proje, Workintech Full Stack Web Geliştirme eğitimindeki S8 sunuma hazırlık olarak, HTML ve CSS becerilerini geliştirmeniz için tasarlanmıştır. Bu projede, sadece HTML ve CSS kullanarak verilen tasarımı aynen uygulamanız beklenmektedir. Figma tasarım dosyasını referans alarak, sayfanızın görsel yapısını oluşturun.

Amaç:

• Verilen Figma tasarımına birebir uyan, mobil ve desktop uyumlu statik bir HTML yapısı oluşturmak.
• CSS kullanarak formu ve sayfayı şekillendirmek.
• JavaScript kullanmadan temel bir form yapısı oluşturmak.

Gereksinimler:

• Visual Studio Code
• Node.js ve npm (Node Package Manager) bilgisayarınızda kurulu olmalıdır. Eğer kurulu değilse, Node.js resmi web sitesinden LTS versiyonunu indirebilirsiniz.

Başlangıç:

1. Create Repo From Template & Clone:

   • Sağ üstteki yeşil "Use this template" butonu ile, bir kopya oluşturun. işlemi tamamlandıktan sonra, kendi GitHub hesabınızda yer alan depo bağlantısını kopyalayın.
   • VS Code'u açın ve terminali başlatın. Aşağıdaki komutu kullanarak depoyu bilgisayarınıza klonlayın:

     git clone <Yeni-Repo-URL'niz>

   • Örnek:

     git clone https://github.com/sizin-hesabiniz/fsweb-s5-bonus-challenge-html-pizza

2. VS Code'da Geliştirmeye Başlamak:

   • VS Code'u açın ve File -> Open Folder seçeneğiyle projeyi açın.

• Terminalde aşağıdaki komutları sırasıyla çalıştırarak proje bağımlılıklarını yükleyin ve projeyi başlatın:

  npm install
  npm run dev

3. Geliştirmeye Başlayın 🤓 👩‍💻 🧑‍💻

Proje Yapısı

• index.html: Ana HTML dosyanız.
• style.css: Tüm stillerinizin bulunduğu CSS dosyası.
• assets/: Projede kullanacağınız tüm resim ve diğer statik dosyalar sizin için önden dışarı aktarıldı.
• index.html dosyasını düzenleyerek HTML yapısını oluşturun.
• Figma tasarımını (S6 Pizza v2.1 Mobil)
• referans alarak CSS (style.css) ile sayfayı ve formu şekillendirin.

Renk Kodları

1. Sarı #FDC913
2. Açık Gri: #5F5F5F
3. Koyu Gri #292929
4. Kırmızı #CE2829
5. Bej: #FAF7F2

Tasarımda Kullanılan Fontlar

Logo proje klasöründe SVG olarak yüklü

• Roboto Condensed
• Barlow
• Quattrocento
• Satisfy

Önemli Notlar:

• Bu projede JavaScript kullanmayacaksınız. Form işlevsel olmayacak, sadece statik olarak geliştirilecek.
• Figma tasarımına sadık kalarak mobil ve masaüstü ekranlarda, düzgün dengeli bir görünüm sağlamayı hedefleyin.
• HTML yapınızın anlamsal (semantic) olmasına özen gösterin.
• CSS'te class isimlendirmesi ve kod düzenine dikkat edin.

Kaynaklar:

• Figma Tasarımı: (S6 Pizza v2.1 Mobil)
• CSS içerisinde değişken tanımlayıp, yeniden kullanabilmek: CSS Custom Properties

Sorularınız mı Var?

Eğer herhangi bir sorunla karşılaşırsanız, lütfen eğitmeninize başvurun.

İyi eğlenceler ve kodlamalar! 🍕