تعلم HTML من الصفر للإحتراف: تهيئة بيئة العمل وأدوات تساعدنا على كتابة الكود

OctuCode www.youtube.com

ملخص موجز

يقدم الفيديو شرحًا لكيفية تخصيص محرر الأكواد VS Code لجعله أكثر ملاءمة للمطورين. يغطي الفيديو تغيير شكل المحرر، وتثبيت إضافات لتحسين الألوان والأيقونات، وإعداد الحفظ التلقائي، وتنسيق الكود تلقائيًا.

  • تخصيص شكل محرر الأكواد VS Code.
  • تثبيت إضافات لتحسين الألوان والأيقونات.
  • إعداد الحفظ التلقائي.
  • تنسيق الكود تلقائيًا.

مقدمة وتخصيص محرر الأكواد VS Code

في بداية الفيديو، يذكر أن الحلقة السابقة تناولت إنشاء أول ملف HTML باسم index.html، ويوضح كيفية إظهار امتداد الملف إذا لم يكن ظاهرًا. ثم ينتقل إلى تخصيص محرر الأكواد VS Code، مشيرًا إلى أنه سيقوم ببعض التعديلات ليصبح أكثر ملاءمة. يبدأ بتغيير شكل المحرر، مثل نقل الشريط الجانبي إلى اليمين وإخفاء شريط القوائم، ويمكن الوصول إلى هذه الخيارات من خلال قائمة "Customize Layout".

تغيير الألوان والأيقونات في VS Code

يشرح الفيديو كيفية تغيير نظام الألوان في VS Code عن طريق الذهاب إلى الإعدادات واختيار "Color Theme". يوضح أنه يمكن تنزيل إضافات لتوفير المزيد من أنظمة الألوان، مثل إضافة "Nictus". بالإضافة إلى ذلك، يشرح كيفية تغيير أيقونات الملفات والمجلدات باستخدام إضافة "Material Icon Theme" وإضافة "Material Product Icons" لتغيير أيقونات VS Code نفسها.

الحفظ التلقائي وتنسيق الكود

يوضح الفيديو كيفية تفعيل الحفظ التلقائي للملفات في VS Code عن طريق الذهاب إلى قائمة "File" وتفعيل خيار "Auto Save". ثم يشرح كيفية تنسيق الكود تلقائيًا باستخدام إضافة "Prettier". بعد تثبيت الإضافة، يمكن تنسيق الكود يدويًا عن طريق النقر بزر الماوس الأيمن واختيار "Format Document With"، أو يمكن تفعيل التنسيق التلقائي عند الحفظ عن طريق الذهاب إلى الإعدادات والبحث عن "Format On Save" وتفعيله.

الاستعداد للعمل على VS Code

في ختام الفيديو، يؤكد على أن VS Code أصبح الآن جاهزًا للعمل عليه خلال الكورس، ويشجع المشاهدين على تجهيز محرر الأكواد الخاص بهم.

Summarize any YouTube video in seconds

Get summaries like this one for any video, in your language, with the free Summ app.

Download on the Apple Store
Get it on Google Play

Transcript

YouTube Transcript Generator

0:10 اهلا بيك في حلقه جديده من كورس تعلم اتش تي ام ال من الصفر على اوكتو كود الحلقه اللي فاتت انشانا اول فايل خاص بالاتش تي ام ال اللي كان اسمه اندكس دوت اش تي ام ال ولو مش ظاهر معاك دوت اش تي ام ال اللي هو الاكستنشن بكل بساطه هتروح لفيو ومنها هتروح لشو وتعمل شيك او علامه صح على فايل نيم اكستنشن وكده هو ظاهر اندكس دوت اش تي ام ال اللي هو الاكستنشن الخاص بالفايل تاني حاجه اتعاملنا معاها وهي الفي اس كود الفي اس كود اول ما هتفتحه هيكون ظاهر معاك بالشكل ده وانا صراحه مش بفضل اتعامل مع الفي اس كود بالشكل ده فتعالوا نعمل حبه كاستمايز شن او تعديل على الفي اس كود اول حاجه بنفضل ان احنا نعدلها هي شكل

0:56 الفي اس كود او اللاي اوت بتاعه فمثلا انا عندي السايد بار ظاهر هنا على الشمال فانا ممكن مثلا اخليه على اليمين منيو بار ديت ممكن ان انا اخفيها او اشيلها وهكذا على حسب ارتياحك وعلى حسب اعتيادك انت طيب اعدل الكلام ده منين هطلع فوق خالص على اليمين هلاقي في حاجه اسمها كاستمايز لاي اوت وهنا اقدر انقل اي بار في اي حته يعني مثلا هنا المنيو بار انا اقدر اخفيه او اقدر اظهره الاكتيفيتي بار اقدر اخفيه او اقدر اظهره بالطريقه اللي انا عايزها طيب اقدر ازاي انقل السايد بار ده بكل بساطه هنيجي نت اهوت عند سايد بار بوزيشن بدل ما هو ليفت اخليه رايت مثلا وده اللاي اوت اللي انا بحبسه تاني حاجه احنا اكيد مش حابين لون الجراي اللي ظاهر قدامنا فبكل

1:41 بساطه احنا ممكن نختار الكر يم المناسب لينا فانا ممكن اجي تحت من السيتنج او المانج واروح للسيم ومنها اختار الكر سيم هلاقي هنا كر سيمز كتير مختلفه فانا مثلا لو ما حبتش السيمز الموجوده باي ديفولت في الفي اس كود فانا ممكن انزل اكستنشن يزود لي السيم كرز ز فمثلا ممكن نضيف اكستنشن اسمه نكتس هو مثلا اول واحد ده ويتاكد ان الناشر هنا هو نفس الاسم ده وهنعمل له هنا انستول لما هنعمل له انستول هو هيظهر لنا حبه سيمز جديده السيمز ديت ما كانتش موجوده باي ديفولت في الفي اس كود فانت ممكن تختار الكر سيم المحبس ليك وتتعامل معاه بعد كده انا بالنسبه لي الكر سيم ده مناسب ل جدا فانا هتعامل معاه على طول بعد

2:27 كده تاني حاجه احنا ممكن نزود كده ت شات للفي اس كود زي مثلا ان احنا نغير الايكونز ديت او نغير الايكونز بتاع الفولدر نفسها اللي بتظهر لنا يعني مثلا نفتح الفولدر اللي اسمه اتش تي ام ال اللي احنا عملنا له كرييت المره اللي فاتت فهتلاقي مثلا هنا الايكون بتاعه الفايل معموله علامه التاج كده فانا ممكن اضيف لمسه كده باكستنشن تخليلي الايكون ديت شكلها الايكون بتاعه الاتش تي ام ال وبكل بساطه برضو هضيف اكستنشن خاص بيه طيب طيب ايه هو الاكستنشن ده الاكستنشن ده اسمه ماتيريال ايكون ماتيريال ايكون دوت اقدر ان انا اعمل لله انستول لما اعمل لله انستول دلوقتي انا اخترته خلاص هروح للايكون هنا او اروح للفايل بتاعتي هلاقي

3:13 ان الايكون بتاعتي بقت شكلها الطف من الاول طيب ممكن برضو نغير الايكونز بتاع الفي اس كود نفسه وبرضو عن طريق اكستنشن فانا ممكن بدل ماتيريال ايكون ديت هقوله ماتيريال برودكت ماتيريال برودكت ديت لما اعملها انستول هيبدا يغير لي شكل الايكونز دي خليها لي شكلها الطف شويه فانا دلوقتي بقى عندي الايكونز الخاصه بالفايل اتعدلت بقت شكلها كويس والايك نز كمان بتاعه الفي اس كود بقت شكلها الف طيب تعالوا بقى ندخل على الفايل بتاعنا فمثلا ده اللي احنا كتبناه المره اللي فاتت في الفايل بتاعنا فانا مثلا لو جيت ضفت لاين كمان بالطريقه ديت فلاقي ان فوق هنا بقى في علامه زي علامه الدوت كده العلامه ديت بتقول لي ايه بتقول لي ان في تعديل حصل في الفا فايل ده

4:00 بس لسه ما تعملوش سيف طيب اعمل له سيف ازاي بكل بساطه ممكن اروح لفايل هنا ومن فايل ادوس على سيف او ادوس اختصار او شورت كات عن طريق كنترول اس فانا لو دوست سيف دلوقتي هلاقي الايكون اللي فوق ديت راحت طيب انا مثلا لو مسحت ده عملت تعديل كده فلاقي الايكون ديت رجعت تاني فانا ممكن ادوس كنترول اس فاعمل سيف للفايل ده طيب وانا كل مره هعمل فيها تعديل اقعد ادوس كنترول اس او انسى او اي حاجه من الكلام ده لا بكل بساطه ممكن نروح لفايل از هنا ومن فايل نعلم او نعمل علامه التشيك على اوتو سيف فانا دلوقتي اي حاجه هاخدها كوبي بيست يعني مثلا لو اخدنا العنوان ده كوبي ورحنا هنا دوسنا بيست هلاقي ان الكلام ده اتعمل له سيف من غير اي حاجه طيب لو جينا

4:48 بقى اتكلمنا عن شكل بتاع الكود انا شكل الكود دلوقتي منسق ومنظم طيب لو انا مثلا رحت عامل الشكل ده كده ورحت عامل هنا كده مثلا سبيسز او تاب بالشكل ده وبقى شكل التاج عامل كده هو انا بقى كل مره هقعد مثلا لو الكود بتاعي بعظ بالشكل ده هقعد ارجع واحد واحد كده واحده واحده واظبط الكود بتاعي لا ممكن اضيف اكستنشن برض يظبطلي الكلام ده طيب الاكستنشن ده اسمه ايه اسمه بريتير بريتير وبرضو نتاكد ان البلشر بتاعه او الناشر بتاعه اسمه بريتير برض وادوس هنا انستول كده دلوقتي هو تعمل لله انستول لو رجعنا للفايل بتاعنا مثلا وجيت بوظنا الكلام دوت بالشكل ده وبكل بساطه انا ممكن ادوس هنا رايت كليك او كليك يمين في الماوس وهنا هقوله فورمات

5:36 الدوكمنت دوت يعني اعاده تنظيمه عن طريق بريتير فانا هلاقي هنا بريتير ا بقت ظاهره فوق لما اكليك عليها هلاقي الكود بتاعي اتعمل لله فورماتين بالاستاند الموجوده في بريتير طيب لو انا عايز بمجرد ان انا ادوس كنترول اس الاقي كل التعديلات دي حصلت يعني مثلا انا هنا عايز ادوس كنترول اس الاقي الكلام ده حصل كده الاقي التعديلات دي حصلت بكل بساطه هروح لل سيتنج فانا روح هنا لعلامه الترس ديت اللي فيها كلمه مانج ومنها هروح للسن وهنا هدور على كلمه فورمات هكتب كده كلمه فورمات بالطريقه دي فهي ازهر لي هنا اكتر من اوبشن فورمات اون بيست وده لو انا واخد كود كوبي بيست فورمات اون سيف ده بعد ما اخلص الكود

6:22 بتاعي واعمل سيف للفايل فورمات اون تايب وده وانا بكتب الكود هيتعمل فورمات للكود ده انا صراحه بحب الفورمات اون سيف فانت هتلاقي ديت مش معمول لها تشيك بالطريقه ديت فانت هتعمل لها اشيك فدلوقتي بمجرد ان انا هنا يعني مثلا لو الكود بتاعي بايظ بالطريقه ديت مثلا الشكل بتاعه بايظ يعني فانا هدوس هنا فايل واعمل سيف هلاقي ايه الفورمات ان بتاعي حصل من غير ما اقعد ادوس كليك يمين ومنها ادوس فورمات وز والكلام ده لا خلاص كده بمجرد مثلا لو حصل هنا اي تشوه للكود بتاعي او يعني للشكل بتاعه التنسيق بتاعه اقدر ادوس كنترول اس بمجرد ان انا ادوس كنترول اس الكود بتاعي بقى منصب كده انت دلوقتي الفي اس كود

7:07 بقينا جاهزين ان احنا نشتغل عليه خلال الكورس بتاعنا فجهز انت كمان الفي اس كود واشوفك الحلقه الجايه ان شاء الله شكرا للمشاهده والسلام عليكم ورحمه الله وبركاته

Share

YouTube Video Summaries