طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

آیا دوست دارید کد نویسی را یاد بگیرید. این مقاله با مجموعه ای از تکنولوژی‌ها و منابع به شما کمک می کند تا روش یادگیری کد نویسی برای ساخت وب سایت های مدرن، سریع و جذاب را به دست آورید. من سه ماه گذشته را به یادگیری کد نویسی پرداختم.

programming

اگرچه در مواردی به شدت به چالش کشیده شدم ولی تجربه ای ارزشمندی به دست آوردم . یکی از سخت ترین چالش ها انتخاب چیزی بود که باید یاد می‌گرفتم و همین طور انتخاب یک منبع مناسب برای یادگیری آنها که البته به دغدغه اصلی من تبدیل شده بود.

زبان های بسیاری وجود دارد که میتوان با آنها شروع کرد. در کنار زبان های محبوب تعداد بسیاری کتابخانه وجود دارد که انتخاب از بین آنها واقعا سخت است. بعلاوه برخی منابع از منابع دیگر بهتر هستند. اگر من از همان ابتدا می دانستم که چه منابعی مناسب است ، یادگیری برای من حتی ساده تر می‌شد. یادگیری مطالب در سه ماه کار سختی است و نیاز به فداکاری و ساعت‌ها زمان برای یادگیری دارد.

البته یادگیری با تسلط کامل داشتن بر چیزی تفاوت دارد. با این حال شما الزامی ندارید که این کار را در سه ماه انجام دهید. در زیر مجموعه ای از نکات و تجربیاتی را که در این مدت یاد گرفته‌ام را در اختیار شما می‌گذارم که می‌تواند برای شما بسیار مفید باشد.

بخش اول : CSS , HTML و JavaScript

این ها سه زبان اصلی برای هر وب اپلیکیشنی هستند و تقریبا ساختن وبسایتی بدون آنها غیرممکن است.

HTML

اگر قبلا کد نویسی انجام نداده اید، html بهترین زبان برای شروع است. این زبان هسته ای بلوک های سازنده اینترنت است و برخلاف دیگر زبان‌ها بازخورد بصری فوری را برای  یادگیرندگانش فراهم می آورد. قبل از اینکه وارد مباحث یادگیری کدنویسی شوم، به صورت پراکنده قسمت های مختلف این زبان را دنبال می کردم.

html

به همین دلیل تا حدود زیادی با این زبان آشنا هستم. با این حال اگر بخواهیم یک منبع کامل را برای یادگیری این زبان انتخاب کنیم، سایت w3schools انتخاب مناسبی خواهد بود. این وب سایت خیلی ساده به عناصر html پرداخته است(ترجمه بیشتر مقالات زبان HTML این سایت در اینجا در دسترس است). اگر به دنبال محیطی برای تمرین کردن با این زبان میگردید، من به شما CodePen را پیشنهاد می کنم که یک ویرایشگر کد فوق العاده برای زبان های CSS , HTML و JavaScript به شمار می رود.

CSS

زبان CSS یک همراه و همدم برای زبان html محسوب می شود. این زبان بسیار ساده است، اگرچه دارای برخی مفاهیم خاص است (به خصوص مفاهیمی که مربوط به چیدمان و طرح بندی وب سایت می‌شود) که زمان بیشتری برای یادگیری نیاز دارد. باز یک منبع خوب برای یادگیری این زبان سایت w3schools است که ترجمه مقالات CSS آن در اینجا موجود است. من وقت زیادی را برای یادگیری زبان CSS اختصاص ندادم، زیرا قواعد نوشتاری این زبان بسیار ساده است. بنابراین بسیاری از مطالبی که در مورد این زبان یاد گرفتم مربوط به پروژه‌های بوده است که پیاده سازی کردم.

سخت ترین قسمت از زبان CSS فهم و درک layout است. سوالات زیادی در مورد layout در سایت StackOverflow پرسیده شده است که پاسخ آنها در همان سایت در دسترس است. سایت StackOverflow یک سایت پرسش و پاسخ فوق العاده بوده که پاسخ بسیاری از سوالات خود را می توانید در آن جستجو کنید. نسخه پیشرفته CSS و CSS3 نامیده می‌شود که ابزارهای طرح بندی قدرتمندی دارد و می‌تواند طراحی بهتری را برای ما به ارمغان بیاورد.

JavaScript

HTML و CSS زبان های برنامه نویسی کاملاً جامعی نیستند و تا زمانی که با آنها کار می‌کنید نمی‌توانید احساس کار با یک زبان برنامه نویسی را داشته باشید. اما زبان جاوااسکریپت یک زبان برنامه نویسی برای وب است و به همین دلیل است که جاوا اسکریپت انتخاب امن و فوق العاده برای یادگیری است. به علاوه این زبان به طور فزاینده ای برای اهداف دیگر از طریق فناوری های مانند Node.js استفاده می شود.

javascript

برای افراد مبتدی جاوا اسکریپ همچون css و html ساده نیست و من به شما پیشنهاد می کنم از منابع مختلفی برای یادگیری مفاهیم این زبان در سطوح مختلف استفاده کنید. برای شروع یادگیری زبان جاوا اسکریپت پیشنهاد من به شما همچنان سایت w3schools است که برخی مقالات آن در سایت لرن سورس ترجمه شده است و می تواند شروع خوبی برای یادگیری باشد.

 زمانی که در یادگیری جاوا اسکریپت کمی پیشرفت کردید می‌توانید مسائل خود را در https://codewars.com تکمیل کنید. CodeWars فوق العاده است اما مسائل آن دارای درجه بندی مختلفی هستند و برخی از آنها برای افراد مبتدی بسیار سخت و دشوار است.

بخش دوم : قسمت های ضروری دیگر که هر توسعه دهنده‌ی باید بداند

گیت و گیت هاب

گیت چیزی است که با نام “version-control system” شناخته میشود و گیت‌هاب مشهور ترین سرویس cloud-based گیت است. به زبان ساده تر گیت به شما اجازه می‌دهد از فایلتان بکاپ بگیرید، تغییرات را ردیابی کنید، پیشرفت های خود را با دیگر توسعه دهندگان به اشتراک بگذارید و در پروژه های تیمی همکاری کنید.

اکثر قریب به اتفاق توسعه‌دهندگان حرفه‌ای به سرویس‌های همچون گیت‌هاب تکیه دارند و داشتن پروفایل در چنین سرویس‌هایی می‌تواند کار آنها را امن‌تر نگه دارد.

 git

هرچه سریعتر کار خود را در گیت هاب شروع کنید، شانس بیشتری برای شناخته شدن به عنوان یک توسعه دهنده با تجربه دارید. می توانید از آموزش های Codecademy’s Git Tutorial برای شروع کار با گیت هاب استفاده کنید.

Command Line

بهترین روش برای استفاده از گیت بهره بردن از “terminal” و یا “command line” است که البته برای توسعه دهندگان مدرن وب امری ضروری است و به آنها اجازه می‌دهد به آسانی پکیجی را از طریق NPM در وبسایت خود نصب کنند.

بخش سوم : مجموعه مهارتهای خود را بسازید

زمانی که دانش کار با زبان های html ، css و جاوااسکریپت را داشته باشید، انتخاب تکنولوژی هایی که میتوانید یاد بگیرید کمی گیج کننده خواهد بود. با این حال برای توسعه دهندگان وب پیشنهادات من در زیر آمده است :

Sass

Sass یک پیش پردازنده برای CSS است. این پیش پردازنده از CSS پایه استفاده میکند و قابلیت های جدیدی را به آن اضافه می کند که کد نویسی آن را ساده تر و بهتر کرده و نگهداری از کدها را آسان تر می کند. یادگیری این پیش پردازنده بسیار آسان است و فقط کافیست که آموزش‌های رسمی این پیش پردازنده را دنبال کنید. زمانی که استفاده از Sass را شروع کردم دیگر برگشت به CSS معمولی برایم واقعا سخت بود.

بوت استرپ

بوت استرپ کتابخانه ای از کامپوننت هاست که به وسیله توییتر توسعه داده شده است. این کتابخانه به توسعه‌دهندگان اجازه می دهد قالب وب سایت خود را خیلی سریع طراحی کنند. به جای کدنویسی قابلیت هایی مثل اسلایدر، navbar و accordion بوت استرپ به شما اجازه می دهد در چند ثانیه آنها را ایجاد کنید.

همچون پیش پردازنده Sass زمان زیادی برای یادگیری مبانی اصلی کتابخانه بوت استرپ لازم نیست. من به شما پیشنهاد می کنم که بوت استرپ را یاد بگیرید زیرا به شما کمک می کند یک پروژه را به سرعت راه اندازی کنید.

bootstrap

این کتابخانه به خصوص در زمانی که یک پروژه عملی را برای یادگیری تکنولوژی دیگری راه اندازی کرده اید بسیار مفید است و لازم نیست وقت زیادی را برای طراحی ظاهری سایت خود صرف کنید. با وجود مزایای بی شمار بوت استرپ من به عنوان یک توسعه دهنده به شدت بر روی این کتابخانه تکیه نمیکنم زیرا شما می توانید با طراحی کامپوننت های مختلف همچون accordion مطالب زیادی را یاد بگیرید.

جی کوئری

سال ۲۰۱۹ ممکن است به نقطه عطفی برای جی کوئری تبدیل شود زیرا تعداد زیادی از توسعه دهندگان به سمت فریم ورک هایی مانند  React.js و Vue.js تمایل پیدا کردند. این در حالی است که ویرایش DOM توسط جی کوئری که قبلا بسیار ارزشمند تلقی می‌شد اکنون به یک عمل بد تبدیل شده است.

jquery

با این حال توصیه من به شما این است که همچنان جی کوئری را یاد بگیرید، نه تنها هنوز بخش بزرگی از وب سایت های اینترنت از این کتابخانه استفاده می کنند بلکه یادگیری این کتابخانه باعث می شود دانش توسعه در جاوا اسکریپ را برای خودتان تمرین کنید. برای من بهترین مکان برای یادگیری جاوا اسکریپت سایت رسمی آن است. یادگیری کتابخانه جی کوئری قبل از ورود به تکنولوژی‌های مدرن می تواند برای شما بسیار مفید باشد.

React

تعداد زیادی کتابخانه مدرن برای جاوا اسکریپت به وجود آمده است برای مثال Ember ، React ، Vue و آنگولار. اینجا انتخاب تنهایی وجود ندارد. اما بعد از کمی تحقیق تصمیم گرفتم که بر روی React تمرکز کنم. در میان همه این فریمورک ها و کتابخانه‌ها به نظر React مشهور تر بوده و سریعا در حال رشد است. این فریمورک توسط فیسبوک توسعه یافته است و روش آن در تغییر و ویرایش DOM مزیتی است که آن را نسبت به آنگولار برتری داده است.

react

من واقعا React را دوست دارم. یادگیری این فریمورک از جی کوئری سخت تر است و زمان بیشتری طول می کشد آن را بنویسید. اما مزایای آن حتی در پروژه های شخصی و کوچک نیز نمایان است. طبیعت ماژولار بودن React استفاده از state و سرعت بالای آن استفاده از این فریم ورک را به شدت لذت بخش کرده است. بهترین منبع برای یادگیری این فریمورک آموزش های اصلی خود آن است. 

منبع: لرن سورس
موافقین ۰ مخالفین ۰ ۹۸/۰۴/۲۸
شهربانو دوستی

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی