آکادمی برنامه نویسان

لوگو
ورود ثبت نام
قرارداد همکاری

کمپ متخصص فرانت اند

برای دوره بعدی خبرم کن . خبرم کن

توضیحات دوره

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

پیش نیازها

توانایی کار با کامپیوتر و اینترنت

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

1- افرادی که علاقمند به فرانت اند و طراحی سایت  هستند.

٢-طراحان سایت

سرفصل دوره

 

  • آشنایی با HTML
  • Tag ها و Element ها
  • Attribute چیست
  • تگ <div> و <span>
  • Comment ها
  • ساختار یک فایل HTML
  • عنصر <html>
  • عنصر <head>
  • عنصر <title>
  • عنصر <body>
  • مبانی فرمت کردن متن
  • Float
  • ایجاد سرصفحه ها
  • ایجاد پاراگراف ها با استفاده از عنصر <p>
  • ایجاد خط فاصله با استفاده از عنصر‎<br />‎
  • عنصر <b>
  • عنصر <i>
  • عنصر‎<hr />‎
  • عنصرهای جمله ای
  • عنصر <em>برای افزودن تاکید
  • عنصر <strong>برای افزودن تاکید قوی
  • عنصر <q>برای نقل قول های کوتاه
  • عنصر <code>برای نمایش سورس کد
  • لیست ها
  • استفاده از عنصر <ul>
  • لیست های دارای شمارش
  • لیست های تو در تو
  • کار با تصاویر
  • صفت Src
  • صفت Alt
  • پیوند ها
  • صفت Href
  • صفت Target
  • استفاده از Anchor
  • لینک کردن نام، تصویر و…
  • فرم ها
  • آشنایی با فرم ها
  • ایجاد یک فرم با استفاده از عنصر <form>
  • صفت action
  • صفتmethod
  • صفت id
  • و عنصر <form>
  • ورودی متن
  • دکمه ها
  • چک باکس ها
  • دکمه های رادیویی
  • باکس های انتخاب
  • باکس های انتخاب فایل
  • کنترل های مخفی
  • ایجاد لیبل برای کنترل های با استفاده از عنصر <label>
  • عنصر های معنایی
  • Header
  • Nav
  • Footer
  • Article
  • Section
  • قابلیت های جدید HTML5
  • اعتبار سنجی فرم ها
  • Cascading Style Sheet
  • آشنایی با CSS
  • روش های مختلف استفاده از CSS در صفحه
  • عنصر <link>
  • عنصر <style>
  • مزایای CSS های External
  • مشخصه های CSS
  • کنترل کردن متن
  • مشخصه font-family
  • مشخصه font-size
  • مشخصه font-weight
  • مشخصه font-style
  • فرمت کردن متن
  • مشخصه color
  • مشخصه text-align
  • مشخصه text-decoration
  • مشخصه text-shadow
  • مشخصه text-transform
  • مشخصه letter-spacing
  • مشخصه word-spacing
  • مشخصه white-space
  • مشخصه direction
  • کلاس های شبه متن
  • شبه کلاس first-letter
  • شبه کلاس first-line
  • سلکتور ها
  • انتخابگر Class
  • انتخابگر ID
  • انتخابگر فرزند
  • انتخابگر هم نوع مجاور
  • انتخابگر عمومی
  • انتخابگر صفت
  • طول ها
  • واحدهای نسبی
  • واحدهای مطلق
  • درصدها
  • آشنایی با مدل Box
  • مثالی از کاربرد مدل Box
  • مشخصه های Border
  • مشخصه padding
  • مشخصه margin
  • ابعاد یک Box
  • باگ مدل Box Internet Explorer
  • مطالبی بیشتر در زمینه Cascading Style Sheet ها
  • لینک ها
  • پس زمینه ها
  • مشخصه background-color
  • مشخصه background-image
  • مشخصه background-repeat
  • مشخصه background-position
  • مشخصه background-attachment
  • مشخصه background (شکل کوتاه)
  • لیست ها
  • مشخصه list-style-type
  • مشخصه list-style-position
  • مشخصه list-style-image
  • مشخصه list-style (شکل کوتاه)
  • جدول ها
  • مشخصه های خاص جدول ها
  • مشخصه border-collapse
  • مشخصه border-spacing
  • مشخصه table-layout
  • شبه کلاس های‎:focus و‎  :active
  • مشخصه های دیگر
  • مشخصه cursor
  • مشخصه display
  • مشخصه visibility
  • مختصات دهی و چینش با استفاده از CSS
  • مشخصه Position
  • مختصات دهی به صورت Relative
  • مختصات دهیFixed
  • مشخصه z-index
  • شناور کردن با استفاده از مشخصه float
  • مشخصه clear
  • واحد های اندازه گیری در CSS
  • بررسی و کاربرد واحد اندازه گیری px
  • بررسی و کاربرد واحد اندازه گیری em
  • بررسی و کاربرد واحد اندازه گیری in
  • بررسی و کاربرد واحد اندازه گیری cm
  • بررسی و کاربرد واحد اندازه گیری mm
  • بررسی و کاربرد واحد اندازه گیری Percentage
  • کجا باید از چه واحدی استفاده کنیم
  • آشنایی با رنگ ها
  • استفاده از نام رنگ
  • استفاده از کد ترکیبی (عدد دهدهی)- RGB
  • استفاده از کد ترکیبی (عدد مبنای 16)- Hex
  • بررسیBox Model
  • Box Model چیست
  • بررسی Border
  • بررسی Margin
  • بررسی Padding
  • ابعادBox
  • بررسی height
  • بررسی width
  • بررسی line-height
  • بررسی min-height
  • بررسی max-height
  • برسیmin-width
  • بررسی max-width
  • PositionهاCSS
  • بررسی و کاربرد Static Position
  • بررسی و کاربرد Absolute Position
  • بررسی و کاربرد Relative Position
  • بررسی و کاربرد Fixed Position
  • کار با CSS3 و قابلیت های جدید آن
  • Advanced Selectors
  • گرد کردن گوشه ها- Rounded Corners
  • حاشیه تصویری- Border Image
  • سایه ها- Box Shadow & Text Shadow
  • رنگ ها- Colors
  • RGBA
  • Gradient
  • Transform چرخش ، جابجایی و…
  • قاب های چند ستونی- Multi Column Layout
  • استفاده از فونت در وب- Web Fonts
  • متحرک سازی اجزای صفحه - Animations and Transitions
  • Box Sizing
  • Media Queries
  • پس زمینه- Background
  • پس زمینه های متعدد- Multiple Backgrounds
  • Background-size
  • Background-clip
  • background-origin
  • Text-overflow
  • Word-wrap
  • Word-break
  • چگونه صفحات وب ما در تمام مرورگرها یکسان نمایش داده شود
  • ساخت سایت تک صفحه ای با html css flexbox
  •  

Flex

  • CSS Flex Container
  • Parent Element (Container)
  • The flex-direction Property
  • The flex-wrap Property
  • The flex-flow Property
  • The justify-content Property
  • The align-items Property
  • The align-content Property
  • Perfect Centering
  • The CSS Flexbox Container Properties
  • CSS Flex Items
  • Child Elements (Items)
  • The flex-grow Property
  • The flex-shrink Property
  • The order Property
  • The flex-basis Property
  • The flex Property
  • The align-self Property
  • The CSS Flexbox Items Properties
  • CSS Flex Responsive
  • Responsive Flexbox
  • Responsive Image Gallery using Flexbox
  • Responsive Website using Flexbox
  • پروژه عملی

بوت استرپ ورژن ۵

  • معرفی و نصب و راه اندازی بوت استرپ
  • آشنایی با فایل های موجود در پوشه دانلود شده
  • آشنایی با نسخه های مختلف بوت استرپ
  • پشتیبانی در مرورگر های مختلف
  • مفهوم RFS
  • راست چین کردن پروژه های بوت استرپ
  • شخصی سازی کردن بوت استرپ
  • Reboot در بوت استرپ
  • آشنایی با تایپوگرافی
  • Breakpoint ها و Media Query ها
  • کار با Containers
  • سیستم شبکه یا Grid System در بوت استرپ
  • مفاهیم ردیف و ستون
  • مفهوم Gutters
  • مفهوم z index
  • استفاده از CSS Grid در بوت استرپ
  • استفاده از FlexBox در بوت استرپ
  • جداول در بوت استرپ
  • Figures در بوت استرپ
  • کار با فرم ها
  • کار با اینپوت ها
  • تگ های select , option , textarea
  • اعتبار سنجی ها
  • کار با تصاویر در بوت استرپ
  • کار با Component های بوت استرپ
  • کار با کامپوننت های Accordion - Alerts - Close button - Dropdowns - Offcanvas - Placeholders - Progress - Spinners - Toasts
  • کامپوننت های Buttons، Button group
  • کامپوننت Badges
  • کامپوننت های Progress، Pagination
  • کامپوننت های Alert، List group
  • کامپوننت Tooltip
  • کامپوننت Forms
  • کامپوننت های Dropdowns، Popovers
  • کامپوننت Breadcrumb
  • کامپوننت های Input group، Modal
  • کامپوننت Collapse
  • کامپوننت های Navs و Carousel
  • کامپوننت های Navbar، Scrollspy
  • کامپوننت Card
  • کار با Helpers
  • آشنایی با Utilities
  • Background
  • Borders
  • Colors
  • Display property
  • Float
  • Interactions
  • Opacity
  • Overflow
  • Position
  • Shadows
  • Sizing
  • Spacing
  • Text
  • Vertical alignment
  • Visibility

جاوااسکریپت

  • معرفی جاوااسکریپت
  •   چرا زبان برنامه نویسی؟
  •  چرا زبان جاوااسکریپت؟
  •  تاریخچه
  •  نسخه ها -مزایای استفاده از این زبان
  • نصب و راه اندازی اولین پروژه
  •  -طرق مختلف استفاده در مرورگر
  •  اولین برنامه Hello World
  • مبانی برنامه نویسی به زبان جاوا اسکریپت
  • Comments
  •  Variables 
  • شناسه ها
  •  کلمات رزرو شده
  • Data types
  • متغیر ها
  •  ثابت ها
  •   رشته ها
  • اعداد
  •   عملگرها
  • تبدیلات
  •   ساختار های شرطی
  •   حلقه ها
  • آرایه ها
  •  Sets
  •  Maps 
  •  حلقه های تکرار
  • توابع - ورودی و خروجی
  • Arrow Functions
  • Scope
  • Hoisting
  • Callback 
  •  Object
  •  DOM 
  •  انتخاب المان های صفحه وب
  •  حرکت در DOM
  • CSS
  •  Attributes
  • رویداد چیست؟
  • Event Object
  • Event Flow
  • Keyboard Events در جاوااسکریپت
  • رویداد ها کنترل ها اعتبار سنجی فرم ها
  • Animations
  • کار با فرم ها
  • عناصر صفحه
  •  Events
  •  BOM
  • Popup 
  • Cookies 
  • History Location 
  • Windows
  • Browser Event
  •  خطایابی و رفع آن ها
  • انواع خطا ها
  •  سرفصل های تکمیلی
  • Json Closures Iterators Generators
  • Ajax
  • کار با Ajax
  •  رویداد ها
  • Promises
  • نحوه ارسال درخواست Async در Ajax
  • بروز رسانی DOM با Ajax
  • استفاده Json در Ajax
  •   اکما اسکریپت ECMAScript
  • Const و Let
  • Template Strings 
  • Tagged Templates 
  •  بروز رسانی های ایجاد شده در توابع
  •  عملگر Spread
  • Getters و Setters
  •  متد های of و fill
  •  متدهای find و findIndex
  • Map
  • WeakSet و WeakMap
  •  بروزرسانی ها در ES7
  • Await و Async
  •  بروزرسانی ها در ES8
  •    مثال های عملی کوچک
  • ساخت ماشین حساب
  • ساخت Todo
  • ساخت چراغ راهنما
  • ساخت ساعت دیجیتال
  • ساخت شمارنده
  • بازی حدس عدد
  • اعتبار سنجی فرم ها
  • کتابخانه ی jQuery
  • دلایل استفاده از jQuery متدهای کاربردی
  •  سکلتور ها
  •  رویداد ها
  •  افکت ها
  •  کار با HTML
  •  Ajax

ری اکت

  • معرفی دوره
  • توضیحات ابتدایی
  • آشنایی با React
    چرا React
  • ابزار ها و نیازمندی های ابتدایی
  • ساخت اولین پروژه
  • مروری بر بروز رسانی های اکما اسکریپت
  • اپراتور Spread
  • Object , Array  destructuring
  • مباحث پایه شئ گرایی در جاوا اسکریپت
  • Export – import
  • توابع فلشی  Arrow function
  • تفاوت Const – Let – Var
  • بررسی فولدر ها و فایل های پروژه
  • مفهوم کامپوننت
  • ساخت کامپوننت
  • انواع کامپوننت
  • Virtual DOM  در ری اکت
  • آشنایی با JSX
  • Prop
  • State
  • Reusable component
  • Class component
  • Functional component
    setState
  • Destructuring
  • تفاوت State , Prop
  • چرخه حیات کامپوننت ها
  • استایل دهی در ری اکت
  • Styled Component
  • مفهوم Hook
  • useState
  • PrevState
  • Object , Array in useState
  • useEffect
  • Context
  • useContext
  • useReducer
  • useMemo
  • useCallback
  • useRef
  • Custom Hook
  • رویداد ها
  • مفهوم binding
  • List rendering
  • Conditional rendering
  • Mounting
  • Unmounting
  • Update
  • Memo
  • Pure component
  • Ref
  • propTypes
  • Portal
  • Error boundary
  • HOC
  • Ajax  در React
  • Fetch
  • Axios
  • عملیات CRUD
  • مدیریت خطا ها
  • Interceptor
  • Publish  نهایی پروژه روی هاست
  • react router
  • پروژه اول single page application SPA
  • پروژه دوم اعتبار سنجی فرم ها
  • پروژه سوم TODO List
  • معرفی ریداکس Redux
  • مفاهیم
  • تعاریف
  • راه اندازی
  • Action
  • Reducer
  • Store
  • پکیج محبوب react-redux
  • Redux thunk

اهداف این آموزش

تسلط کافی به مهارت های اصلی در فرانت اند

https://barnamenevisan.info/c/98
از تخفیف دوره باخبرم کن خبرم کن

مشاور پروژه های برنامه نویسی و بازاریابی الکترونیکی

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

مهندس ایمان مدائنی مدرس بین المللی و رسمی مایکروسافت، مدیر و موسس انجمن برنامه نویسان و آموزشگاه برنامه نویسان ، دارای مدارک رسمی Microsoft Certified Trainer - MCT و MCSD و MCP و MCSE و MCSA از مایکروسافت، مشاور چندین سازمان و ارگان دولتی و شرکت های خصوصی، می تواند در این مسیر شما را همراهی نماید.

آخرین مقالات

مشاهده همه

تقدیرنامه ها

تندیس تقدیر نامه هفتمین اجلاس سراسری نشان عالی مدیر سال تندیس تقدیر نامه هفتمین اجلاس سراسری نشان عالی مدیر سال
تندیس اجلاس سراسری رضایت مندی مشتری با رویکرد مشتری مداری تندیس اجلاس سراسری رضایت مندی مشتری با رویکرد مشتری مداری
جایزه ملی هاتف اجلاس سراسری مسئولیت پذیری اجتماعی و فرهنگ سازمانی جایزه ملی هاتف اجلاس سراسری مسئولیت پذیری اجتماعی و فرهنگ سازمانی
گواهی نامه ISO 10002:2018 رضایت مشتری -سیستم مدیریت رسیدگی به شکایات گواهی نامه ISO 10002:2018 رضایت مشتری -سیستم مدیریت رسیدگی به شکایات
گواهی نامه ISO 10004:2018 رضایت مشتری - نظارت و اندازه‌گیری رضایت مشتری گواهی نامه ISO 10004:2018 رضایت مشتری - نظارت و اندازه‌گیری رضایت مشتری
گواهی نامه 9001:2015 ISO سیستــــــم مدیـــــــریت کیفیت . گواهی نامه 9001:2015 ISO سیستــــــم مدیـــــــریت کیفیت .