48

أول موقع لي بعد تعلمي تطوير الويب ( HTML /CSS ) في 10 أيام!

مرحبا مجددا , سعيد بكتابة هذا الموضوع بعد الموضوع السابق الذي استفسرت في حول لغات تطوير الويب و غيرها من الإستفسارات . حيث كان هناك تفاعل كبير من الإخوة الكرام واستفدت كثيرا , خصوصا من الأخ " تيمور عبد العزيز " , أشكره مرة أخرى من هذا المنبر .

الموضوع السابق :

عند كتابتي للموضوع السابق كنت حينها بدأت في تعلم HTML في ذلك اليوم , بعدها تعلمت CSS والآن أكتب هنا وقد مرت 10 أيام , من البحث و التعلم , والحمد لله كانت النتيجة مفرحة بالنسبة إلي , رغم أنني كنت متسرعا في التعلم , خصصت كل الوقت 24 /24 ( إن صح التعبير ) .

في صباح هذا اليوم , قمت بتصميم أول موقع لي ,عبارة عن موقع تعريفي بمنتوج أو تطبيق ما , لم أحدد فكرة أو موضوع الموقع , استغرق التصميم حوالي 3 ساعات , والتكويد إلى حدود كتابة هذا الموضع , 

لم أكود الموقع المصمم ككل فقط الهيدر و أحد التصنيفات و الفوتر . 

رابط المعاينة :

http://goo.gl/ih0AY2

ملحوظة : ما زلت أعمل على إنهاء الموقع و إضافة تأثير parallax وبعض الـ animations و جعله متجاوبا.

تم بناء الموقع عن طريق :

*HTML

*CSS

*Bootstrap ( استعملت فقط لـ GRID و container )

*ionicons

*spinkit ( شاشة الإنتظار)

تحديث 1 : تم إضافة Color-switcher .

في انتظار ارائكم حول التصميم و التكويد , ..

أخوكم : محمد ياسين حمداوي .


9
تيمور عبد العزيز أضف ردا

نتيجة ممتازة ومبهرة لـ 10 أيام فقط من التعلم قمت خلالها بكتابة أكواد HTML/CSS وإستخدام أدوات مثل Bootstrap و Animate.css و GoogleFonts و FontIcons .. أحييك بشدة وأتمنى أن تستمر على نفس هذا النسق وصدقني ستجد نفسك محترف خلال 6 أشهر على أقصى تقدير.

لدي ملاحظات صغيرة أتمنى أن تأخذها بعين الإعتبار وهيا :

1- ذكرت بأنك أستعملت فقط ال Container و ال Grid من فريمورك Bootstrap ولكنك في ملف CSS المستخدم قمت بتحميل المكتبة بكامل أكوادها وهذا يعتبر تحميل زائد لكثير من الأكواد التي لم تستخدمها في الموقع. لذلك أنصحك بزيارة رابط تخصيص مكتبة Bootstrap وإختيار الأشياء التي ترغب في إستخدامها فقط منها وترك الباقي حتى تحصل على ملف حجمه أصغر ويحتوي فقط على الاكواد التي ترغب في أستخدامها في الموقع.

2- أذا قررت بالفعل الإعتماد على فريمورك Bootstrap في إنجاز مشاريعك فأنا أنصحك أن تأخذ وقتك في دراسته ومعرفة كل الأكواد والستايلات المرفقة معه وكيفية تعديلها بإستخدام تقنية LESS وتتعلم كيفية دمجها مع بعضها للحصول على النتائج المرغوبة حتى لاتضطر لكتابة أكواد هيا موجودة أساساً في Bootstrap كا أكواد توسيط النصوص والمحاذاة لليمين واليسار وأكواد الإستجابة للصور والفيديوات وغيرها الكثير.

تحياتي وبالتوفيق

1
hamdaouigeek أضف ردا

سعيد بوجودك أخي في هذا الموضوع . وشكرا على تقييمك للموقع . وإنشاء الله سأعمل بالنصائح التي ذكرتها , خصوصا تخصيص Bootstrap , فلم أكن أعلم دور customize إلى هذه اللحظة .

وبخصوص تقنية LESS أو SASS فسأبحث عنها في الأيام القادمة , فحاليا أحاول فهم JAVASCRIPT و jQuiry . فقد استعملت في هذا الموقع أحد أكواد jQuiry في "loader" . لكن لم أفهم كيفية عمله صراحة :-) ,

تحياتي لك .