دوره آنلاین (لایو) Front End Developer فرانت اند

دوره آنلاین (لایو) Front End Developer فرانت اند

اهداف دوره Front End Developer فرانت اند:

در انتهای دوره فرانت اند دانشجويان قادر خواهند بود :
1. با مبانی طراحی وب آشنا شوند.
2. گرافیک های طراحی شده را به وب سایت استاتیک تبدیل نمایند.
3. اسلایدرها را طراحی و ایجاد نمایند.
4. با استفاده از جاوا اسکریپت و jQuery صفحات را مدرن و تعاملی سازند.
5. با طراحی ریسپانسیو آشنا شده و با استفاده از bootstrap سایت های ریسپانسیو طراحی نمایند
6. وب سایت طراحی شده را بر روی اینترنت بازکذاری نمایند.
7. با مفهوم Ajax و نحوه کاربرد آن در jQuery آشنا شوند.
8. این دوره شما را در ساخت یک رابط کاربری (User Interface) سریع و جذاب برای وب سایت یا Web Application یاری می‌رساند. استفاده از React در طراحی‌های سمت کاربر (FronEnd) بدلیل بهره‌وری بسیار بالا اخیراً مورد توجه بسیاری از شرکت‌ها قرار گرفته تا جایی که برخی از شرکت‌ها، نسل بعدی رابط کاربری نرم‌افزارهای خود را بر پایه این کتابخانه جاوااسکریپت (JavaScript Library) می‌نویسند. React محصول شرکت facebook است و در حال حاضر شرکت‌های بزرگی در دنیا (نظیر Netflix, Slack, Yahoo, Udemy, Pinterest و ...) از آن استفاده می‌کنند.


مدت دوره Front End Developer:

130


پيش نياز دوره فرانت اند:

ICDL و یا معادل آن


مخاطب دوره Front End Developer:

افرادی که تمایل به طراحی و برنامه نویسی تحت وب دارند با گذراندن این دوره می توانند طراحی ، ایجاد و راه اندازی وب سایت های استاتیک بر روی وب را انجام داده و در صورت تمایل پس از این دوره در کلاس های .Net و یاPHP جهت برنامه نویسی وب شرکت نمایند.
علاقه‌مندان به برنامه نویسی Front End ، افرادی که با Vuejs و Angularjs کار کرده‌اند و قصد یادگیری Reactjs را دارند، افرادی که خود را Fullstack می‌دانند و قصد یادگیری و استفاده از کتابخانه‌ای سریع برای UI برنامه‌های خود دارند.


سرفصل دوره فرانت :

HTML5 – CSS3
• آشنایی با مفهوم و تاریخچه وب و زیرساختهای نرم افزاری و سخت افزاری لازم برای ایجاد ،استقرار و نگهداری وب سایت ها
• معرفی مفاهیم شبکه ای مرتبط با وب مانند Domain،Host،Web Server،DNS Server
• معرفی مفاهیم نرم افزاری مرتبط با طراحی وب مانند HTML و CSS
• بررسی مفهوم Markup Language
• بررسی مفهوم Cascading Style Sheet
• تشریح نحوه عملکرد Web Browser ها
• بررسی مفهوم Search Engine
• بررسی مفهوم SEO
• بررسی مفهوم UI (واسط کاربری)
• بررسی مفهوم UX
• بررسی مفهوم Responsive (واکنش گرا)
• بررسی مفهوم Tag و ساختار یک سند HTML استاندارد
• معرفیDOCTYPE
• آموزش روش آماده سازی بستر طراحی وب و نرم افزار های مربوطه
• ارائه طبقه بندی تگ ها مانند Text Level و Block Level،List و …
• بررسی نکات مربوط به List ها
• بررسی پاراگراف ها ،span و کلیه تگ های طبقه بندی شده
• معرفی مفهوم Attribute
• معرفی مفهوم Comment و دلائل استفاده از آن
• معرفی و ارائه مثال از تگ های مربوط به هر طبقه
• بررسی استاندارد های نامگذاری المانها
• بررسی مفهوم Validation در اسناد HTML
• معرفیCSS
• بررسی نقش CSS در آرایش تگ ها
• بررسی روشهای مختلف اعمال Style روی تگها مانند Inline،Internal،External
• معرفی انواع Selector ها در CSS
• بررسی نحوه استفاده از تصاویر در سند HTML
• بررسی انواع File Path
• بررسیImage Map
• بررسی نحوه استفاده از تصاویر در Background
• بررسی نکات مربوط به استفاده از تصاویر در Background مانند Repeat و …
• بررسی نحوه استفاده از صدا و تصویر در Background
• معرفیIFrame و روش استفاده از آن
• ایجاد انیمیشن با تصاویر و ابزار های مربوطه
• بررسی نحوه استفاده از رنگ
• بررسی نحوه استفاده از فونت
• بررسی نکات مربوط به فونت مانند Size و Weight و …
• معرفی انواع فونت ها و پسوندهای مربوطه
• بررسی روش استفاده از کاراکترهای خاص در سند HTML
• معرفی مفهوم Hyper Link و نکات مربوط به Navigation
• آشنایی با مفهوم Anchor و Hash
• بررسی روش ایجاد منو و انواع آن
• بررسی روشهای مختلف آدرس دهی لینکها مثلا Internal و External
• بررسی تگ Table و اجزاء مختلف آن
• بررسی معایب و مزایایTable
• بررسی نحوه استفاده از Table برای چیدمان
• بررسی نحوه اختصاص اندازه به المانها
• بررسی نکات مربوط به Formatting در Table
• بررسی نکات جدیدHTML5 در جداول
• بررسی مفهوم Layout هایTable Less
• بررسیDIV و نکات مربوطه در حیطهPositioning
• بررسی روش های تقسیم بندی صفحه
• بررسی مفاهیمMargin و Padding
• بررسیBorder و نکات مربوطه
• بررسی نکات مربوط به Text مانند Direction ،Decoration،Align و …
• بررسی نکات مربوط به Positioning در CSS3
• بررسی نکات حرفه ای تر در CSS3 مانند Animation و Transition Bottom of Form
• بررسی انواع Effect ها در CSS3
• بررسی نکات مربوط به Transform در CSS3
• بررسی انواع Layout ها
• معرفی مفهوم Float و Absolute و …
• معرفی مفاهیم مرتبط با Boxing
• بررسیForm و انواع Input ها
• معرفی تگ های مفهومیHTML5
• بررسیCanvas و نحوه استفاده از آن
• بررسیSVG و نحوه استفاده از آن
• بررسی و نحوه استفاده از وب فونتها Font Face
• معرفی Media Query
• معرفی و پیاده سازی Responsive Layout
Adobe Dreamweaver
• آشنایی با رابط کاربری Dreamweaver
• ابزار مدیریت سایت
• شخصی سازی محیط برنامه
• طراحی و ایجاد صفحات پایه
• ایجاد جداول
• فرمهای تعاملی
• ایجاد انواع لیست ها
• استفاده از Frames و Frameset ها
• اضافه کردن عناصر مالی مدیا
• ایجاد Style Sheet برای صفحات وب
• کارکردن با عناصر Div و AP
• ایجاد و استفاده از قالب برای Dreamweaver
JavaScript & jQuery
• بررسی مفهوم Client Side کد و لزوم وجود امکان برنامه نویسی سمت کلاینت
• معرفی زبان برنامه نویسیJava Script و روش استفاده از آن در یک سند HTML
• بررسی نکات مربوط به تگ Script و محل نوشتن دستورات
• معرفی مفهوم متغیر و ارائه نکات مربوط به متغیر ها در Java Script
• بررسی متغیر هایLocal و Global
• بررسی مفهوم Notation و روش رعایت آن در Java Script
• بررسی فایل هایJS و روش استفاده از آنها
• بررسی انواع عملگرها
• معرفی مفهوم شرط و ساختارهای بررسی شرط
• بررسی دستور switch
• بررسی مفهوم حلقه و موارد نیاز به حلقه های تکرار
• بررسی انواع حلقه های تکرار
• بررسی حلقه هایwhile و for و …
• بررسی روش تعریف تابع و نکات مربوطه
• بررسی مفهوم رویداد و روش اداره آن
• بررسی تنوع رویداد های المانها
• معرفیDOM و اجزاء آن و روش دسترسی به آنها
• بررسی انواع روشهای دسترسی به المانها مانند دسترسی بر اساس id و …
• بررسی روش درج، حذف و ویرایش المانها و Node ها
• بررسی روش دسترسی به Node های پدر و فرزند و حالتهای متنوع دسترسی
• معرفیinnerText و innerHTML
• معرفیFramework و مفهوم آن و انواع Framework هایJava Scrip
• معرفیjQuery و مزایای استفاده از آن
• بررسی روش استفاده از jQuery در یک سند HTML
• بررسی و مقایسه عملیات مختلف مانند اداره رویداد،فراخوانی توابع،مقداردهی به مشخصه ها در jQuery و Java Script
• معرفیSelector هایjQuery و نکات مربوطه
• آشنايی با jQuery و نحوه نصب و شیوه کار با آن
• آموزش قواعد نوشتاری در jQuery
• آموزش دسترسی به المان هایhtml در jQuery
• Select To Every Things آموزش دسترسی به تمام المان ها
• ID Selector آموزش دسترسی به وسيله شناسه
• Tag Name Selector آموزش دسترسی به وسيله ی نام تگ
• Class Selector آموزش دسترسی به وسيله ی کلاس
• Attribute Selector آموزش دسترسی به وسيله یAttribute
• Selecting Visibility آموزش دسترسی توسط نمايش و عدم نمايش
• Selecting Parents and Children آموزش دسترسی توسط فرزند و پدر
• آموزش رويداد ها و معرفیEffect ها در jQuery
• معرفی مفهوم AJAX و بررسی روش پیاده سازی آن در Java Script و jQuery و مزایای آن
Bootstrap
• معرفی مفهوم CSS Framework
• معرفی و بررسی تاریخچهBootstrap
• بررسی روش استفاده از Bootstrap در یک سند HTML
• معرفیGrid System
• معرفی انواع سایزها و کلاسهای مرتبط و روش تشخیصResolution کاربر
• معرفیResponsive Layout در Bootstrap
• بررسیTypography با Bootstrap
• بررسی روش ایجاد فرم و کلاسهای مرتبط
• بررسی روش پنهان سازی بخش هایی از سند
• بررسی نکات و کلاسهای مرتبط با جدول
• بررسی نکات و کلاسهای مرتبط با تصاویر
• بررسی روش استفاده از Icon ها
• بررسی روش استفاده از Helper ها
• بررسی نکات . کلاسهای مرتبط با دکمه
• بررسی ارائه مثال از موارد زیر :

o Button groups
o Button dropdowns
o Input groups
o Nav
o Navbar
o Breadcrumbs
o Pagination
o Labels
o Badges
o Jumbotron
o Page header
o Thumbnails
o Alerts
o Progress bars
o Media object
o List group
o Panels
o Wells
o Modal Form
o Affix
o Scrollspy
o Carousel


سرفصل دوره React JS:

Introduction
1- What’s react
2- Understanding single page applications
3- React alternatives
4- Javascript and ecma script
5- Javascript fast review
6- Project settings:
a. Npm
b. Package.json
c. Babel
7- Writing first react code
Next Generation JavaScript
1- Module (Export import)
2- Let const
3- Arrow functions
4- Classes
5- Spread & rest operators
6- Destructuring
7- Reference and primitive types
8- Array functions
React Basic features part 1
1- Build workflow
2- Create react app and folder structure
3- Jsx
4- Working with components
5- Props
React Basic features part 2
1- State
2- Events and methods
3- defaultProps
4- props.children
5- Render content conditionally
6- Single source of truth
User interface in react
1- Add style sheet
2- Inline style
3- Set style dynamically
4- Media queries
5- Css modules
6- Dynamic content
7- Update state immutably
8- Flexible list
React Basic features part 3
1- Component LifeCycle
2- Forms
3- Lifting state up in forms
4- Split an app to components
5- Component lifecycle in action
6- Pure function
7- How react update the app & component tree (Reconciliation)
8- HOC
Create a Real application
1- Planning an app in react
2- Setup project
3- Add style modules
4- Some components such as core, layout and …
5- Add prop types
6- Implementing Build controls, order, modal, backdrop, logo
Finalize the real application
1- Implementing ajax calls, orders
2- Ajax calls
3- Asynchronous programming
4- Promise & Deferred
5- API Json
6- Form validations
7- React router
More needed info
1- State management summary (redux flow)
2- Hooks and functional components summary
3- Error Boundaries
4- Debug react app
5- Deploy the app to the web

جزئیات سرفصل آموزشی دوره Front End Developer را از طریق لینک زیر دریافت کنید:


سرفصل دوره سماتک 



سرفصل دوره سماتک