Ushbu front-end kodlash sinovini tekshirganingiz uchun tashakkur.
Frontend Mentor vazifalari real loyihalarni yaratish orqali kodlash mahoratingizni oshirishga yordam beradi.
Bu vazifani bajarish uchun sizga HTML va CSS haqida asosiy tushuncha kerak.
Sizning vazifangiz boshlang'ich kodida keltirilgan dizaynlardan ushbu ochilish sahifasini yaratishdir.
Muammoni hal qilishda sizga yoqadigan har qanday vositalardan foydalanishingiz mumkin. Shunday ekan, agar sizda mashq qilmoqchi bo'lgan narsangiz bo'lsa, uni sinab ko'ring.
Sizning foydalanuvchilaringiz quyidagilarga ega bo'lishi kerak:
- Qurilmaning ekran o'lchamiga qarab sahifaning optimal tartibini ko'rishi
- Sahifadagi barcha interaktiv elementlar uchun kursor holatiga kelishi
Challengeda qo'llab-quvvatlashni xohlaysizmi? Slack hamjamiyatimizga qoʻshiling va #help kanalida savollar bering.
Sizning vazifangiz /design jildidagi dizaynlarga loyihani yaratishdir. Siz dizaynning mobil va ish stoli versiyasini topasiz.
Dizaynlar JPG statik formatida. JPG-dan foydalanish shrift o'lchami, to'ldirish va chekka kabi uslublar uchun o'zingizning eng yaxshi fikringizni ishlatishingiz kerakligini anglatadi.
Agar siz dizayn fayllarini (biz Sketch & Figma versiyalarini taqdim etamiz) dizaynni batafsil tekshirishni istasangiz, PRO aʼzosi sifatida obuna boʻlishingiz mumkin.
Siz barcha kerakli aktivlarni /images jildida topasiz. Aktivlar allaqachon optimallashtirilgan.
Ranglar palitrasi va shriftlar kabi sizga kerak bo'ladigan ma'lumotlarni o'z ichiga olgan "style-guide.md" fayli ham mavjud.
O'zingizga qulay bo'lgan har qanday ish jarayonidan bemalol foydalaning. Quyida tavsiya etilgan jarayon keltirilgan, ammo bu bosqichlarni bajarishingiz shart emas:
- Loyihangizni GitHub da umumiy ombor sifatida ishga tushiring. Agar yordam kerak bo'lsa, repo yaratish sizning kodingizni hamjamiyat bilan baham ko'rishni osonlashtiradi. Agar buni qanday qilishni bilmasangiz, Ushbu Git resursini sinab koʻring.
- Kodingizni veb-manzilga nashr qilish uchun omboringizni sozlang. Agar muammoni hal qilishda sizga yordam kerak bo'lsa, bu ham foydali bo'ladi, chunki loyihangiz URL manzilini repo URL manzili bilan baham ko'rishingiz mumkin. Buni qilishning bir qancha usullari mavjud va biz quyida ba'zi tavsiyalarni beramiz.
- Loyihani qanday hal qilishni rejalashtirishni boshlash uchun dizaynlarni ko'rib chiqing. Ushbu qadam CSS sinflarini qayta ishlatish mumkin bo'lgan uslublarni yaratish uchun oldindan o'ylashga yordam berish uchun juda muhimdir.
- Har qanday uslubni qo'shishdan oldin tarkibingizni HTML bilan tuzing. Avval HTML-ni yozish diqqatingizni yaxshi tuzilgan tarkib yaratishga qaratishga yordam beradi.
- Loyihangiz uchun asosiy uslublarni, jumladan, “shrift-family” va “shrift-size” kabi umumiy tarkib uslublarini yozing.
- Sahifaning yuqori qismiga uslublar qo'shishni boshlang va pastga tushing. Siz ishlayotgan sohani tugatganingizdan xursand bo'lganingizdan keyingina keyingi bo'limga o'ting.
Yuqorida aytib o'tilganidek, loyihangizni bepul joylashtirishning ko'plab usullari mavjud. Tavsiya etilgan xostlarimiz:
Siz ushbu yechimlardan biri yoki boshqa ishonchli provayderlarimiz yordamida saytingizni joylashtirishingiz mumkin. Tavsiya etilgan va ishonchli xostlarimiz haqida koʻproq oʻqing.
Biz ushbu “README.md” ni maxsus bilan qayta yozishni tavsiya qilamiz. Biz ushbu boshlang‘ich kodida README-template.md fayli ichida shablonni taqdim etdik.
Shablon nima qo'shish kerakligi haqida ko'rsatma beradi. Maxsus “README” loyihangizni tushuntirishga va o‘rgangan bilimlaringizni aks ettirishga yordam beradi. Iltimos, shablonimizni xohlagancha tahrir qiling.
Shablonga maʼlumotlaringizni qoʻshganingizdan soʻng, ushbu faylni oʻchirib tashlang va “README-template.md” faylining nomini “README.md” qilib oʻzgartiring. Bu sizning omboringiz README fayli sifatida ko'rinadi.
O'z yechimingizni jamoaning qolgan qismi ko'rishi uchun platformaga yuboring. Qanday qilish bo‘yicha maslahatlar uchun bizning “Yechimlarni yuborish bo‘yicha to‘liq qo‘llanma”ga amal qiling. bu.
Esingizda bo'lsin, agar siz o'z yechimingiz haqida fikr-mulohaza izlayotgan bo'lsangiz, uni yuborishda savollar berishni unutmang. Savollaringiz qanchalik aniq va batafsil bo'lsa, jamiyatdan qimmatli fikr-mulohazalarni olish imkoniyati shunchalik yuqori bo'ladi.
Yechimni baham ko'rishingiz mumkin bo'lgan bir nechta joylar mavjud:
- Yechim sahifangizni [Slack hamjamiyatining] #finished-projects kanalida baham ko'ring (https://www.frontendmentor.io/slack).
- Tweet qiling @frontendmentor va @frontendmentor ni, shu jumladan tvitdagi repo va jonli URL manzillarini eslatib o'ting. Biz siz yaratgan narsalarni ko'rib chiqishni va uni atrofga baham ko'rishga yordam berishni xohlaymiz.
- Yechimni LinkedIn kabi boshqa ijtimoiy kanallarda baham ko'ring.
- Loyihangizni yaratish tajribangiz haqida blog. Ish jarayoni, texnik tanlovlaringiz haqida yozish va kodingiz orqali gaplashish - o'rganganlaringizni mustahkamlashning ajoyib usuli. Yozish uchun ajoyib platformalar: dev.to, Hashnode va CodeNewbie /).
Yechimingizni platformaga yuborganingizdan so‘ng uni baham ko‘rishingizga yordam beradigan shablonlarni taqdim etamiz. Iltimos, ularni tahrirlang va fikr-mulohazalarni izlayotganingizda maxsus savollarni kiriting.
Savollaringiz qanchalik aniq bo'lsa, jamiyatning boshqa a'zosi sizga fikr bildirishi ehtimoli shunchalik yuqori bo'ladi.