بناء موقع من الصفر

abdallahmiri · 11 نوفمبر 2019، 4:39م

بعض النصائح وتصحيح الاخطاء @Alhakem


        <!------------------>
        <!-- Start Header -->
        <!------------------>
        <header class="main-header">
            <section class="flex-container">
            <nav class="main-navigation">
                <ul>
                    <li><a href="#training">التمارين</a></li>
                    <li><a href="#n">التغذية</a></li>
                    <li><a href="#s">المكملات</a></li>
                    <li><a href="#p">البرامج</a></li>
                </ul>
            </nav>
            <div id="logo">
                <h1>GyM MIRI</h1>
            </div>
            </section>
            <div class="div-false"></div>
            <section class="service">
                <article class="flex-service">
                    <h2 class="styile-h2">البرامج المخصصة</h2>
                    <p class="styile-p">تتيح هذه الخدمة بناء خطة بناء على احتياجك</p>
                    <button type="submit" id="submit">المزيد</button>
                </article>
            </section>
        </header>
        <!-- End Header -->

/*****************/
/* Stert Header */
/***************/
.main-header {
    padding: 15px 0;
    background-color: #999999;
    height: 750px;
    background-image: url('/images/720310.jpg');
    background-size: cover;
}
.main-header .flex-container {
    display: flex;
    justify-content: space-between;
}
.main-header .main-navigation {
    margin-right: 12px;
}
.main-header .main-navigation  ul {
    list-style: none;
}
.main-header .main-navigation > ul li {
    display: inline-block;
}
.main-header .main-navigation > ul a:link {
    padding: 0 18px;
    font-size: 25px;
    color: #f2f2f2;
    text-decoration: none;
    display: inline-block;
    transition: .1s;
}
.main-header .main-navigation > ul  a:hover {
    color: #ffab40;
}
.main-header #logo {
    color: #f2f2f2;
    width: 150px;
}
.main-header .div-false {
    margin: 125px;
}
.main-header .service {
    text-align: center;
    color: #f2f2f2ff;
    display: flex;
    justify-content: flex-end;
    padding-left: 10px;
}
.main-header .service .flex-service {width:560px;}
.main-header .service .styile-h2 {
    line-height: 130px;
    font-size: 90px;
    color: #ffab40;
    /* background-color: #f2f2f296; */
}
.main-header .service .styile-p {
    font-size: 20px;
    line-height: 10px;
    /* background-color: rgb(241, 147, 38); */
    border-radius: 5px 5px 88px 88px;
    padding: 5px;
}
.main-header .service #submit {
    margin: 10px 0;
    border: none;
    font-size: 20px;
    color: #fff;
    padding: 14px 28px; 
    border-radius: 2px; 
    cursor: pointer;
    background-color: #ffab40;
}
.main-header .service #submit:hover {background: #e68a00;}
/* End Header */

L.Da · 18 نوفمبر 2019، 7:14م

السلام عليكم أخي، عمل جميل ماشاء الله

أعطيك بعض الاقتراحات لتحسين موقعك في انتظار ملاحظات الأستاذ محمد.

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

روابط الشريط
لاحظ هنا بالنسبة للروابط الموجودة في الـ Navbar، عند الضغط عليها يتغير لونها الى اللون الافتراضي Link visited الذي أجده غير مناسب من حيث التباين مع الخلفية

أقترح عليك أن تستبدل a:link بـ a بهذا الشكل:

.main-header .main-navigation > ul a {
    padding: 0 18px;
    font-size: 25px;
    color: #f2f2f2;
    text-decoration: none;
    display: inline-block;
    transition: .1s;
}

بالنسبة للـ Accessibility
لاحظ معي في هذه الصورة كيف ظهر أن اللون الذي إخترته في خلفية الزر مع لون الكتابة لا يتوافقان من حيث التباين

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

بما أنك إستعملت خلفية تغطي الصفحة كاملة أقترح عليك تغيير قيم الـ margin والـ padding الافتراضية للـ body الى 0

body {
    margin: 0;
    padding: 0;
}

بالنسبة للـ Code quality
بالنسبة لقواعد الـ css من الأحسن جعل خط فارغ بين كل selector

.main-header {
    padding: 15px 0;
    background-color: #999999;
    height: 750px;
    background-image: url('images/720310.jpg');
    background-size: cover;
}

.main-header .flex-container {
    display: flex;
    justify-content: space-between;
}

بدلا من

.main-header {
    padding: 15px 0;
    background-color: #999999;
    height: 750px;
    background-image: url('images/720310.jpg');
    background-size: cover;
}
.main-header .flex-container {
    display: flex;
    justify-content: space-between;
}

حاول أن تسير بعقلية الـ DRY يعني (Don’t repeat your self) فمثلا بالنسبة لقيمة اللون #999999 يمكنك فقط كتابة #999

هناك مسافتين فارغتين يحبذ أن تحذف واحدة

.main-header .main-navigation > ul  a:hover {
    color: #ffab40;
}

بالنسبة لهذه القطعة طريقة كتابتك لها مختلفة عن باقي القواعد الأخرى

.main-header .service .flex-service {width:560px;}
..........
.main-header .service #submit:hover {background: #e68a00;}

ففي هذه الحالة عليك ان تتبع style واحد

نحن نعلم أن الـ ID في الـ HTML يستعمل مرة واحدة في الصفحة، لا أجد أي فائدة من استهدافه من خلال الكلاس

.main-header .service #submit {
    margin: 10px 0;
    border: none;
    font-size: 20px;
    color: #fff;
    padding: 14px 28px; 
    border-radius: 2px; 
    cursor: pointer;
    background-color: #ffab40;
}

فقط قم باستهدافه مباشرة

#submit {
    margin: 10px 0;
    border: none;
    font-size: 20px;
    color: #fff;
    padding: 14px 28px; 
    border-radius: 2px; 
    cursor: pointer;
    background-color: #ffab40;
}

لا أرى أي فائدة من border-radius في كلاس styile-p مدام لا يوجد حدود وخلفية شفافة لذلك قم بازالته
بالنسبة للـ HTML
لا أرى أي داع لاستعمال section إذا لا يحتوى على وسم (h1=>h6)، انصحك باستبداله إلى div عادي
حاول تفقد الـ indentations مثل

       <section class="flex-container">
        <nav class="main-navigation">
            <ul>
                <li><a href="#training">التمارين</a></li>
                <li><a href="#n">التغذية</a></li>
                <li><a href="#s">المكملات</a></li>
                <li><a href="#p">البرامج</a></li>
            </ul>
        </nav>
        <div id="logo">
            <h1>GyM MIRI</h1>
        </div>
        </section>

ليكون على هذا النحو

    <section class="flex-container">
        <nav class="main-navigation">
            <ul>
                <li><a href="#training">التمارين</a></li>
                <li><a href="#n">التغذية</a></li>
                <li><a href="#s">المكملات</a></li>
                <li><a href="#p">البرامج</a></li>
            </ul>
        </nav>
        <div id="logo">
            <h1>GyM MIRI</h1>
        </div>
   </section>

وهناك ملاحظات أخرى سأترك الاستاذ محمد يكملها عني.

Alhakem · 11 نوفمبر 2019، 11:57ص

عمل جميل ي عبدالله

لا ازيد على ملاحظات @L.Da فقد كفت ووفت فشكراً لارا

واعتقد بأنك لم تضع الأكواد كاملة حيث واضح بالسكرين شوت بأنك تستخدم خطوط قوقل وكذلك بأنك عامل reset لهوامش الـ body وما خلافة.

abdallahmiri · 11 نوفمبر 2019، 4:37م

شكرا @L.Da @Alhakem بعدل ونرجع تانى

abdallahmiri · 12 نوفمبر 2019، 4:49م

<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="UTF-8">
		<meta name="kyeword" content="sport,fitness,bodybuilding">
		<title>GYM MIRI</title>
		<link rel="stylesheet" href="css/style.css">
		<link href="https://fonts.googleapis.com/css?family=Almarai&display=swap" rel="stylesheet">
        <script src="java%2520script/main.js"></script>
	</head>
	<body>
        <!------------------>
        <!-- Start Header -->
        <!------------------>
        <header class="main-header">
            <div class="flex-container">
                <nav class="main-navigation">
                    <ul>
                        <li><a href="#training">التمارين</a></li>
                        <li><a href="#n">التغذية</a></li>
                        <li><a href="#s">المكملات</a></li>
                        <li><a href="#p">البرامج</a></li>
                    </ul>
                </nav>
            <div id="logo">
                <h1>GyM MIRI</h1>
            </div>
            </div>
            <section class="service">
                <article class="flex-service">
                    <h2 class="styile-h2">البرامج المخصصة</h2>
                    <p class="styile-p">تتيح هذه الخدمة بناء خطة بناء على احتياجك</p>
                    <button type="submit" id="submit">المزيد</button>
                </article>
            </section>
        </header>
        <!-- End Header -->

/* Start Globel */
body {
/*    background-color: #fdfdfd;*/
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Almarai', sans-serif;
    direction: rtl;
    margin: 0;
    padding: 0;
}

.Container {
    width: 97%;
    margin: 0 auto;
}
/* End Globel */

/*****************/
/* Stert Header */
/***************/
.main-header {
    padding: 15px 0;
    background-color: #999;
    height: 750px;
    background-image: url('/images/720310.jpg');
    background-size: cover;
}

.main-header .flex-container {
    display: flex;
    justify-content: space-between;
}

.main-header .main-navigation {
    margin-right: 12px;
}

.main-header .main-navigation  ul {
    list-style: none;
}

.main-header .main-navigation > ul li {
    display: inline-block;
}

.main-header .main-navigation > ul a {
    padding: 0 18px;
    font-size: 25px;
    color: #f2f2f2;
    text-decoration: none;
    display: inline-block;
    transition: .1s;
}

.main-header .main-navigation > ul a:hover {
    color: #ffab40;
}

#logo {
    color: #f2f2f2;
    margin-left: 22px;
    width: 150px;
}

.main-header .service {
    text-align: center;
    color: #f2f2f2ff;
    display: flex;
    justify-content: flex-end;
    padding-left: 10px;
}

.main-header .service .flex-service {
    width:560px;
}

.main-header .service .styile-h2 {
    margin-bottom: 5px;
    font-size: 90px;
    color: #ffab40;
    /* background-color: #f2f2f296; */
}

.main-header .service .styile-p {
    font-size: 20px;
}

#submit {
    margin: 10px 0;
    border: none;
    font-size: 23px;
    color: #0e2b3d;
    padding: 14px 28px; 
    border-radius: 2px; 
    cursor: pointer;
    background-color: #ffab40;
}

#submit:hover {
    background: #e68a00;
}
/* End Header */

L.Da · 12 نوفمبر 2019، 6:00م

جميل جدا ولكنه سيصبح رائعا لو عملت shorthand لخصائص خلفية الـ header على هذا النحو:

.main-header {
    padding: 15px 0;
    height: 750px;
    background: url('/images/720310.jpg') #999 center / cover;
}

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

.main-header {
    padding: 15px 0;
    height: 750px;
    background: linear-gradient(rgba(153,153,153, 0.5), rgba(153,153,153, 0.5)), url('/images/720310.jpg') center / cover;
}

شيء آخر ولا دخل له بالكود العبارة التي كتبتها : تتيح لك هذه الخدمة بناء خطة بناء…، جد عبارة أخرى تزيل تكرار كلمة بناء فصدقني بعض المستعملين لا يهمهم الكود بقدر ما يدققون في هذه الأشياء.

YaserAlnajjar · 12 نوفمبر 2019، 6:18م

تقريبا كل العملاء هذه الأمور عندهم أهم بعشر مرات من جودة الكود

abdallahmiri · 13 نوفمبر 2019، 9:29م

@L.Da @YaserAlnajjar @Alhakem
شكرا على التعليق, بس الموقع خاص مشروعى ليس لعميل اتعلم و اعطى مهاراتى فى هذا الموقع.

القسم الاخر هو التمارين بشتغل و نرجع تانى. coretsbs

Alhakem · 14 نوفمبر 2019، 7:32ص

بانتظار البقية

L.Da · 14 نوفمبر 2019، 1:54م

أثناء تعلمنا أيضا يجب الإنتباه لأدق التفاصيل لنعتاد، فارضاء العميل عندما نرغب في التعامل معه غاية لا تدرك ولا تترك (كل شيء إلا زعل العميل ) وإذا لم تصدقني إسأل الأستاذين : محمد و ياسر

Alhakem · 14 نوفمبر 2019، 3:32م

هههههههههه زعل العميل =

abdallahmiri · 15 نوفمبر 2019، 9:24م

@L.Da @Alhakem @YaserAlnajjar

            <!------------------------->
            <!-- Start training-Miri -->
            <!------------------------->
            <div class="training">
                <div class="Container">
                    <section class="title-tra">
                        <h2>التمارين</h2>
                        <p>شرح رائع</p>
                    </section>
                    <section class="flex-container">
                        <article class="box">
                            <article class="icon">
                                <img src="images/abs.jpg" alt="image icon arm">
                            </article>
                            <article class="information">
                                <h3>البطن</h3>
                                <p>Lorem ipsum  للمصممين نص لوريم ايبسوم بالعربي عربي انجليزي</p>
                            </article>
                        </article>

                        <article class="box">
                                <article class="icon">
                                    <img src="images/chist.png" alt="image icon arm">
                                </article>
                                <article class="information">
                                    <h3>الصدر</h3>
                                    <p>Lorem ipsum  للمصممين نص لوريم ايبسوم بالعربي عربي انجليزي</p>
                                </article>
                        </article>

                        <article class="box">
                                <article class="icon">
                                    <img src="images/back.jpg" alt="image icon arm">
                                </article>
                                <article class="information">
                                    <h3>الظهر</h3>
                                    <p>Lorem ipsum  للمصممين نص لوريم ايبسوم بالعربي عربي انجليزي</p>
                                </article>
                        </article>

                        <article class="box">
                                <article class="icon">
                                    <img src="images/leg.png" alt="image icon arm">
                                </article>
                                <article class="information">
                                    <h3>الرجل</h3>
                                    <p>Lorem ipsum  للمصممين نص لوريم ايبسوم بالعربي عربي انجليزي</p>
                                </article>
                        </article>

                        <article class="box">
                                <article class="icon">
                                    <img src="images/arm.png" alt="image icon arm">
                                </article>
                                <article class="information">
                                    <h3>الذراع</h3>
                                    <p>Lorem ipsum  للمصممين نص لوريم ايبسوم بالعربي عربي انجليزي</p>
                                </article>
                        </article>

                        <article class="box">
                                <article class="icon">
                                    <img src="images/shoulder-.png" alt="image icon arm">
                                </article>
                                <article class="information">
                                    <h3>الكتف</h3>
                                    <p>Lorem ipsum  للمصممين نص لوريم ايبسوم بالعربي عربي انجليزي</p>
                                </article>
                        </article>
                    </section>
                </div>
            </div>
            <!-- End training-Miri -->


/************************/
/* Start training-miri */
/**********************/
.training {
    padding-bottom: 90px;
    text-align: center;
}

.training .title-tra {
    padding: 80px 0;
}

.training .title-tra > h2 {
    margin-bottom: 0;
    font-size: 50px;
    letter-spacing: 3px;
}

.training .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.training .box {
    width: 400px;
    margin: 20px auto;
}

.training .icon {
    width: 60px;
    margin: 0 auto;
}

.training .icon img {
    width:100%;
}

.training .information {
    width: 300px;
    margin: 0 auto;
}
/* End training-miri */

L.Da · 15 نوفمبر 2019، 10:44م

عملت نظرة على السريع لأن الوقت متأخر قليلا.
عمل ماشاء الله، لكن أرى أنه لا داع لعمل articles داخل article وإستبدال الحاوي الأب بعنصر الـ main.
أقترح عليك إعادة هندسة الـ content على هذا النحو مثلا:

        <!-- Start training-Miri -->
        <!------------------------->
        <main class="training Container">
            <section class="title-tra">
                <h2>التمارين</h2>
                <p>شرح رائع</p>
            </section>
            <section class="flex-container">
                <article class="box">
                    <div class="icon">
                        <img src="images/abs.jpg" alt="image icon arm">
                    </div>
                    <div class="information">
                        <h3>البطن</h3>
                        <p>Lorem ipsum  للمصممين نص لوريم ايبسوم بالعربي عربي انجليزي</p>
                    </div>
                </article>

                <article class="box">
                    <div class="icon">
                        <img src="images/chist.png" alt="image icon arm">
                    </div>
                    <div class="information">
                        <h3>الصدر</h3>
                        <p>Lorem ipsum  للمصممين نص لوريم ايبسوم بالعربي عربي انجليزي</p>
                    </div>
                </article>

                <article class="box">
                    <div class="icon">
                        <img src="images/back.jpg" alt="image icon arm">
                    </div>
                    <div class="information">
                        <h3>الظهر</h3>
                        <p>Lorem ipsum  للمصممين نص لوريم ايبسوم بالعربي عربي انجليزي</p>
                    </div>
                </article>

                <article class="box">
                    <div class="icon">
                        <img src="images/leg.png" alt="image icon arm">
                    </div>
                    <div class="information">
                        <h3>الرجل</h3>
                        <p>Lorem ipsum  للمصممين نص لوريم ايبسوم بالعربي عربي انجليزي</p>
                    </div>
                </article>

                <article class="box">
                    <div class="icon">
                        <img src="images/arm.png" alt="image icon arm">
                    </div>
                    <div class="information">
                        <h3>الذراع</h3>
                        <p>Lorem ipsum  للمصممين نص لوريم ايبسوم بالعربي عربي انجليزي</p>
                    </div>
                </article>

                <article class="box">
                    <div class="icon">
                        <img src="images/shoulder-.png" alt="image icon arm">
                    </div>
                    <div class="information">
                        <h3>الكتف</h3>
                        <p>Lorem ipsum  للمصممين نص لوريم ايبسوم بالعربي عربي انجليزي</p>
                    </div>
                </article>
            </section>
        </main>
        <!-- End training-Miri -->

أرى أيضا أنه من الأفضل إكمال بناء الموقع ككل ثم رفعه لنا لنتمكن من مراجعته كليا مرة واحدة خاصة من ناحية الcss لنتمكن من إختصار وتوحيد الخصائص للعناصر المشتركة.

Alhakem · 16 نوفمبر 2019، 9:16م

لا أزيد على ملاحظات لارا سوى ملاحظة واحدة.

أشارت لارا سابقاً في أحد ملاحظاتها لك:

لا أرى أي داع لاستعمال section إذا لا يحتوى على وسم (h1=>h6)، انصحك باستبداله إلى div عادي

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

لاحظ انك قمت بعمل قسمين كالتالي:

<section class="title-tra">
      <h2>التمارين</h2>
       <p>شرح رائع</p>
</section>
<section class="flex-container">
   <!--المحتويات الأخرى-->
</section>

في القسم الأول وضعت عنوان من المستوى h2 ولكن في القسم الثاني لم تضع عنوان.

هل إستخدامك للـ section الثاني خطأ وليس له لزمة؟

لا إستخدامك له صحيح ولكن قيامك بعمل قسم منفصل للعنوان و الوصف هو الغير سليم فذلك العنوان والوصف هو بالأصل لقسم واحد، لذا قم بضمة بداخل القسم الثاني وتخلص من الـ section الزائد عن اللزوم كالتالي:

<section class="flex-container">
   <header class="title-tra">
       <h2>التمارين</h2>
       <p>شرح رائع</p>
   </header>
   <!--المحتويات الأخرى-->
</section>

abdallahmiri · 18 نوفمبر 2019، 7:13م

تمام

فى مشكلة عندما قمت بتحميل الموقع لم استطع تحميل الملفات ملف ملف,المشروع zip.

Alhakem · 18 نوفمبر 2019، 3:08م

ليش رفعت المشروع على github كملف مضغوط؟

abdallahmiri · 18 نوفمبر 2019، 4:08م

@Alhakem
بيرفع المشروع مستند مستند ما بيرفع ملف
images & css & java script & index.html

Alhakem · 18 نوفمبر 2019، 7:14م

لا تستخدم زر الرفع لكل مستند على حدا، قم بسحب المجلدات والملفات (drag & drop) الى داخل منطقة الرفع وسيتم رفعها جميعاً.

الطريقة الاخرى تتطلب منك استخدام الCommand line اذا ما تعرفها بنتطرق لها في ورشة ال git

abdallahmiri · 20 نوفمبر 2019، 7:29م

@Alhakem @L.Da @YaserAlnajjar تم تعديل الملف

Alhakem · 20 نوفمبر 2019، 8:46م

راح أطلع علية وأرجع لك