একজন ফ্রন্ট-এন্ড ডেভেলপারের জন্য ছয়টি কাজ

1. ক্রেডিট কার্ড ফর্ম

মসৃণ এবং আনন্দদায়ক মাইক্রো ইন্টারঅ্যাকশন সহ একটি দুর্দান্ত ক্রেডিট কার্ড আকৃতি। নম্বর বিন্যাস, যাচাইকরণ এবং স্বয়ংক্রিয় কার্ড প্রকার সনাক্তকরণ অন্তর্ভুক্ত। এটি Vue.js-এ নির্মিত এবং এটি সম্পূর্ণরূপে প্রতিক্রিয়াশীল। (তুমি দেখতে পার এখানে.)

ক্রেডিট-কার্ড-ফর্ম

আপনি যা শিখবেন:

• প্রক্রিয়া এবং ফর্ম যাচাই
• ইভেন্টগুলি পরিচালনা করুন (উদাহরণস্বরূপ, যখন ক্ষেত্র পরিবর্তন হয়)
• পৃষ্ঠায় উপাদানগুলি কীভাবে প্রদর্শন এবং স্থাপন করতে হয় তা বুঝুন, বিশেষত ফর্মের উপরে প্রদর্শিত ক্রেডিট কার্ডের তথ্য

নিবন্ধটি EDISON সফ্টওয়্যারের সহায়তায় অনুবাদ করা হয়েছিল, যা প্রোগ্রামারদের স্বাস্থ্য এবং তাদের প্রাতঃরাশের যত্ন নেয়এবং কাস্টম সফ্টওয়্যার বিকাশ করে.

2. হিস্টোগ্রাম

একটি হিস্টোগ্রাম হল একটি চার্ট বা গ্রাফ যা তারা প্রতিনিধিত্ব করে এমন মানগুলির সমানুপাতিক উচ্চতা বা দৈর্ঘ্য সহ আয়তক্ষেত্রাকার বার সহ শ্রেণীবদ্ধ ডেটা উপস্থাপন করে।

এগুলি উল্লম্বভাবে বা অনুভূমিকভাবে প্রয়োগ করা যেতে পারে। একটি উল্লম্ব বার চার্টকে কখনও কখনও লাইন চার্ট বলা হয়।

আপনি যা শিখবেন:

• একটি কাঠামোগত এবং বোধগম্য উপায়ে ডেটা প্রদর্শন করুন
• অতিরিক্তভাবে: উপাদানটি কীভাবে ব্যবহার করবেন তা শিখুন canvas এবং কিভাবে এটি দিয়ে উপাদান আঁকা

এটা হল আপনি বিশ্বের জনসংখ্যা তথ্য খুঁজে পেতে পারেন. তারা বছর অনুসারে সাজানো হয়।

3. টুইটার হার্ট অ্যানিমেশন

2016 সালে, টুইটার তার টুইটগুলির জন্য এই আশ্চর্যজনক অ্যানিমেশনটি চালু করেছিল। 2019 এর হিসাবে, এটি এখনও অংশটি দেখায়, তাহলে কেন নিজেই একটি তৈরি করবেন না?

আপনি যা শিখবেন:

• CSS অ্যাট্রিবিউট নিয়ে কাজ করুন keyframes
• ম্যানিপুলেট এবং HTML উপাদান অ্যানিমেট
• জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস একত্রিত করুন

4. অনুসন্ধান ফাংশন সহ GitHub সংগ্রহস্থল

এখানে অভিনব কিছু নেই — GitHub সংগ্রহস্থলগুলি কেবল একটি মহিমান্বিত তালিকা।
লক্ষ্য হল সংগ্রহস্থলগুলি প্রদর্শন করা এবং ব্যবহারকারীকে সেগুলি ফিল্টার করার অনুমতি দেওয়া। ব্যবহার করুন অফিসিয়াল GitHub API প্রতিটি ব্যবহারকারীর জন্য সংগ্রহস্থল পেতে.

GitHub প্রোফাইল পৃষ্ঠা - github.com/indreklasn

আপনি যা শিখবেন:

• API থেকে ডেটা গ্রহণ করুন
• API থেকে ডেটা প্রদর্শন করুন
• ফিল্টার করুন এবং প্রতিটি অনুসন্ধানের জন্য প্রাসঙ্গিক ডেটা দেখান
• ঐচ্ছিক: আপনি যদি একটি চ্যালেঞ্জের জন্য প্রস্তুত হন তবে ব্যবহার করুন API v4, GraphQL ব্যবহার করে নির্মিত। আপনি যদি গ্রাফকিউএল শিখতে চান তবে আমার আগের নিবন্ধগুলির একটিতে যান.

5. Reddit-শৈলী চ্যাট

চ্যাট তাদের সরলতা এবং ব্যবহারের সহজতার কারণে যোগাযোগের একটি জনপ্রিয় উপায়। কিন্তু কি সত্যিই আধুনিক চ্যাট রুম জ্বালানী? ওয়েবসকেটগুলি !

আপনি যা শিখবেন:

• WebSockets, রিয়েল-টাইম যোগাযোগ এবং ডেটা আপডেট ব্যবহার করুন
• ব্যবহারকারীর অ্যাক্সেসের স্তরগুলির সাথে কাজ করুন (উদাহরণস্বরূপ, একটি চ্যাট চ্যানেলের মালিকের ভূমিকা রয়েছে৷ admin, এবং রুমে অন্যরা - user)
• ফর্ম প্রক্রিয়া এবং যাচাই করুন - মনে রাখবেন, একটি বার্তা পাঠানোর জন্য চ্যাট উইন্ডো input
• বিভিন্ন চ্যাট তৈরি করুন এবং যোগদান করুন
• ব্যক্তিগত বার্তা সঙ্গে কাজ. ব্যবহারকারীরা অন্যান্য ব্যবহারকারীদের সাথে ব্যক্তিগতভাবে চ্যাট করতে পারেন। মূলত, আপনি দুটি ব্যবহারকারীর মধ্যে একটি WebSocket সংযোগ স্থাপন করবেন।

6. স্ট্রাইপ-শৈলী নেভিগেশন

যা এই নেভিগেশনটিকে অনন্য করে তোলে তা হল যে পপওভার কন্টেইনার সামগ্রীর সাথে মানানসই রূপান্তরিত হয়৷ একটি নতুন পপওভার খোলা এবং বন্ধ করার ঐতিহ্যগত আচরণের তুলনায় এই রূপান্তরের একটি কমনীয়তা রয়েছে।

আপনি যা শিখবেন:

• ট্রানজিশনের সাথে CSS অ্যানিমেশন একত্রিত করুন
• কন্টেন্ট ম্লান করুন এবং ভাসমান উপাদানে সক্রিয় শ্রেণী প্রয়োগ করুন

প্রথমে এটি নিজে করার চেষ্টা করুন, কিন্তু যদি আপনার সাহায্যের প্রয়োজন হয় তবে এটি দেখুন ধাপে ধাপে গাইড.

উত্স: www.habr.com