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

خلاصه دوره برنامه ‌نویسی فرانت‌اند Front End :

اگر علاقه‌مند هستید که توسعه وب را یاد بگیرید و در صنعت فناوری، شغلی پیدا کنید، دوره برنامه نویسی فرانت‌اند Front End را ازدست‌ندهید! در این دوره 130 ساعت، شما یاد می‌گیرید که طراحی‌های وب را از طریق زبان‌هایی مانند: HTML، CSS و JavaScript پیاده‌سازی کنید. همچنین کار با فریمورک‌ها و ابزارهایی مانند: jQuery، Bootstrap، React JS، Adobe Dreamweaver را می‌آموزید.

چرا React؟

زیرا استفاده از React در طراحی‌های سمت کاربر (Front End) بدلیل بهره‌وری بسیار بالا اخیراً مورد توجه بسیاری از شرکت‌های بزرگ قرارگرفته‌است تا جایی که برخی از آن‌ها، نسل بعدی رابط کاربری نرم‌افزارهای خود را بر پایه این کتابخانه جاوا اسکریپت می‌نویسند. React محصول شرکت facebook است و درحال حاضر شرکت‌های بزرگی در دنیا (نظیر Netflix, Slack, Yahoo, Udemy, Pinterest و ...) از آن استفاده می‌کنند. بنابراین برای ساخت یک رابط کاربری (User Interface) سریع و جذاب برای وب سایت یا Web Application خود به React نیاز پیدا خواهیدکرد.

دوره برنامه نویسی فرانت‌اند Front End به نحوی طراحی شده‌است که برای مبتدیان بسیار مناسب‌باشد. در شروع این دوره با اصول اولیه HTML آشنا می‌شویم و یک صفحه وب ساده می‌سازیم. در پایان این دوره، وب سایت طراحی‌شده خود را توسعه‌داده و منتشر می‌کنیم! همچنین در طول دوره برنامه نویسی فرانت‌اند Front End ما برروی تمرین‌ها و پروژه‌های کدنویسی تمرکز خواهیم‌کرد و وقت شما با مرور پاورپوینت‌های طولانی و غیرضروری تلف نخواهدشد. پس از اتمام این دوره، شما یک نمونه کار قوی برای نشان‌دادن به کارفرمایان بالقوه خواهیدداشت!

اهداف دوره برنامه ‌نویسی فرانت‌اند Front End :

در انتهای دوره برنامه نویسی فرانت اند Front End دانشجويان قادر خواهندبود که:
    1. مبانی طراحی وب را توضیح‌دهند.
    2. گرافیک‌های طراحی‌شده را به وب سایت استاتیک تبدیل نمایند.
    3. اسلایدرها را طراحی و ایجاد نمایند.
    4. با استفاده از جاوا اسکریپت و jQuery صفحات را مدرن و تعاملی سازند.
    5. با طراحی ریسپانسیو آشناشده و با استفاده از bootstrap سایت‌های ریسپانسیو طراحی نمایند.
    6. وب سایت طراحی‌شده را برروی اینترنت بارگذاری نمایند.
    7. مفهوم Ajax و نحوه کاربرد آن در jQuery را توضیح دهند.

مدت دوره برنامه ‌نویسی فرانت‌اند Front End :

130ساعت

پيش‌نياز دوره برنامه ‌نویسی فرانت‌اند Front End :

ICDL و یا معادل آن

مخاطب دوره برنامه ‌نویسی فرانت‌اند Front End :

    • افرادی که به برنامه نویسی Front End علاقه‌مند هستند.
    • افرادی که با Vue js و Angular js کار کرده‌اند و قصد یادگیری React js را دارند.
    • افرادی که خود را برنامه نویس Full stack می‌دانند و قصد یادگیری و استفاده از کتابخانه‌های سریع برای UI برنامه‌های خود را دارند.

پاسخ به سوال‌های شما درباره‌ دوره برنامه ‌نویسی فرانت‌اند Front End

در ادامه به متداول‌ترین سوالاتی که دانشجوها از ما در مورد دوره برنامه ‌نویسی فرانت‌اند Front End می‌پرسند، پاسخ می‌دهیم.

چگونه یک توسعه دهنده فرانت اند Front End شویم؟

با یادگیری HTML و CSS و شرکت در دوره برنامه ‌نویسی فرانت ‌اند Front End شروع کنید. منتظر نمانید تا به طور کامل براین مباحث مسلط شوید و در اسرع وقت شروع به ساخت پروژه‌های ساده کنید. برای شروع، می‌توانید با استفاده از HTML و CSS، نمای وب‌سایت‌ مورد علاقه خود را بازسازی کنید. تا جایی که ممکن است بسیاری از این پروژه ها را انجام دهید.

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

چقدر طول می‌کشد تا یک توسعه دهنده فرانت اند Front End شوید؟

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

با این حال، اگر شما یک مبتدی هستید، ممکن است بین 3 تا 6 ماه طول بکشد تا یادگیری شما کامل شود و به عنوان یک توسعه‌دهنده مبتدی کار پیدا کنید. اگر قبلاً با برخی از فناوری‌های فرانت اند آشنایی داشته‌باشید، ممکن است بین 1 تا 3 ماه یادگیری شما زمان ببرد.

آنچه اهمیت دارد این است که در حین یادگیری با ساخت پروژه‌های متفاوت تا آنجا که می‌توانید تمرین کنید. شما همچنین می‌توانید برای تسریع روند یادگیری خود در دوره برنامه ‌نویسی فرانت‌اند Front End شرکت کنید و یا از توسعه دهندگان با تجربه تر بازخورد بخواهید.

کار یک توسعه دهنده فرانت اند Front End چیست؟

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

آیا می‌توانیم با دیپلم یک توسعه دهنده فرانت اند Front End شویم؟

معمولاً مدرک کارشناسی مرتبط مورد نیاز است، اما مدرک کاردانی با تجربه کاری و گواهینامه مهارت در برنامه نویسی یا شرکت در دوره برنامه ‌نویسی فرانت‌اند Front End می‌تواند برای برخی از کارفرمایان کافی باشد.

یک توسعه دهنده فرانت اند Front End چه تفاوتی با یک طراح وب دارد؟

یک طراح وب ایده‌ها را به طرح‌های بصری جذاب تبدیل می‌کند ولی یک توسعه دهنده فرانت اند Front End طرح‌ها را به یک وب سایت کاربردی تبدیل می‌کند و کار آن‌ها بیشتر ماهیت فنی دارد.

سرفصل دوره برنامه ‌نویسی فرانت‌اند Front End :

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

    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 را از طریق لینک زیر دریافت کنید: