آموزش برنامه نویسی فرانت اند Front end

توسعه Front-End که به عنوان توسعه سمت کلاینت نیز شناخته می‌شود، عمل تولید JS ، کتابخانه ها و چهارچوب های مرتبط با آن مانند React، Angular و Vue برای یک وب‌سایت یا برنامه وب است، تا کاربر بتواند مستقیم آنها را ببیند و با آنها ارتباط برقرار کند. چالش مرتبط با توسعه فرانت اند این است که ابزارها و تکنیک های مورد استفاده برای ایجاد قسمت جلویی یک وب سایت دائم تغییر می کنند و بنابراین توسعه دهنده باید دائماً از نحوه توسعه این زمینه آگاه باشد. هدف از طراحی سایت این است که اطمینان حاصل شود وقتی کاربران سایت را باز می کنند، اطلاعات را در قالبی می بینند که به راحتی قابل خواندن و مرتبط باشد. این امر با این واقعیت پیچیده تر می شود که کاربران اکنون از دستگاه های مختلف با اندازه و وضوح صفحه متفاوت استفاده می کنند و بنابراین طراح را مجبور می کند که این جنبه ها را هنگام طراحی سایت در نظر بگیرد. آنها باید اطمینان حاصل کنند که سایتشان در مرورگرهای مختلف ، سیستم‌عامل‌های مختلف و دستگاه‌های مختلف به درستی نمایش داده می‌شود، که نیاز به برنامه‌ریزی دقیق از سوی توسعه‌دهنده دارد.

دانشجویان پس از سپری کردن این دوره توانایی ایجاد صفحات با تکنولوژی های به روز در این حوزه را خواهند داشت.

نام دوره :

• دوره برنامه نویسی فرانت

پیش نیاز:

برنامه نویسی مقدماتی

مخاطبان دوره :

• علاقمندان به برنامه نویسی فرانت و ورود به دنیای برنامه نویسی وب

مدت دوره: 70 ساعت

سر فصل های دوره :

SASS

• آشنایی با زبان اسکریپت نویسی Sass
  • مقدمه
  • مفهوم پیش پردازنده
  • تفاوت Sass و Scss
• نصب و اجرا
  • نصب در ویندوز (Windows)
  • نصب در لینوکس (Linux)
  • ایجاد اولین پروژه
  • تنظیم Watch
• دستورهای Sass
  • کامنت ها
  • متغیرها
  • انواع داده
  • عملگرهای ریاضیاتی
  • عملگرهای تساوی
  • عملگرهای مقایسه
  • عملگرهای منطقی
  • عملگر رنگ ها
  • عملگر & (Ampersand)
  • درج متغیر در رشته ها
• : Partials & Imports
  • Partials
  • Imports
•  Mixin و وراثت
  • معرفی Mixin
  • Mixin با پارامتر ورودی
  • وراثت
  • Placeholder Selectors
  • تفاوت Mixin با Extend
• دستورهای تو در تو
  • دستورهای تو در تو
  • ویژگی های تو در تو
• مباحث تکمیلی
  • لیست ها
  • تابع nth
  • Maps
  • At – root
• توابع
  • معرفی توابع
  • توابع از پیش تعریف شده
  • تعریف تابع
  • استفاده از توابع
• شرط ها و حلقه ها
  • if و else if, else
  • حلقه for
  • حلقه each
  • حلقه while
• فریم ورک ها
  • Bourbon
  • Bourbon Neat
  • Bourbon – Bitters
  • Compass
• ابزارها و تکنیک ها
  • Scout – App
  • تبدیل CSS به Sass

JavaScript

• مقدمات جاوا اسکریپت
  • معرفی جاوا اسکریپت
  • توانایی های جاوا اسکریپت
  • ساختار برنامه در جاوا اسکریپت
  • معرفی شی   Document
  • معرفی خصوصیت InnerHTML
  • رویدادها (Events) و توابع (Functions)
• معرفی انواع داده (Data Type) و عملگرها در جاوا اسکریپت
  • نوع داده رشته ای (String)
  • نوع داده عددی (Number)
  • نوع داده منطقی (Boolean)
  • نوع داده آرایه (Array)
  • نوع داده شی (Object)
  • عملگرهای جاوا اسکریپت (حسابی، انتسابی، مقایسه ای و منطقی)
  • عملگر سه حالته یا شرطی (Conditional Operator)
• پنجره های Popup، ساختارهای کنترلی
  • پنجره Alert
  • پنجره Confirm
  • پنجره Prompt
  • ساختار کنترلی if
  • ساختار کنترلی Switch
• تعریف توابع
• حلقه ها (Loops)
  • حلقه for
  • حلقه while
  • حلقه do-while
  • حلقه for-in
• رویدادها (Events)
  • رویدادهای ماوس
  • رویدادهای صفحه کلید

• درخت مدل شی گرای سند (Document Object Model)
  • تغییر محتوا از طریق DOM
  • تغییر Attributeها از طریق DOM
  • تغییر Style از طریق DOM
  • تعیین Eventها از طریق DOM
  • روابط بین گره ها در درخت DOM
  • مفهوم childNodes و Siblings و parentNode
  • پیمایش درخت DOM
• تغییر درخت DOM
  • ایجاد Node با متدهای createElement و createTextNode
  • افزودن Node با متدهای appendChild و insertBefore و replaceChild
  • حذف Node با removeChild
• شی Date یا تاریخ
  • سازنده های مختلف کلاس Date
  • متدهای مختلف کلاس Date
• اشیا جاوا اسکریپت – شی آرایه (Array)
  • خصوصیت Length
  • متدهای Array
• اشیا جاوا اسکریپت – کلاس Math
  • خصوصیات Math
  • متدهای Math
    • Round
    • Random
    • Floor
    • Max
    • Min
    • Pow
    • Abs

و…

React

• درس یکم: آشنایی با کتابخانه ReactJS
  • مروری بر مقایسه آمارهای برنامه‌نویسی Front-End و Back-End
  • ReactJS و ضرورت یادگیری آن
  • کاربردهای آن در تولید نرم‌افزار
• درس دوم: مروری بر مفاهیم کاربردی JavaScript و ES6
  • مروری بر Arrow Function‌ها
  • مروری بر Template Literalها
  • مروری بر Destructuring
  • استفاده از Ternary Operator
  • Import / Export ماژول‌ها
  • استفاده از map, filter و reduce
• درس سوم: نصب و راه‌اندازی ابزارهای لازم در ویندوز
  • نصب Node.js و Yarn
  • تفاوت npm و Yarn
  • نصب یک ادیتور مانند VS Code
  • نصب یک مرورگر مانند Chrome
• درس چهارم: ساخت اولین پروژه ReactJS
  • نصب کتابخانه ReactJS
  • آشنایی با ساختار پوشه‌بندی پروژه React
  • آشنایی با JSX و کاربرد آن
  • آشنایی با کامپایلر Babel
  • مفهوم Virtual DOM
  • React Dev Tools
• درس پنجم: معرفی Componentها در React
  • کامپوننت‌های مبتنی بر کلاس یا Stateful
  • آشنایی با Props
  • آشنایی با State
  • استفاده از this
  • آشنایی با متدهای Lifecycle
    • componentWillMount
    • componentDidMount
    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
    • componentDidUpdate
    • componentWillUnmount
    • render
  • کامپوننت‌های تابعی یا Stateless
• درس ششم: استفاده از Componentها در React
  • Conditional Rendering چیست؟
  • مدیریت رویدادها
  • استفاده از CSS Style در React
    • Inline styling
    • اسامی Camel case برای ویژگی‌ها
    • JavaScript Object
    • CSS Stylesheet
    • ماژول CSS و import کردن آن
  • فرم‌ها
  • لیست‌ها و کلیدها
  • استفاده از Routing (مسیریابی) در پروژه
• درس هفتم: معرفی Context API
  • مقدمه و معرفی اولیه
  • Context API 2 چیست؟
  • اضافه کردن Context و Provider
  • نحوه دسترسی به Context
  • به‌روزرسانی داده‌های Context
  • ایجاد Context‌های چندگانه
  • استفاده از Context‌های چندگانه
• درس هشتم: معرفی Hooks
  • آشنایی با Hooks
  • آشنایی با useState
  • استفاده از useState در فرم‌ها
  • آشنایی با useEffect
• درس نهم: ترکیب Hooks و Context
  • استفاده از Hooks همراه با Context
  • Context‌های چندگانه با استفاده از Hooks
  • ساخت Context با کامپوننت‌های تابعی
  • مفهوم Flux
• درس دهم: ایجاد یک پروژه لیست کتاب‌های کتابخانه
  • لیست کتاب‌های کتابخانه – بخش یکم
  • لیست کتاب‌های کتابخانه – بخش دوم
  • لیست کتاب‌های کتابخانه – بخش سوم
  • آشنایی با مفاهیم Reducers, Actions و State
  • اضافه کردن یک Reducer
  • اضافه کردن localStorage

دوره HTML CSS JavaScript jQuery Bootstrap یک دوره جامع برای آموزش وب‌سازی است که در آن شرکت کنندگان با مباحث اصلی و مهم HTML، CSS، JavaScript، jQuery و Bootstrap آشنا می‌شوند. این دوره برای کسانی مناسب است که قصد دارند توانایی طراحی و توسعه صفحات وب پویا و ریسپانسیو را بدست آورند.

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

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

اهداف اصلی این دوره عبارتند از:

1. ایجاد پایه‌های قوی در زمینه HTML، CSS و JavaScript.
2. آشنایی با تکنیک‌های ریسپانسیو و طراحی صفحات وب سازگار با تلفن همراه.
3. استفاده از فریمورک Bootstrap برای ساخت صفحات وب منعطف و قابل تنظیم.
4. برنامه‌نویسی پویا با JavaScript و افزودن اثرات و تعاملات به صفحات وب.
5. استفاده از کتابخانه jQuery برای ساده‌سازی عملیات برنامه‌نویسی و افزودن افکت‌ها و تعاملات پیچیده.

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