آموزش برنامه نویسی وب سایت از صفر تا صد (20 درس رایگان)

چگونه یادگیری توسعه وب (Web Development) را شروع کنیم؟ هرگاه بحث چگونگی یاد گرفتن توسعه دادن وب درمیان باشد، اولین توصیه من این است که ابتدا اصول اولیه را یاد بگیرید. اما چگونه ؟ صادقانه بگویم، با اینکه مدتهاست به طور حرفه ای برنامه نویسی میکنم و ده ها پروژه وب در حرفه خودم ساخته ام، اما هنوز هم ممکن است اصول بیسیکی که فراموش کرده ام را برای خودم یادآوری کنم. (توضیحات از زبان یکی از بهترین و باتجربه ترین برنامه نویسان در زمینه طراحی وبسایت نگارش شده است)

HTML، CSS و جاوا اسکریپت

لازم نیست زبان های HTML، CSS، و جاوا اسکریپت را به ترتیب یاد بگیرید، بلکه باتوجه به نیازتان یکی را انتخاب کنید. همچنین انتظار نداشته باشید که به همه این زبان ها تسلط کامل پیدا کنید چراکه تقریبا کاری محال و غیرممکن است.

روش یادگیری توسعه ی وب

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

ساده ترین روش این است که آموزش های همین صفحه ما را دانلود کنید و شروع به تمرین در منزل کنید، بعد هم به صورت دورکاری چند پروژه از سایت های فری لنسری بگیرید یا کارهای دانشجویی یا ساده دیگر انجام دهید. به همین راحتی راه می افتید. حدود 4-8 ماه حداقل زمان نیاز دارید تا به سطح متوسط برسید.

چگونه اصول اولیه برنامه نویسی وب سایت را یاد بگیریم؟

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

1 – مبانی HTML

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

فقط با دانش اصول اولیه HTML، باید بتوانید شروع به ساخت وب سایت کنید. اکثر تازه کارها می خواهند سریع یاد بگیرند و شروع به ساختن سایت های پر زرق و برق کنند، اما وقتی متوجه می شوند چقدر می تواند سخت باشد، به سرعت انگیزه ی خود را از دست می دهند.

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

2- بر اساس موضوعات و نیازهای پروژه یاد بگیرید

اجازه دهید نیازتان شما را هدایت کند. پس از ساختن یک پروژه اساسی، اکنون سعی کنید چیزهایی را اضافه کنید و وقتی دانش لازم را ندارید، خودتان تحقیق و کشف کنید.

این بهترین راه برای یادگیری HTML است. به عنوان مثال، سعی کنید یک وب سایت برای یک تجارت خیالی (یا واقعی) خود ایجاد کنید. واقعاً روی نوشتن محتوای خوب تمرکز کنید و آن را به صفحات مختلف تقسیم کنید.

اگر می‌خواهید یک منوی پیمایش یا فرمی، یک ویدیو و غیره اضافه کنید. اجازه دهید این نیاز شما را هدایت کند و کشف و جستجو کنید که چگونه این کار را انجام دهید. سعی نکنید آن را فانتزی کنید، اما وقتی با مستندات روبرو شدید، واقعاً آن را یاد بگیرید.

سعی کنید تا آنجا که می توانید آن موضوع خاص را درک کرده و آزمایش کنید. در اینجا چند مستند عالی از موضوعاتی است که ابتدا باید یاد بگیرید:

• تاکید بر متن و به کار بردن به اختصارات.
• ساختار محتوا و معناشناسی مناسب؛
• لیست ها و لیست توضیحات:
• منوی جهت یابی و ایجاد پیوند بین صفحات.
• محتوای ویدیویی و صوتی؛
• تصاویر؛
• فرم های وب و نحوه ایجاد اولین فرم:
• جداول:
• عناصر درون خطی(Inline) در مقابل عناصر بلوک( block elements) در HTML.

این فقط نوک کوه یخ HTML است، اما واقعاً سعی کنید ابتدا این موضوعات را یاد بگیرید و حواس خودتان را با موضوع دیگری پرت نکنید.

3 – CSS در حد مبتدی

اکنون باید سعی کنید یاد بگیرید که چگونه به پروژه خود کمی سبک و سیاق اضافه کنید و از آن لذت ببرید. شما باید در مورد:

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

یادگیری این امر به شما امکان می دهد سبکی زیبا به محتوای خود که بر اساس HTML پایه ساخته شده است اضافه کنید. عجله نکنید و سعی نکنید بر چیزی مسلط شوید. در این سطح، باید سعی کنید داده ها و مستندات خود را بهترین دوست تان کنید و تا جایی که می توانید صفحات ساده را با سبک اولیه بسازید. یادگیری رایگان در اینجا

4 – معناشناسی و طرح‌بندی HTML

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

• ساختار وب سایت و چیدمان معنایی؛
• تفاوت بین برچسب‌های div، بخش ها و مقاله.
• تفاوت بین تگ img و تصویر پس زمینه CSS.
• تفاوت بین تگ های اصلی، هدر، پاورقی و کناری.
• تفاوت بین تگ های شکل، img و تصویر.
• تاثیر SEO (بهینه سازی موتور جستجو) و معنای آن؛

در این سطح، باید بدانید که چگونه طرح بندی را با HTML ساختار دهید. برای شما بسیار مهم است که انواع مختلف را امتحان کنید و نهایتا به تگ های معنایی بپردازید. این مهمترین جنبه HTML5 و تاثیرگذار برای توسعه وب و سئو است.

5- استایل ‌بندی CSS

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

• نحوه استفاده از Flexbox؛
• نحوه ایجاد طرح بندی چند ستونی؛
• نحوه استفاده از طرح بندی شبکه؛
• نحوه کار با شبه عناصر ::before و ::after;
• چگونه ابجکت ها را در مرکز قرار دهیم یا راست چین کنید؛

6- طراحی پاسخ گو یا واکنش گرا (Responsive)

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

• چگونه یک وب سایت واکنش گرا (Responsive) بسازیم؛
• پرسش های رسانه ای و نحوه استفاده از آنها؛
• تصاویر واکنش گرا؛
• متن واکنش گرا؛
• واحدها و مقادیر CSS؛

7 – اصول وب جاوا اسکریپت

جاوا اسکریپت خود یک موضوع بزرگ است، اما برای برنامه نویسی اولیه، شما فقط باید به اندازه کافی یاد بگیرید تا کار با موارد موجود در صفحه را شروع کنید، بنابراین باید سعی کنید در مورد موارد زیر بیاموزید:

• جاوا اسکریپت پایه برای توسعه وب؛
• نحوه ساخت پروژه UI مبتنی بر منطق (logic-based).
• کار با متغیرها؛
• کار با رشته ها؛
• دانش پایه آرایه؛
• کار با عناصر DOM؛

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

عملکرد برنامه نویسی وب (اینفوگرافیک)

دانلود دروس

• در اینجا دو نوع آموزش داریم که بسته به سلیقه خودتان می توانید از یکی استفاده کنید (یا هر دو را دانلود نمایید)
• برای مشاهده بهتر ویدیوها در موبایل، گوشی را افقی نگه دارید. اگر اروری مشاهده کردید بخاطر روشن بودن وی پی ان است. بعد از پخش هر ویدیو، علامت دانلود روی آن نمایان می شود.
• اگر روی دانلود کلیک کردید و ویدیو باز هم پخش شد، بعد از پخش ردن روی علامت سه نقطه پایینش کلیک و گزینه دانلود یا ذخیره را انتخاب کنید. از اینترنت دانلود منجر هم می توانید استفاده کنید. هر درسی مشکل داشت در نظرات اعلام کنید تا سریعا رفع شود یا به پیج منبع مراجعه کنید. ضمنا هر چند وقت یک بار احتمالا دروس به روز می شوند.

آموزش اول

از پیج گروه سودا:

پیشنهاد می کنیم دانلود کنید: آموزش صفر تا صد طراحی سایت با وردپرس

آموزش دوم

از پیج سحر سریخانی:

مهارت های لازم برای طراحی سایت (۷ توانایی لازم)

سوالات متداول

1- تفاوت برنامه نویس وب با طراح وب چیست؟

برنامه نویس وب کدهای base یک سرویس تحت وب را می نویسد.اما طراحی ظاهر ورابطه کاربری یک نرم افزارتحت وب یا یک وب سایت به عهده Web designer یا طراح وب قرار داده می شود.درواقع کسی که ظاهر یک نرم افزار تحت وب رو طراحی می کند طراح وب Web designer نامیده می شودو کسی که کدهای بیس یک سایت یا برنامه تحت وب را می نویسد برنامه نویس وب نام دارد.

2- برای برنامه نویسی وب به چه ابزارهایی نیاز است؟

• یک نرم افزاری که بتوانید کدهایتان را در آن بنویسید، مثل Notepad ویندوز (و یا نرم افزارهای حرفه‌‌ای تر و پیشرفته تر)
• یک سرور یا شبیه ساز سرور که بتواند کدهای شما را پردازش کند (کدهایی مثل PHP برای اجرا شدن نیاز به پردازش دارند)
• یک مرورگر (Browser) که بتواند نتیجه‌ی پردازش کدها را به شما (یا کاربر) نشان دهد. مثل گوگل کروم، فایرفاکس یا …

بعد از اصول اولیه چه مباحثی پیش می آید؟

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

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

همه زبانهای برنامه نویسی را در اینجا آموزش داده ایم (کاملا رایگان و به زبان ساده!!!)

بله درست شنیدید هر روز! اگرچه می دانم که ممکن است در زندگی مشغله هایی وجود داشته باشد، بنابراین تمام تلاش خود را بکنید تا هر زمان آزاد موجود را با تمرین های یادگیری پر کنید.