Select Page

This can be considered further update of web development of this post[+]

Introduction

এই সেকশনে প্রাথমিক আলোচনা করা হবে যেটা খুবই গুরুত্বপূর্ণ। কারন অনেক সময় এমন হয় আমরা খুব আগ্রহে কোন একটা কোর্স কিনি এবং বেশ মোটিভেটেড থাকি যে, এইবার আমি কিছু একটা শিখেই ফেলবো। দুইদিন কোর্স দেখে চেষ্টাও করি অনেক। কিন্তু “আসি বলে গেলো বন্ধু আইলো না” গানের বন্ধু যেমন আসে না তেমন স্কিলও আর আসে না। এই বিষয়টা থেকে বাঁচতে আমরা কি কি করতে পারি তা পার্সোনাল এক্সিপেরিয়েন্স থেকে শেয়ার করবো।

 

HTML5

আমরা এইবার কোডিং জগতে পা রাখবো। HTML দিয়ে আমরা আমাদের যাত্রা শুরু করবো। একটা ব্যাপার মাথায় রাখবেন, “Slow and steady wins the race” এই কথাটা কিন্তু যুগের পর যুগ অকারণে টিকে নাই। সুতরাং প্রথমেই একদিনে সব শেষ করে ফেলবো এমন করবেন না। তাহলে খুব দ্রুত একটা ব্যাপার ঘটবে। সেটা হলো Programmer Burnout. আপনি নিজেকে যত প্রেসার দিবেন তত আপনি বার্নাউট হতে থাকবেন। একটা সময় আপনার কাজে বসতেই ইচ্ছা করবে না। তাই ছোট ছোট স্টেপ নিন। দিনে ৮ ঘণ্টা করে শিখবো বলে শুরু করে ৩ দিন পর থেমে যাবার থেকে প্রতিদিন ১ ঘণ্টা সময় দেয়া অনেক বেশি ইফেক্টিভ। তাই আপনি যদি বিগেনার হোন তাহলে এই টপিকগুলো বুঝে নিজে একবার প্রাকটিস করবেন। তারপর ২-৩ দিন পর টপিকগুলো আবার নিজের মত রিকল করবেন। Microsoft Word এই হোক অথবা আপনার খাতায় হোক যেসব টপিক শিখবেন তার উপর একটা রিসার্স আর্টিকেল লিখবেন। আপনার মনে হবে, আরে এইগুলো করে কি হবে। বেকার কষ্ট! মনে রাখবেন, এই ছোট ছোট কষ্টগুলোই সাধারণ আর অসাধারণ এর তফাৎ তৈরী করে দেয়। এটা লেখার সময় আমার প্রচন্ড গরম লাগছিলো। সারাদিন কাজ করার পর আর ভাল লাগছিলো না। কিন্তু আমি জানি আমি যদি মন দিয়ে বসে না লিখি তাহলে এই যে আপনি পড়ছেন এটা হয়তো আরো একদিন পরে পড়বেন আমার লেখা দেরী হওয়ার কারনে। তাই আপনার কাজের ইফেক্ট আপনার পরিবার, প্রিয়োজন এর উপর পড়ে। এত কথা বলার একটাই কারন। আপনি নতুন একটা যাত্রা শুরু করতে যাচ্ছেন। এইবার যেন থেমে না যায়।

  1. Introduction to HTML5
  2. Basic Syntax of HTML
  3. HTML Tags
  4. HTML Attributes
  5. HTML Heading
  6. HTML Paragraph
  7. HTML Head Tag
  8. Understanding Meta Tags
  9. Adding Favicon to Our Site
  10. HTML Images
  11. Understanding File Path
  12. HTML Comments
  13. HTML Links
  14. Block vs Inline Elements
  15. Introduction to Grouping
  16. HTML List
  17. HTML Form
  18. HTML Tables
  19. HTML Layout
  20. HTML5 Semantic Elements
  21. HTML Entities
  22. Project One: Building a Blog Site using HTML

Assignment One: Create a CV Using HTML

CSS3

আমরা আমাদের ওয়েবপেজের স্ট্রাকচার বা কঙ্কালের সাথে পরিচিত হয়েছি। এইবার মজার পার্ট শুরু। প্রথমেই কিছু কথা বলে রাখি। CSS শুরুতে দেখতে খুবই সহজ মনে হবে। আসলেই CSS সহজ। কিন্তু আপনি যদি কোর ফিচারগুলো, বিহেভিয়রগুলো না বুঝতে পারেন তাহলে নিশ্চিত থাকেন ভবিষ্যতে আপনি CSS নিয়ে ভাল রকম বিরক্তিকর সময় পার করবেন। আপনার লজিক মত একটা কোড লিখলেন কিন্তু গিয়ে দেখলেন কাজ করলো আরেক রকম কিংবা কাজই করলো না। তাই CSS ভাল মত শেখাটা লাইফটাইম এ্যাচিভমেন্ট। CSS দিয়ে যে কত অসাধারণ কাজ করা যায় তা আপনি CodePen এ “Only CSS” লিখে সার্চ করলেই বুঝতে পারবেন। আমরা যদিও CSS দিয়ে পুরো একটা আস্ত ঘোড়া তৈরী করা শিখবো না। তবে আমরা কোর বেশ কিছু ফিচার বুঝবো। আপনি এগুলো যদি সময়ের সাথে প্রাকটিস করতে পারেন তাহলে আপনি অনেক কনফিডেন্সের সাথে CSS লিখতে পারবেন। এই মডিউল শেষ করে ভার্চুয়ালি যেকোন লেয়াউট আপনার বানাতে পারার কথা। সুতরাং প্রতিটা বিষয় বুঝে নিজে এ্যাপ্লাই করবেন। অবশ্যই এ্যাপ্লাই করবেন। এখানে যে এ্যাসাইনমেন্ট দেয়া থাকবে সেটা করবেন।

  1. Introduction to CSS
  2. CSS Basic Syntax
  3. Important CSS Selector
  4. Styling Text with CSS
  5. Using Custom Fonts
  6. Understanding Parent Child Relation
  7. CSS Comments
  8. CSS Combinators
  9. CSS Specificity (YT)
  10. CSS Box Model (YT)
  11. CSS Inheritance
  12. CSS Float
  13. CSS Links
  14. CSS Position
  15. CSS Units
  16. CSS List
  17. CSS Tables
  18. CSS Background
  19. Background Shorthand
  20. CSS Form
  21. CSS Flexbox (Important)
  22. CSS Grid (Important)
  23. CSS Transition
  24. CSS Transforms
  25. CSS Gradients
  26. Media Queries
  27. CSS Variable
  28. Pseudo Class
  29. Pseudo Elements
  30. What Next?
  31. Project Two: Cloning Google Home Page

Assignment Two: Clone Bing home page


BEM – Block Element Modifier

BEM আসলে কঠিন কিছুই না। একটা জিনিস মনে রাখবেন নতুন কোন কিছু যখন আপনার শিখতে হচ্ছে এই যাত্রায় তার কোন কিছুই আপনার জীবনকে কঠিন করার জন্য না। অবশ্যই আরো সহজ করার জন্য। BEM হলো একটা মেথড যেটা দিয়ে আমরা আমাদের CSS কে আরো অর্গাইনাইজড এবং রি-ইউজেবল ছোট ছোট কম্পোনেন্টে ভাগ করতে পারি। এটা শেখার কিছুই নাই। আমরা শুধু প্রাকটিক্যাল এ্যাপ্লাই করবো এবং প্রজেক্ট করা শুরু করে দিবো। তারপর আমরা খুব দ্রুতই BEM এর ভাল দিকগুলো বুঝে যাবো। BEM এর পর থেকে আমরা প্রোপার স্ট্রাকচারড কোড লেখবো। এর আগে আমাদের পুরোটা ছিলো মনমত প্রাকটিস। এখন একটু সুন্দর এবং মিনিংফুল করা পালা।

  1. Introduction to BEM
  2. What is Block
  3. What is Element
  4. What is Modifier
  5. Project Three: Cloning Facebook Login Page

Assignment Three: Clone Apple home page

Basic JavaScript

এইবার আমরা JavaScript এর অদ্ভুত সুন্দর জগতে প্রবেশ করবো। যেহেতু এই কোর্সটি বিগেনারদের টার্গেট করে বানানো তাই আমরা আগে প্রোগ্রামিং এর সাথে পরিচিত হবো। DOM Manipulation শিখে সুন্দর প্রজেক্ট বানানো শুরু করবো। এই জায়গায় আমি একটা সত্যি কথা কথা বলতে চাই, যদিও এটি একটি ভিডিও টিউটোরিয়ালের কোর্স। আপনি যত বেশি টিউটোরিয়াল দেখবেন তত বেশি সময় নষ্ট করবেন। আপনার টার্গেট রাখতে হবে, ব্যাসিক শিখেই প্রোজেক্ট শুরু করে দেয়া। ছোট ছোট প্রজেক্ট। প্রজেক্ট আইডিয়া আমরা দেবো। কিন্তু আমি যতই জাভাস্ক্রিপ্ট কোড করে দেখাই তাতে আপনি কোনদিন ভাল করতে পারবেন না যদি আপনি নিজে না করেন। আপনি একটা প্রোজেক্ট বানাতে যাবেন ঠিক তখন দেখবেন আপনি অনেক কিছু জানেন না। এইটাই আপনার শেখার সময়। মনে রাখবেন, If it doesn’t hurt then you are not learning anything. ঠেকলে শিখি আমরা এটাই নিয়ম। আপনার এই স্টেজে প্রচুর সার্চ করতে হবে। আর্টিকেল পড়তে হবে। কোথায় একেবারে না পারলে আপনি আমাদের সিক্রেট গ্রুপে পোস্ট করবেন সেখানে সাপোর্ট পাবেন। আর একটা ওয়েবসাইট দেয়া হবে আপনাদের যেখানে প্রতিদিন প্রবলেম সলভ করতে হবে। তো চলেন দেখি আমরা কি কি বিষয় শিখবো।

  1. Introduction to JavaScript
  2. Variables in JavaScript
  3. Data Types in JavaScript
  4. JavaScript Operators
  5. Arrays in JavaScript
  6. Function in JavaScript
  7. JavaScript Conditionals
  8. General Loops
  9. Introduction to Object
  10. Let’s Talk About ‘this’ keyword
  11. Introduction to Document Object Model
  12. DOM Selection
  13. DOM Manipulation
  14. DOM Events
  15. Project Four: Creating a Clock using JavaScript

jQuery – JavaScript Library

এইবার আসতেছে এই কোর্সের প্রথম কন্ট্রোভার্সিয়াল সেকশন। জ্বি, আমি মানতেছি Vanilla JavaScript আপনি পারলে আপনার jQuery ব্যবহার করার দরকার নাই। কিন্তু আপনি যখন PSD to HTML বা Figma to HTML করতে যাবেন তখন অনেক সময় দেখবেন অনেক ছোটখাটো কাজ আপনি jQuery Plugin দিয়ে সুন্দর বানাতে পারবেন। অনেক সময় ক্লায়েন্টের এক্সিস্টিং ওয়েবসাইটের কাজ করতে গেলেও দেখবেন সেখানে jQuery দিয়ে অনেক কাজ করা। তখন সেটা আপনি ইডিট করতে গেলে দেখবেন jQuery অনেক কাজে লাগছে। সুতরাং শিখে রাখতে ক্ষতি কী? এমন কঠিন কিছুই না। বরং আপনি যদি JavaScript সেকশনটা বুঝে থাকেন তাহলে এটা একদম সহজ আপনার জন্য।

  1. Introduction and Installation
  2. jQuery Selctors
  3. jQuery Events
  4. jQuery DOM Manipulation
  5. jQuery Effect and Animation
  6. You Might Not Need jQuery
  7. Using jQuery Plugin
  8. Project Five: Creating Slider with jQuery
  9. Project Six: Creating Image Lightbox jQuery

Assignment Five: bKash Charge Calculator

SCSS – Syntactically Awesome Style Sheet

এতদিন আমরা প্লেইন CSS নিয়ে কাজ করছি। এইবার আমরা শিখবো SCSS, আপনি মোটামুটি অবাক হয়ে যাবে SCSS এর ব্যবহার দেখবেন। এবং এই পর্যায়ে এসে অনেক আমাকে বলতেও পারেন, ভাই এটা আগে কেন শিখালেন না? এতদিন শুধু শুধু এত কষ্ট করে CSS লেখালেন। তার কারন আমি চাই আগে আপনার ব্যাসিক সঠিক হোক তারপর আপনি এমন অসাধারণ টেকনোলজি ব্যবহার করা শেখেন। কারন অনেক সময় আপনার একদম Raw CSS নিয়ে কাজ করতে হবে যদি একদম স্ক্র্যাচ থেকে প্রোজেক্ট আপনি না বানান। তাহলে কি কি বিষয় শিখবো আমরা?

  1. Introduction and Setup
  2. Variables
  3. Nesting
  4. More on Nesting
  5. Map
  6. Partials
  7. Mixins
  8. Extends
  9. Operators
  10. Function
  11. If Else
  12. Each
  13. What Next?

Assignment Five: Create a Portfolio Site

Bootstrap

এইবার আমরা আমাদের কোর্সের সেকেন্ড কন্ট্রোভার্সিয়াল টপিক শিখবো। এইটারও একটাই উদ্দেশ্য যে, আপনি যদি এক্সিস্টিং কোন সাইটে কাজ করেন তাহলে আপনার বুটস্ট্রাপ সম্পর্কে ধারণা থাকা লাগতে পারে। তাছাড়া আমরা যখন ছোটখাটো প্রোজেক্ট নিজেদের প্রাকটিসের জন্য বানাবো তখন দ্রুত মার্কাপ করতে, স্টাইল করতে বুটস্ট্রাপ বেশ অসাধারণ কাজে আসবে। তাই যেহেতু এটা Mastering Web Design কোর্স তাই আমরা বাদ দিবো না। আপনারা চাইলে অন্য CSS Framework অবশ্যই দেখতে পারেন তবে এটা শিখে রাখা প্লাস পয়েন্ট। খুব কঠিন কিছু না। মূলত আপনার Grid System টা বেশি ভালো করে শিখতে হবে। এবং এই পর্যন্ত আসলে আপনি Flexbox পারেন তাই আপনার জন্য কঠিন কিছু হবে না।

  1. Bootstrap Installation
  2. Bootstrap Grid System
  3. Bootstrap Navbar
  4. Bootstrap Button
  5. Bootstrap Typography
  6. Bootstrap Alert
  7. Bootstrap Progress bar
  8. Bootstrap Form
  9. Bootstrap Labels and Badges
  10. Project Seven: Creating a Landing Page using Bootstrap

Assignment Six: Create a Coming Soon Page

Git and GitHub

এই পর্যন্ত আসতে পারলে আপনাকে অনেক অনেক শুভেচ্ছা। আমরা এখন শিখবো Version Control System. কোন কিছু নতুন শেখার ব্যাপারে ওপেন থাকবেন। মনে রাখবেন, কোন টেকনোলজি আপনার যাত্রা কঠিন করতে না, সহজ করতেই তৈরী করা হয়েছে। Git আপনার ডেভেলপার লাইফকে অনেক অনেক সহজ করে দিবে। আপনি ডেভেলপমেন্টের যেই ডোমেইনেই জাম্প করেন না কেন আপনাকে Git সম্পর্কে ধারণা রাখতেই হবে।

  1. Installing Git
  2. Creating Local Repository
  3. Adding Files to Stage Environment
  4. Create a Commit
  5. Commit History
  6. Creating Branch
  7. Merge and Merge Conflict
  8. Push Repository to GitHub
  9. Cloning
  10. Fetch and Pull
  11. Host Static Website on GitHub

Assignment Seven: Push Your Previous Assignments to GitHub

Putting it All Together

আলহামদুলিল্লাহ এই পর্যন্ত আসতে পারলে আমরা সত্যিই সাকসেসফুল। সাকসেস মানেই যে ডলার না এই মন মানুসিকতা থেকে আমাদের কোর্সের স্টুডেন্টদের অন্তত বের হতে হবে। সাকসেস মনের শান্তি। আপনি যদি কনফিডেন্ড হোন, কাজ পারেন তাহলে যে স্বর্গীয় সুখ পাবেন এইটার মত সাকসেস হতে পারে? আর কাজ পারে এমন কেউ এই জগতে বসে নাই। সুতরাং আমাদের এখন একমাত্র কাজ আমাদের অর্জিত জ্ঞান দিয়ে যত বেশি পারা যায় প্রোজেক্ট তৈরী করা।

Project Eight: Complete PSD to HTML

Assignment Eight: Code Provided Design

The content is copied from here.[+]