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 .

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

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

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

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

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


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

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

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

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

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

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

تحياتي لك .

مجهول
  • حذف بواسطة المستخدم

مرحبا أخي , وشكرا على تقييمك للموقع , نعم بالتأكيد فمعرفتي بـ HTML /CSS لم تتعدى الـ 10 أيام , و تكويد القالب تم دون الإعتماد على أي مصدر خارجي . كل الأكودا من كتابتي , فقد أخد مني وقتا طويلا , اليوم كله نظرا لتجربتي القصيرة بـ HTML / CSS . فقط أحد أكواد jQuiry التي قمت بنسخها من أجل توقيف LOADER عندما ينتهي عرض الصفحة , نظرا لأنني لم أتعلم JS بعد .

تحياتي لك , ربما أضعه في معرض أعمالي ريثما أكمله :-)

مبارك لك اخي

هل انت من مدينة بركان

شكرا ،نعم أخي ، من بركان :-)

انا ايضا ، متشرف بمعرفتك

تبارك الله على ناس بركان

أنا من وجدة

الله يبارك في أخي , وفي ناس وجدة , تحية لكم :-)

ممتاز ياأصحاب الريف واصل

شكرا لك أخي .

انجاز رائع بالنسبة لشخص متعلم حديثا ، ارجو ان تكون قدوة لكل من يريد التعلم .

شكرا على ثنائك , تحياتي

السلام عليكم ورحمة الله وبركاته

مرحبًا أخ محمد، عمل جيد، تمنياتي لك بالتوفيق

شكرا على تقييمك , تحياتي.

شكرا لك أخي , كلمة " مبهر " تحمل كل المعاني :-)

نصيحة : انسى بوت ستراب ...

وابدا من هنا

شكرا على النصيحة , لكن أخي , أنا لم أستعمل Bootstrap , إستعملت فقط GRID و Container . وحاليا لا أود استعمال أي framework . لأنني أرى أن framework تحد من الإبداع إن صح التعبير و تجعلك مقيدا في بعض الأحيان , ربما عندما احترف المجال أكثر سأعتمد على framework لتسريع العمل لا غير . شكرا لك .

كلامك غير دقيق .

الابداع ليس ان تعيد اختراع العجلة (الا) في حال كنت تريد ان تتعلم ...

أنا قلت "إن صح التعبير " لم أجد كلمة مناسبة , ما قصدته أنني لم أستعمل Bootstrap فقط GRID و container .

شكرا على كل حال .

صديقي انا تقريبا تعلمت اساسيات html و css فبماذا تنصحني الان حتى اصمم مثل هذا القالب

تابع دورات إنشاء مواقع بهاتين اللغتين , بالتوفيق .

يعني في 10 ايام تعلمت html و css و bootstrap و كيف تركب اضافات ؟؟؟؟

هل انت مبرمج سابق ؟ هل كنت تجيد لغات اخرى من قبل ؟ ام اول مرة تعرف معنى كلمة برمجة ؟

أول مرة أبرمج وفي 10 أيام تعلمت تلك الأمور , لكن بالطبع لست مبتدأ في التعامل مع الإستضافات و تركيب السكريبتات ! لكن دون أي خبرة برمجية إلخ . وخصوصا سكريبت الووردبرس ( أزيد من 3 سنوات دون خبرة في تطوير الويب بالطبع ) .

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

شكرا على ملاحظتك .

أخي محمد حقيقة عمل مميز جداً وفي وقت قياسي

من امثالك يدفعون الناس من بعد السقوط في دائرة

اليأس، لذ عليك ان تستمر

شكرا على ردك أخي الكريم , وبالتوفيق لك .

للجميع ان شاء الله :)

جميل اخوي حلو مرا بس مشكلتك بتنسيق الالوان ^^

تجربة يوجد بها الكثير من الالهام والتحدي,اشكرك من اعماق قلبي

شكرا على تفاعلك مع الموضوع , وبالتوفيق لك .

لماذا وضعت شاشة انتظار

لأن الموقع سيستغرق وقتا في التحميل و لأ أريد أن ينفر الزائر من الإنتظار ( قد يبدوا لك حاليا سريعا , ولكنني لم أنتهي بعد منه ... ) .

اعتقد التصميم بسيط وخفيف لايحتاج شاشة انتظار

استخدمت في footer خاصية z-index .. ؟

كما ذكرت في ألأعلى فالموقع سيحتوي على تصنيفات عديدة و سأستعمل تأثير PARALLAX فالبتأكيد سيكون تحميله يأخد وقتا مهما .

بالنسبة لـخاصية z-index , صراحة لم ألحظها . كنت قد كتبتها ونسيت حذفها ,فليس لها أي دور في footer .

ماهي الدورات التي أتبعتها أخي

مرحبا أخي , في الأول دخلت إلى دورة مجانية على udemy 

/*---

--*/ كما توجد العديد من الدورات المجانية . لم أكمل تلك الدورة صراحة , فاتجهت إلى موقع

, وجدته موقعا رائعا لأنه يتيح محرر يمكنك تجربة الأكواد مباشرة من المتصفح .

التطبيق ثم التطبيق , .. فيوميا كنت أزور موقع themeforest و أحاول تقليد المواقع الموجودة عليه وبالطبع كمبتدأ فقد كانت navbar وحدها تأخد من ساعات , وأحاول البحث فقط عن أحدث التقنيات , وخصوصا أنني مصمم جرافيك , فلا أميل إلأى تلك الدورات التي تكود مواقع ذات تصاميم رديئة أو قديمة ........ لكني مع البحث المتواصل ... وعدم الكلل و الملل , وصلت إلى هذه النتيجة في 10 أيام فقط من التعلم .

و أخيرا حتى الكتب تلعب دورا مهما !.

a0m0rajab أضف ردا

و أخيرا حتى الكتب تلعب دورا مهما !

هل يمكن السؤال عن الكتب التي استفدت منها ؟ في هذه التجربة :]

تابع عملك فتجربتك ملهمة و تستحق المشاركة :]

و ان صح اضافة عبارة :

ما هي الطريقة التي اتبعتها او المنهجية ؟

صراحة الكتب لم أعتمد عليها كثيرا , لكنها مفيدة نوعا ما , كتابين هما :

CSS3 FOR WEB DESIGNERS

HTML5 FOR WEB DESIGNERS

المنهجية : تعلم الأساسيات جيدا , ومحاولة محاكات بعض المواقع ....

كيفية جعل ديكور اولي عن الدخول الي الموقع ماهي الطريقة المستعملة في ذالك اسمها وشكرا

رابط الطريقة

لماذا هذا الرابط ؟ لقد أعطيتك الإسم .

بس سؤال كيف يتم تكويد الموقع بلغة html و css

السؤال غريب صراحة , ! !

اعتقد هو يقصد تحويل سكربت PHP مثلا الى تصميم باستخدام CSS

كلا هو كان يقصد ال psd ,

نعم أعرف أنه يقصد PSD لكن , السؤال الذي طرحه يتضمن الجواب في نفس الوقت :-) .

اقصد كيف تتم عملية التكويد

التكويد يتم عن طريق لغة html و css يعني تكون فاتح الفوتشوب و محرر الاكواد و تبدأ في تكويد الموقع بحيت تلعب html دور الهيكل مثل اعمدة المنزل و css تلعب دور التنسيق اي مثل دهان البيت و تزيينه بالبلاط و اي ملاحضة نحن هنا

شخصيا اكود من خلال Inspect الخاص بمتصفح FF و للآن لم اقم بتحويل ملف PSD الى قالب كل قوالبي اكتبها عبر Notepad++ بدون تصميم مسبق .

ما شاء الله نتيجه ممتازه اخي .. سؤال اخي هل Color-switcher انت اللي عاملها ؟ ولا بلجن خارجي ؟

بلجن خارجي , مع بعض التعديلات .

ممتاز في الحقيقة مزيداً من التقدم اخي