फ्रंट-एंड डेव्हलपरसाठी सहा कार्ये

1. क्रेडिट कार्ड फॉर्म

गुळगुळीत आणि आनंददायक सूक्ष्म-संवादांसह एक मस्त क्रेडिट कार्ड आकार. नंबर फॉरमॅटिंग, पडताळणी आणि ऑटोमॅटिक कार्ड प्रकार ओळख यांचा समावेश आहे. हे Vue.js वर तयार केलेले आहे आणि ते पूर्णपणे प्रतिसाद देणारे देखील आहे. (आपण पाहू शकता येथे.)

क्रेडिट-कार्ड-फॉर्म

तुम्ही काय शिकाल:

• प्रक्रिया करा आणि फॉर्म प्रमाणित करा
• इव्हेंट हाताळा (उदाहरणार्थ, फील्ड बदलल्यावर)
• पृष्ठावर घटक कसे प्रदर्शित करावे आणि कसे ठेवावे ते समजून घ्या, विशेषत: फॉर्मच्या शीर्षस्थानी दिसणारी क्रेडिट कार्ड माहिती

लेखाचा अनुवाद एडिसन सॉफ्टवेअरच्या समर्थनाने केला गेला होता, जे प्रोग्रामर आणि त्यांच्या नाश्त्याच्या आरोग्याची काळजी घेतेआणि सानुकूल सॉफ्टवेअर विकसित करते.

2. हिस्टोग्राम

हिस्टोग्राम हा एक तक्ता किंवा आलेख आहे जो आयताकृती पट्ट्यांसह उच्च किंवा लांबीच्या प्रमाणात ते प्रतिनिधित्व करत असलेल्या मूल्यांच्या प्रमाणात स्पष्ट डेटाचे प्रतिनिधित्व करतो.

ते अनुलंब किंवा क्षैतिजरित्या लागू केले जाऊ शकतात. उभ्या बार चार्टला कधीकधी रेखा चार्ट म्हणतात.

तुम्ही काय शिकाल:

• संरचित आणि समजण्यायोग्य मार्गाने डेटा प्रदर्शित करा
• अतिरिक्त: घटक कसे वापरायचे ते शिका canvas आणि त्यासह घटक कसे काढायचे

तो आहे आपण जागतिक लोकसंख्या डेटा शोधू शकता. त्यांची वर्षानुसार वर्गवारी केली जाते.

3. ट्विटर हार्ट ॲनिमेशन

2016 मध्ये, ट्विटरने आपल्या ट्विटसाठी हे आश्चर्यकारक ॲनिमेशन सादर केले. 2019 पर्यंत, तो अजूनही भाग दिसत आहे, मग तो स्वतः तयार का करू नये?

तुम्ही काय शिकाल:

• CSS विशेषता सह कार्य करा keyframes
• HTML घटक हाताळा आणि ॲनिमेट करा
• JavaScript, HTML आणि CSS एकत्र करा

4. शोध कार्यासह GitHub भांडार

येथे काहीही फॅन्सी नाही — GitHub रेपो ही केवळ एक गौरवपूर्ण यादी आहे.
रेपॉजिटरीज प्रदर्शित करणे आणि वापरकर्त्याला ते फिल्टर करण्याची परवानगी देणे हे लक्ष्य आहे. वापरा अधिकृत GitHub API प्रत्येक वापरकर्त्यासाठी भांडार मिळविण्यासाठी.

GitHub प्रोफाइल पेज - github.com/indreklasn

तुम्ही काय शिकाल:

• API कडून डेटा प्राप्त करा
• API वरून डेटा प्रदर्शित करा
• प्रत्येक शोधासाठी संबंधित डेटा फिल्टर करा आणि दर्शवा
• पर्यायी: तुम्ही आव्हानासाठी तयार असल्यास, वापरा API v4, GraphQL वापरून तयार केले. तुम्हाला GraphQL शिकायचे असल्यास, माझ्या मागील लेखांपैकी एकावर जा.

5. Reddit-शैलीतील गप्पा

साधेपणा आणि वापरणी सुलभतेमुळे चॅट हा संवादाचा लोकप्रिय मार्ग आहे. पण आधुनिक चॅट रूमला खरोखर काय इंधन मिळते? वेबसॉकेट्स!

तुम्ही काय शिकाल:

• वेबसॉकेट्स, रिअल-टाइम कम्युनिकेशन आणि डेटा अपडेट्स वापरा
• वापरकर्ता प्रवेश स्तरांसह कार्य करा (उदाहरणार्थ, चॅट चॅनेलच्या मालकाची भूमिका आहे admin, आणि खोलीतील इतर - user)
• प्रक्रिया करा आणि फॉर्म प्रमाणित करा - लक्षात ठेवा, संदेश पाठवण्यासाठी चॅट विंडो आहे input
• विविध चॅट तयार करा आणि त्यात सामील व्हा
• वैयक्तिक संदेशांसह कार्य करा. वापरकर्ते इतर वापरकर्त्यांशी खाजगीरित्या चॅट करू शकतात. मूलत:, तुम्ही दोन वापरकर्त्यांमध्ये वेबसॉकेट कनेक्शन स्थापित कराल.

6. पट्टे-शैली नेव्हिगेशन

हे नेव्हिगेशन अद्वितीय बनवते ते म्हणजे पॉपओव्हर कंटेनर सामग्रीमध्ये बसण्यासाठी बदलते. नवीन पॉपओव्हर उघडण्याच्या आणि बंद करण्याच्या पारंपारिक वर्तनाच्या तुलनेत या संक्रमणामध्ये एक अभिजातता आहे.

तुम्ही काय शिकाल:

• संक्रमणांसह CSS ॲनिमेशन एकत्र करा
• सामग्री मंद करा आणि फ्लोटेड घटकावर सक्रिय वर्ग लागू करा

प्रथम ते स्वतः करण्याचा प्रयत्न करा, परंतु तुम्हाला मदत हवी असल्यास, हे पहा चरण-दर-चरण मार्गदर्शक.

स्त्रोत: www.habr.com