تسليم حلول: مهمة بناء قائمة المتجر

ورشات الواجهات الأمامية Frontend القوائم في صفحات الويب
#1

مرحباً جميعاً

المهمة المطلوبة:

بإمكانك الإطلاع عليها من هنا

طريقة مشاركة الأكواد التي قمت بكتابتها:

قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات

```
هنا ضع الأكواد
```

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

3 Likes
#2

للمعاينة المباشرة: اضغط هنا

HTML


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THE STORE</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
</head>

<body>
    <header>
        <h1><a href="index.html">STORE</a></h1>
        <nav>
            <ul class="navbar">
                <li><a href="#">home</a></li>
                <li><a href="#">featured</a></li>
                <li><a href="#">women</a></li>
                <li><a href="#">men</a></li>
                <li><a href="#">kids</a></li>
                <li><a href="#">more</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Featured Products</h2>
        <p>Refresh your look with pieces of our collection</p>
        <div>
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
        </div>
        <a href="products.html">More Products</a>

    </main>
    <footer>
        <p>&copy; 2018 All Rights Reserved.</p>
    </footer>

</body>

</html>

CSS

body {
    margin: 0;
        font-family: 'Questrial', sans-serif;
}

header {
    height: 80px;
    border-bottom: 1px dashed #ccc;
}

header h1 {
    text-align: center;
    font-size: 24px;
    font-family: 'Domine', serif;
    letter-spacing: 6px;
    line-height: 80px;
    margin: 0;
}
header h1 a {
    color: #222;
    text-decoration: none;
}
.navbar {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    border-bottom: 1px dashed #ccc;
}
.navbar li {
    display: inline-block;
}
.navbar a {
    display: block;
    padding: 0 20px;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 18px;
    color: #222;
    line-height: 50px;
    transition-duration: 0.5s;
}
.navbar a:hover {
    color: #fff;
    background-color: #191919;
    
}
main {
    max-width: 960px;
    margin: 90px auto 90px auto;
    text-align: center;

}

main h2 {
    font-size: 30px;
    font-weight: normal;
    margin: 0;

}

main p {
    color: #999;
    font-size: 18px;
}

main img {
    margin: 1%;
    height: 335px;
    width: 290px;
    box-sizing: border-box;
    transition-duration: 0.5s;
}
main img:hover {
    padding: 20px;
    background-color: #ddd;
}
main div {
    margin: 6% auto 9% auto;

}

main a {
    color: #000;
    border: 1px solid;
    padding: 10px;
    text-decoration: none;
    transition-duration: 0.5s;
}
main a:hover {
    background-color: #222;
    color: #fff;
    border-color: #222;
}
footer {
    background-color: #191919;
    padding: 6px;

}
footer p {
    color: #ccc;
    text-align: center;
}
3 Likes
#3

Wonderful work, I like it @mohamed1 :heart:
Keep it up :cherry_blossom:

2 Likes
#4

Thank you,
I’m glad cuz you like it

2 Likes
#5

Thank you,
I’m glad cuz you like it

3 Likes
#6

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>STORE</title>
        <link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <header>
            <h1><a href="index1.html">STORE</a></h1>
            <nav>
                    <ul class="navbar">
                        <li><a href="#">home</a></li>
                        <li><a href="#">featured</a></li>
                        <li><a href="#">women</a></li>
                        <li><a href="#">men</a></li>
                        <li><a href="#">kids</a></li>
                        <li><a href="#">more</a></li>
                    </ul>
            </nav>
        </header>
        <main>
            <h2>Featured Products</h2>
            <p>Refresh your look with pieces of our collection</p>
            <div>
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
            </div>
            <a href="Products.html">More Products</a>
        </main>
        <footer>
            <p>&copy; 2018 All Rights Reserved</p>
        </footer>
    </body>
</html>
2 Likes
#7

CSS

body{
    margin: 0;
    font-family: 'Questrial', sans-serif;
}
header{
    height: 80px;
    border-bottom: 1px dotted #ccc;
}
header h1{
    text-align: center;
    font-family: 'Domine', serif;
    font-size: 24px;
    letter-spacing: 6px;
    line-height: 80px;
    margin: 0;
}
header h1 a{
text-decoration: none;
    color: #666;
}
main {
    max-width: 960px;
    text-align: center;
    margin: 140px auto 90px auto;
}
main h2{
    font-size: 30px;
    font-weight: normal;
    margin: 0;
}
main p{
    color: #999;
    font-size: 18px;
}
main div{
    margin: 60px 0 60px 0;
}
main img{
    margin: 10px;
    width: 290px;
    height: 335px;
    box-sizing: border-box;
    transition-duration: .4s;
   
}
main img:hover{
    padding: 20px;
    background-color: #ddd;				  
}
main a{
    width: 160px;
    height: 45px;
    display: block;
    margin: 0 auto 0 auto;
    line-height: 45px;
    text-decoration: none;
    font-size: 18px;
    border: 2px solid #ccc;
    color: #666;
    transition-duration: 0.4s;
}
main a:hover {
    background-color: #222;
    color: #fff;
    border-color: #222;
}

footer{
    background-color: #222;
    height: 50px;
    color: #999;
    text-align: center;
    line-height: 50px;
}    
.navbar {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px dotted #ccc;
    text-align: center;
} 
.navbar li {
    display: inline-block;
    line-height: 40px;
    
}   
.navbar a {
    text-decoration: none;
    display: block;
    padding:10px 20px;
    color: #999;
    transition-duration: .3s;
}
.navbar a:hover {
    background-color: rgb(153, 219, 219);
    color: #fff;
}
2 Likes
#8

@mohamed1 @benyahia32

ممتاز شباب :star_struck::muscle: فخور بكم.

جميعكم قمتوا بعمل رائع !

لكن سأقوم بإعطائكم بعض الملاحظات عشان الـ Perfection :face_with_raised_eyebrow:

ملاحظات لك محمد

  • أعجبني قيامك بإعطاء الروابط لون متناسق مع الإستايل العام للموقع عند مرور الماوس عليها :+1:

  • رائع أنك قمت بكتابة هيكلة قائمة التنقل في المكان الصحيح بداخل العنصر header تحت عنوان الموقع :+1:.

  • التنسيقات التي أعطيتها للقائمة مطابقة للمطلوب بنسبة 99%. لذا لنقم بهذا التحدي بيني وبينك إذا ما كنت بتخليها مطابقة بنسبة 100% :sunglasses:

أرجع للتصميم أدناه حيث انه اوضح من الي في المهمة و أوجد الفرق بين قائمتك وبين القائمة الموجودة في التصميم، وقم بعمل اللازم.

image

ملاحظات لك بن يحيى

  • أيضاً قمت بعمل رائع بكتابة هيكلة قائمة التنقل في المكان الصحيح بداخل العنصر header تحت عنوان الموقع :+1:.

  • أعجبني اللون الذي قمت بإختيارة للروابط عند تمرير الماوس عليها كسر الألوان الموجود في الموقع بدرجة متناسقة مع التصميم العام.

  • التنسيقات التي أعطيتها للقائمة مطابقة للمطلوب بنسبة 97%. لذا لنقم بهذا التحدي بيني وبينك إذا ما كنت بتخليها مطابقة بنسبة 100% :sunglasses:

أرجع للتصميم اعلاة وحاول توصل لشكل مطابق بنسبة 100%.

4 Likes
#9

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

2 Likes
#10

هههههههههه تمام مية مية الأن 100% مطابق :grin:.

رائع! أنك بتشتغل بطريقتك حسب الي تشوفة مناسب وهذا شئ أشجع عليه :+1:.

فقط لما أركز على أن تصل لنتيجة مطابقة 100% حسب المتطلبات في بعض المهام ليس من أجل أن احصر إبداعك وإنما في هذه المرحلة نعمل دورنا كمطوري فرونت إند حيث نكون مسؤولين لتحويل تصميم يأتي إلينا من قبل مصمم الـ UI/UX بشكل مطابق حرفياً بالبيكسل الواحد.

بحيث لو اجيب لك التصميم الي هو عبارة عن صورة وتجيب لي الواجهة بعد أن تم تطويرها ولم أستطع التفريق بينهما فهذا يعني بأنك مطور متمكن :sunglasses:.

2 Likes
#11

اكيد هذا شيء معروفين فيه انتم في التدقيق على الاخطاء واعطاء الملاحظات
صحيح كلامك شغلنا حالياً هو كمطوري نطبق الي ينطلب منا حسب المطلوب
شفتك كاتب في المهمة لايوجد اي قيود فكلت استغل الوضع واتفنن بالطلبية :joy:
اكيد مارح اشتغل على كيفي بالمستقبل عندما يطلب مني تنفيذ مشروع معين ولا
اذا اشتغلت فراح يودعني العميل قبل ما ابلش اشتغل اصلاً :rofl::rofl:

2 Likes
#12

اكيد هذا شيء معروفين فيه انتم في التدقيق على الاخطاء واعطاء الملاحظات

لسى ما شفت من الجمل إلا إذنه :joy:

صحيح كلامك شغلنا حالياً هو كمطوري نطبق الي ينطلب منا حسب المطلوب
شفتك كاتب في المهمة لايوجد اي قيود فكلت استغل الوضع واتفنن بالطلبية :joy:
اكيد مارح اشتغل على كيفي بالمستقبل عندما يطلب مني تنفيذ مشروع معين ولا
اذا اشتغلت فراح يودعني العميل قبل ما ابلش اشتغل اصلاً :rofl::rofl:

:joy::+1:

2 Likes
#13

:joy::running_man:

1 Like
#14 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>THE STORE</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="animate.css">
    <script src="wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
</head>

<body>
    <header>
        <h1><a href="index.html">STORE</a></h1>
        <nav>
            <ul class="navbar">
                <li><a href="#">home</a></li>
                <li><a href="#">featured</a></li>
                <li><a href="#">women</a></li>
                <li><a href="#">men</a></li>
                <li><a href="#">kids</a></li>
                <li><a href="#">more</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Featured Products</h2>
        <p>Refresh your look with pieces of our collection</p>
        <div>
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg" class="wow bounceInLeft" data-wow-duration="2s">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg" class="wow bounceInDown">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg" class="wow bounceInRight" data-wow-duration="2s">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg" class="wow bounceInLeft" data-wow-duration="2s">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg" class="wow  bounceInUp">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg" class="wow bounceInRight" data-wow-duration="2s">
        </div>
        <a href="#">More Products</a>

    </main>
    <footer>
        <p>&copy; 2018 All Rights Reserved.</p>
    </footer>

</body>

</html>
#15 
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

header {
    height: 80px;
    border-bottom: 1px dashed #ccc;
}

header h1 {
    text-align: center;
    font-size: 24px;
    font-family: 'Domine', serif;
    letter-spacing: 6px;
    line-height: 80px;
    margin: 0;
}
header h1 a {
    color: #222;
    text-decoration: none;
}
.navbar {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    border-bottom: 1px dashed #ccc;
    opacity: .7;
    font-weight: 500;
}
.navbar li {
    display: inline-block;
}
.navbar a {
    display: block;
    padding: 0 20px;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 18px;
    color: #333;
    line-height: 50px;
    transition : all .7s ease-in-out;
    font-family: 'Domine', serif;
}
.navbar a:hover {
    color: #fff;
    background-color: #333;
    
}
main {
    max-width: 960px;
    margin: 90px auto 90px auto;
    text-align: center;

}

main h2 {
    font-size: 30px;
    font-weight: normal;
    margin: 0;

}

main p {
    color: #999;
    font-size: 18px;
}

main img {
    margin: 1%;
    height: 335px;
    width: 290px;
    box-sizing: border-box;
    transition-duration: 0.5s;
}
main img:hover {
    padding: 20px;
    background-color: #DDD;
}
main div {
    margin: 6% auto 9% auto;

}

main a {
    color: #000;
    border: 1px solid;
    padding: 10px;
    text-decoration: none;
    transition-duration: 0.5s;
}
main a:hover {
    background-color: #222;
    color: #fff;
    border-color: #222;
}
footer {
    background-color: #333;
    padding: 6px;

}
footer p {
    color: #ccc;
    text-align: center;
}
1 Like
#16

أبدعت ي محمد في إستخدام الإنميشن :+1::star_struck:

الأكواد جميعها كما يجب أن تكون :muscle:

والتنسيقات مطابقة لما في التصميم :ballot_box_with_check:

ملاحظة واحدة :face_with_raised_eyebrow:

أعطيت الروابط transition بمدة .7s والتي أراها مدة كبيرة لمثل هذا التأثير في الـ navbar أنصح أن تتراوح القيمة بين .3 إلى .5 كحد أقصى لتأثير تغيير لون الخلفية الخاص بالروابط.

2 Likes
#17

انا قولت لازم اول تطبيق يبقي مهمات كورتابز :smile: و تمام شكرا علي ملاحظه

1 Like
#18

ملف ال HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THE STORE</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
</head>

<body>
    <header>
        <h1>STORE</h1>
        <nav>
            <ul class="navbar">
                <li><a href="#">home</a></li>
                <li><a href="#">featured</a></li>
                <li><a href="#">woman</a></li>
                <li><a href="#">men</a></li>
                <li><a href="#">kids</a></li>
                <li><a href="#">more</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Featured Products</h2>
        <p>Refresh your look with pieces of our collection</p>
        <div>
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
        </div>
        <a href="products.html">More Products</a>

    </main>
    <footer>
        <p>&copy; 2018 All Rights Reserved.</p>
    </footer>

</body>

</html>

ملف CSS

body {
          margin: 0;
          padding: 0;
          text-align: center;
        }
        header {
           margin: 0;
           padding: 0;
        }
        h1 {
           margin: 0;  
           padding: 15px 0;
        }
        nav {
            margin: 0;
        }
        .navbar {
            margin: 0;
            padding: 12px 0;
            list-style: none;
            border: 1px dashed #ccb;
        }
        .navbar li {
            margin: 0;
            display: inline;
        }
        .navbar a {
            text-decoration: none; 
            padding: 0 6px;
            margin: 8px 0;
            color: #A4A1A1;
            font-size: 18px;
            font-family: serif;
            text-transform: capitalize;
        }
        main {
        max-width: 960px;
        margin: 90px auto 90px auto;
        text-align: center;
        
        }
        
        main h2 {
        font-size: 30px;
        font-weight: normal;
        margin: 0;
        
        }
        
        main p {
        color: #999;
        font-size: 18px;
        }
        main img {
        margin: 1%;
        height: 335px;
        width: 290px;
        box-sizing: border-box;
        transition-duration: 0.5s;
        }
        main img:hover {
        padding: 20px;
        background-color: #ddd;
        }
        main div {
        margin: 6% auto 9% auto;
        
        }
        main a {
        color: #000;
        border: 1px solid;
        padding: 10px;
        text-decoration: none;
        transition-duration: 0.5s;
        }
        main a:hover {
        background-color: #222;
        color: #fff;
        border-color: #222;
        }
        footer {
        background-color: #191919;
        padding: 6px;
        
        }
        footer p {
        color: #ccc;
        text-align: center;
        }
1 Like
#19 
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>THE STORE</title>
            <link rel="stylesheet" type="text/css" href="css/style.css">
            <link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
            <link rel="stylesheet" href="styles/style.css">
        </head>
        <body>
            <header>
                <h1><a href="index.html">STORE</a></h1>
                <nav>
                    <ul class="navbar">
                        <li><a href="#">home</a></li>
                        <li><a href="#">featured</a></li>
                        <li><a href="#">women</a></li>
                        <li><a href="#">men</a></li>
                        <li><a href="#">kids</a></li>
                        <li><a href="#">more</a></li>
                    </ul>
                </nav>
            </header>
            <main>
                <h2>Featured Products</h2>
                <p>Refresh your look with pieces of our collection</p>
                <div>
                    <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
                    <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
                    <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
                    <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
                    <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
                    <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
                </div>
                <a href="products.html">More Products</a>
            </main>
            <footer>
                <p>&copy; 2018 All Rights Reserved.</p>
            </footer>
        </body>
    </html>

body{
    margin: 0;
    font-family: 'Questrial', sans-serif;
}
header{
    height: 80px;
    border-bottom: 1px dotted #ccc;
}
header h1{
    text-align: center;
    font-family: 'Domine', serif;
    font-size: 24px;
    letter-spacing: 6px;
    line-height: 80px;
    margin: 0;
}
header h1 a{
    color: #222;
    text-decoration: none;
}
header nav{
    background-color: #333;
    text-align: center;
}
header nav .navbar{
    margin: 0;
    padding: 0
}
header nav .navbar li {
    list-style: none;
    display: inline-block;
    text-align: center;
}
header nav .navbar li a {
    display: block;
    padding: 10px 30px;
    text-decoration: none;
    color: white;
    font-size: 22px;
    text-transform: capitalize;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}
header nav .navbar li a:hover {
    background-color: blue;
    border-left: 5px solid red
}
main {
    max-width: 960px;
    text-align: center;
    margin: 90px auto 90px auto;
}
main h2{
    font-size: 30px;
    font-weight: normal;
    margin: 0;
}
main p{
    color: #999;
    font-size: 18px;
}
main div{
    margin: 60px 0 60px 0;
}
main img{
    margin: 10px;
    width: 290px;
    height: 335px;
    box-sizing: border-box;
    transition-duration: .4s;
}
main img:hover{
    padding: 20px;
    background-color: #ddd;
}
main a{
    width: 160px;
    height: 45px;
    display: block;
    margin: 0 auto 0 auto;
    line-height: 45px;
    text-decoration: none;
    font-size: 18px;
    border: 2px solid #ccc;
    color: #666;
    transition-duration: .4s;
}
main a:hover{
    background-color: #222;
    color: #fff;
    border-color: #222;
}

footer{
    background-color: #222;
    height: 50px;
    color: #999;
    text-align: center;
    line-height: 50px;
}

2
2.png1346×622 103 KB
1
1.png1341×619 101 KB

2 Likes
#20

عمل رائع سفيان :muscle:

رائع قيامك بوضع القائمة في المكان المناسب بداخل العنصر header :+1:

كل شئ ممتاز وكما يجب أن يكون :ballot_box_with_check: فقط أريد منك التركيز على الملاحظات التالية:

1- لا نريد أن نقوم بإعطاء الـ padding من الاعلى و الأسفل للـ .navbar وإنما نريد أن نقوم بإعطائها للروابط وذلك عشان يكون حجم الربط كبير ويسمح لنا بالضغط على مساحة واسعة.

2- قمت بإعطاء الروابط .navbar a بعض التنسيقات ولكن نسيت أن تقوم بتحويلها إلى عنصر من النوع block فكما تعرف فالروابط هي من النوع inline لهذا لن تجد أي تأثير للخاصية margin عليها في الوقت الحالي.

إذا لنقم بترتيب ذلك:

  • الغاء الـ padding من الـ navbar وإسنادها للروابط مباشرة.
  • تحويل الروابط كصناديق وكعناصر من النوع block

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

بإنتظار تعديلك على الاكواد

1 Like