ওয়েব ডিজাইন প্রাথমিক এনভাইরনমেন্ট সেট আপ উইথ ভিজুয়াল স্টুডিও কোড


:memo: ফাইল এক্সটেনশন শো করা

কেন ফাইল এক্সটেনশন শো করা প্রয়োজন?

ফাইল এক্সটেনশন শো করলে আপনি সহজেই ফাইলের ধরন (যেমন .html, .css, .js) বুঝতে পারবেন। এটা সঠিক ফাইল তৈরি করার জন্য খুবই গুরুত্বপূর্ণ। আপনি যদি প্রথম প্রথম প্রাক্টিস করা শুরু করেন তাহলে দেখবেন - আপনি html ফাইল ক্রিয়েট করছেন কিন্তু হচ্ছেনা। আপনি চাচ্ছেন heading.html তৈরি করতে কিন্তু হয়ে যাচ্ছে heading.html.txt বা অন্য কিছু । এমন অনেকেরই হয়ে থাকে। তাই এই সমস্যা দূর করার জন্য ফাইল এক্সটেনশন শো করা প্রয়োজন। প্রতিটি কাজই বিভিন্নভাবে করা যায়। আমি এখানে তার মধ্য থেকে যেকোন একটি দেখাচ্ছি। চলুন শুরু করি।

:one: প্রথমে Windows File Explorer খুলুন।
:two: উপরের Menu Bar থেকে View ট্যাবে যান।
:three: Show সেকশনে ক্লিক করে File name extensions চেকবক্সটি টিক দিন :white_check_mark:
:four: এখন প্রতিটি ফাইলের শেষে সেই ফাইলের ফাইল এক্সটেনশন যেমন .html, .css, .js ইত্যাদি দেখতে পারবেন।


:left_right_arrow: টেক্সট Wrap করা

কেন টেক্সট Wrap প্রয়োজন?

লম্বা লাইনগুলো কোড এডিটরে ফিট করতে এবং কোড সহজে পড়তে টেক্সট Wrap ব্যবহার করা প্রয়োজন।

:one: Visual Studio Code ওপেন করুন।
:two: স্ক্রিনের নিচে থাকা Settings (:gear:) আইকনে ক্লিক করুন।
:three: সার্চ বক্সে টাইপ করুন: Word Wrap.
:four: Editor: Word Wrap অপশনটি সিলেক্ট করে On করুন।

:bulb: শর্টকাট পদ্ধতি:

  • Alt + Z চাপ দিয়ে দ্রুত টেক্সট Wrap চালু করতে পারেন।

:open_file_folder:প্রজেক্ট ফোল্ডার তৈরি করা

:one: আপনার কম্পিউটারের যেকোন ড্রাইভে (যেমন D:/Projects/) একটি নতুন ফোল্ডার তৈরি করুন।
:two: ফোল্ডারের নাম দিন HTML_Project.
:three: ফোল্ডারের মধ্যে একটি নতুন ফাইল তৈরি করুন, নাম দিন index.html বা অন্যকিছু।

:bulb: Windows-এ সরাসরি .html ফাইল তৈরি করতে: ডেক্সটপের যেকোন জায়গায় মাউসের রাইট বাটন ক্লিক করে

  • New Text Document তৈরি করুন।
  • ফাইলের একটি টপিক্স রিলেটেড নাম দিন।
  • টেক্সট ফাইলের .txt এক্সটেনশন পরিবর্তন করে .html লিখুন।

:memo:HTML ফাইল ওপেন করুন এবং কোড লিখুন

:one: Visual Studio Codeindex.html ফাইলটি ওপেন করুন।
:two: নিচের কোডটি লিখুন:

<!DOCTYPE html>  
<html>  
<head>  
    <title>My HTML Project</title>  
</head>  
<body>  
    <h1>ওয়েব ডিজাইনে আপনাকে স্বাগতম! 🎉</h1>  
    <p>এটা আমার প্রথম HTML পেজ। </p>  
</body>  
</html>  

:three: Ctrl + S চাপ দিয়ে সেভ করুন। ফাইলের উপর ডাবল ক্লিক করে ফাইলটিকে ওপেন করুন।


  • প্রতিদিন কিছু না কিছু প্র্যাকটিস করুন।
  • নতুন টুলস এবং ফিচার এক্সপ্লোর করুন।
  • ভুল হলে ভয় পাবেন না, কারণ ভুল থেকেই শিখতে হয়। :rocket:

এখন আপনি প্রাথমিক এনভাইরনমেন্ট সেটআপ সম্পন্ন করেছেন। ওয়েব ডিজাইনে আপনার নতুন যাত্রা শুভ হোক! :heart_eyes:

7 Likes

Thank you vaiya…new ra khub vlo vabe buhjte parbe…

1 Like