یونیکسیک

آموزش فرانت اند

دانشجو پس از پایان دوره در کلیه مباحث زیر به تسلط کامل خواهد رسید.

  • آموزش JavaScript بصورت کامل
  • آموزش TypeScript بصورت کامل
  • آموزش کامل Node.js و NPM
  • آموزش SASS
  • آموزش CSS in JS
  • آموزش Animation
  • آموزش Material Design
  • آموزش SEO بصورت تکنیکال
  • آموزش Clean Code
  • آموزش Object Oriented Programming
  • آموزش کامل ReactJS
  • آموزش کامل NextJS

اهداف دوره تخصصی Front-End

در این دوره آموزشی به تسلط کامل در حوزه فرانت اند دست خواهید یافت و به راحتی می توانید در شرکت ایران و خارج از کشور مشغول فعالیت شوید.
تمامی پروژه های ساخته شده بر اساس نیازهای بازار کار داخل و خارج ایران می باشد و دانشجو پس از پایان دوره با حداقل چالش ها در بازار کار مواجه خواهد شد و این به دلیل پیاده سازی انواع پروژه های نیاز بازار کار در کلاس می باشد.
آموزشهای این دوره کاملا مبتنی بر آخرین تکنولوژیهای روز دنیا و 100٪ عملی و پروژه محور بوده و دانشجو پس از گذراندن این دوره با اکثر چالشهای Front-End درگیر خواهد شد.
آموزش اصول حرفه ای برنامه نویسی شی گرا همراه با Design Pattern های معروف آن از جمله اهداف این دوره می باشد.
آموزش ReactJS همراه با تمامی ساختارهای آن در قالب کاملا پروژه محور از اهداف این دوره می باشد.

فصل اول – مفاهیم اولیه و مقدماتی

بخش اول

  • مروری بر CSS3 و انیمیشن ها
  • تسلط کامل بر طراحی حرفه ای صفحات مطابق با جدیدترین استانداردها
  • معرفی و نصب محیط برنامه نویسی
  • طراحی حرفه ای و اصولی صفحات وب
  • کار با محیط Terminal و نکات آن
  • تفاوت انواع شیوه های برنامه نویسی Front-End
  • آموزش کامل کدنویسی به شیوه Component محور
  • آموزش کامل معماری های CSS
  • آموزش کامل معماری BEM
  • ساخت پروژه عملی Navigation مخصوص موبایل
  • ساخت پروژه عملی Todo List
  • افزودن قابلیت List و Create و Edit و Remove
  • افزودن قابلیت Multi Select
  • آموزش کامل کار با Dynamic Event
  • آموزش کامل و حرفه ای AWD و RWD

بخش دوم

  • ایجاد انیمیشن – Animation در JavaScript
  • آموزش کار با JSON و تفاوت آن با XML
  • آموزش کاربردی ECMAScript 6
  • آموزش کاربردی Arrow Functions در JavaScript
  • مرور کار با کلاس ها (Classes) در JavaScript
  • آموزش Enhanced Object Literals در JavaScript
  • آموزش String interpolation در JavaScript
  • آموزش Destructuring در JavaScript
  • آموزش Default در JavaScript
  • آموزش Spread در JavaScript
  • آموزش Spread + Object Literals در JavaScript
  • آموزش Rest در JavaScript
  • آموزش Let در JavaScript
  • آموزش Const در JavaScript
  • آموزش For..of در JavaScript
  • آموزش Unicode در JavaScript
  • آموزش Modules And Module Loaders در JavaScript
  • آموزش Set در JavaScript
  • آموزش WeakSet در JavaScript
  • آموزش Map در JavaScript
  • آموزش WeakMap در JavaScript
  • آموزش Proxies در JavaScript
  • آموزش Symbols در JavaScript
  • آموزش Inheritable Built-ins در JavaScript
  • آموزش New Library در JavaScript
  • آموزش Binary and Octal در JavaScript
  • آموزش Promises در JavaScript
  • آموزش Reflect در JavaScript
  • آموزش Tail Call Optimization در JavaScript

بخش سوم

  • انواع Function ها در JavaScript
  • آموزش با کتابخانه ی JQuery
  • آموزش با Selectors در JavaScript
  • آموزش با Attributes در JavaScript
  • تغییر CSS ها در JQuery
  • مدیریت رخداد ها – Events در JavaScript
  • آموزش با صفحات SPA
  • آموزش با AJAX
  • آموزش با Effects در JavaScript
  • ساخت یک صفحه SPA کامل
  • خواندن اطلاعات از یک سند TXT در JavaScript
  • آموزش با مفهوم Bind کردن اطلاعات در JavaScript
  • ذخیره سازی موقت اطلاعات با استفاده از Local Storage و Session Storage
  • کار با اسناد JSON در AJAX
  • انواع متد ها در AJAX
  • آموزش با مفهوم REST
  • ساخت کامل مدیریت محتوای موقت – نظیر دانشجویان، محصولات و… با قابلیت Read، Delete، Update و Creat (CRUD)
  • تفاوت برنامه نویسی Asynchronous و Synchronous در JavaScript
  • کار با Timer با استفاده از Set Interval و Set Timeout در JavaScript
  • ساخت یک صفحه ی Under Construction در JavaScript
  • کار با Google Map & Google Analytics
  • کار با کتابخانه Lodash

فصل دوم – CSS Preprocessors, Task Runner

بخش اول

  • آشنایی با CSS Preprocessors
  • آشنایی با انواع Preprocessor ها نظیر LESS و SASS و SCSS
  • متغیر ها در SCSS – Variables
  • آشنایی با @-Rules and Directives
  • آشنایی با Control Directives & Expressions
  • آشنایی با Mixin Directives
  • آشنایی با Extend
  • آشنایی با Nesting
  • کار با Operators
  • کار با Functions
  • آموزش کامل Function Directives
  • آموزش کامل پیکسل به تابع EM
  • رنگ با نقشه های SASS
  • آموزش کاملSass و BEM(Block Element Modifier)
  • الگو BEM
  • استفاده از BEM در پروژه بصورت کاربردی
  • آموزش کامل و اصولی BEM Mixins
  • استایل Headlines
  • اصلاح کننده های Headlines
  • استایل عناصر فرم
  • آموزش کامل SMACSS و SASS
  • SMACSS در گردش کار
  • Component طرح بندی پنل
  • آموزش کامل سیستم شبکه Sass
  • آموزش کامل پیکربندی شبکه
  • آموزش کامل طرح بندی ستون
  • استفاده از Media Query Mixin
  • ایجاد تابع برای طرح بندی Flexbox
  • آموزش کامل ایجاد Mixins قدرتمند
  • Smarter Mixins با آرگومان های null و کلمه کلیدی
  • افزودن منطق Conditional به Stylesheets
  • آموزش کامل مرتب سازی مقادیر در نقشه ها
  • نوشتن Loops با for@
  • آموزش کامل Loop از طریق لیست ها با each@
  • آموزش کامل Loop از طریق داده در نقشه با each@
  • نقشه ها و Loop
  • مدیریت خطاها با error and @warn@
  • آموزش کامل اشکال زدایی Sass با Sourcemaps

بخش دوم

  • آموزش کامل ساختن فایل های SASS با Gulp
  • آموزش کامل ساخت و بهینه سازی فایل های Javascript با Gulp
  • ایجاد task runner توسعه برای نوشتن
  • معرفی و نصب Gulp.js
  • ایجاد Task gulp
  • آموزش کامل استفاده از کتابخانه های شخص ثالث Gulp
  • کامپایل Sass با Gulp
  • آموزش کامل افزودن Source Maps به SaSS
  • آموزش کامل بهبود Gulp Task Pipelines
  • آموزش کامل برنامه نویسی JSHint و JSCS
  • آموزش کامل کار باCSS
  • آموزش کامل کامپایل کردن CSS
  • کار با HTML
  • اضافه کردن فایل های JavaScript به HTML
  • استفاده از nodemon در یک Gulp
  • آموزش کامل همگام سازی مرورگر
  • آموزش کامل هماهنگ سازی مرورگرهای مختلف
  • آموزش کامل کار با فونت ها
  • آموزش کامل بهینه سازی تصاویر
  • آموزش کامل ذخیره سازی HTML
  • آموزش کامل بهینه سازی CSS
  • آموزش کامل بهینه سازی JavaScript
  • آموزش کامل راه اندازی کار HTML
  • آموزش کامل اجرای تست های سرور در HTML
  • آموزش کامل اجرای وظایف Refactored
  • آموزش کامل Loaders و Plugins
  • آموزش کامل راه اندازی Webpack
  • آموزش کامل Webpack Validator
  • آموزش کامل Webpack Dev Server
  • آموزش کامل پیکربندی مسیر
  • آموزش کامل Minifying و Source Maps
  • آموزش کامل توسعه در مقابل محیط های تولید
  • اضافه کردن Webpack
  • کار با Webpack
  • اشکال زدایی Webpack
  • وابستگی های صریح
  • بارگیری CSS
  • استفاده از Style و CSS Loaders
  • مفهوم Hot Module Replacement
  • تست با Webpack
  • راه اندازی Karma
  • استفاده از Karma با Webpack
  • استفاده از Karma با Webpack Solution
  • محدوده پوشش و میان افزار Webpack
  • بهینه سازی وب پک
  • ES6ify
  • Tree Shaking
  • افزودن Tree Shaking
  • تقسیم کد
  • استفاده از System.import()
  • افزودن Commons Chunking
  • ذخیره سازی طولانی مدت
  • آموزش کامل استخراج CSS

فصل سوم – ReactJS, NextJS

بخش اول – تکنیک ها و ویژگی های ECMAScript

  • آشنایی با ECMAScript
  • متغیرها – Variables
  • عملگرها – Operators
  • شرط ها – Decision Making
  • حلقه های تکرار – Loops
  • انواع توابع – Functions
  • رخدادها – Events
  • کار با Page Redirect
  • کار با Void Keyword
  • Objects
  • Number
  • Boolean
  • Strings
  • متدهای جدید کار با رشته ها – New String Methods
  • آرایه ها – Arrays
  • RegExp
  • Collections
  • Classes
  • Promises
  • Modules
  • Error Handling
  • Validations
  • Animation
  • Multimedia
  • Debugging

بخش دوم – آموزش شی گرایی

  • الگوهای مختلف برنامه نویسی در طول زمان (Programming Paradigms)
  • اصطلاحات و مبانی برنامه نویسی شی گرا (OOP Basic Concepts)
  • اصول برنامه نویسی شی گرا (OOP Principles)
  • Abstraction
  • Polymorphism
  • Inheritance
  • Encapsulation
  • مدل سازی و طراحی شی گرا (Object Oriented Design and Modeling)
  • اصول طراحی شی گرا (S.O.L.I.D Principles)
  • Single Responsibility Principle (SRP)
  • Open-Closed Principle (OCP)
  • Liskov Substitution Principle (LSP)
  • Interface Segregation Principle (ISP)
  • Dependency Inversion Principle (DIP)

بخش سوم – ویژگی های React

  • نصب react با استفاده از npm
  • ایجاد اولین پروژه با روش های مختلف CRA و Vite و Webpack
  • نمایش و بررسی directory پروژه و معرفی بخش های آن
  • معرفی و کار با JSX
    • Nested Elements
    • Attributes
    • JavaScript Expressions
    • Styling
    • Comments
    • Naming Convention
  • بررسی مثال هایی از JSX
  • متغیرها در JSX
  • استفاده از توابع، شرط ها و آبجکت ها در JSX
  • معرفی و کار با Component
  • مفهوم Lifecycle
  • کار با State ها در React
  • معرفی و کار با Props
  • Validating Props
  • معرفی و کار با Component API
  • تعریف Component Life Cycle
  • کار با Form ها در React
  • کار با Event ها در React
  • معرفی و کار با Refs
  • معرفی و کار با Keys
  • مفهوم Routing و کار با URL ها
    • Install a React Router
    • React Router Dom
    • Add a Router
  • معرفی و کار با Zustand
  • آشنایی با Lazy Loading و Code Splitting
  • پیاده‌سازی HOC (Higher-Order Components)
  • استفاده از Context API و Redux
  • استفاده از ابزارهای تست (Jest, Enzyme)
  • استفاده از Fetch API و Axios برای درخواست‌های HTTP
  • معرفی روش های مختلف استایل دهی (CSS, Styled-components, Sass)
  • پروژه عملی ساخت یک فروشگاه اینترنتی کامل