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

لوگو
ورود ثبت نام
ورود به دنیای برنامه نویسی
جذب مدرس

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

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

توضیحات دوره

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

پیش نیازها

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

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

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

TailwindCSS 

  • مقدمه ای بر tailwind
  • اصول طراحی واکنشگرا
  • کار با رنگ ها و اندازه ها
  • شخصی سازی
  • Utilities
  • فلکس باکس در تیلویند

جاوااسکریپت

  • معرفی جاوااسکریپت
  • چرا زبان برنامه نویسی؟
  • چرا زبان جاوااسکریپت؟
  • تاریخچه
  • نسخه ها -مزایای استفاده از این زبان
  • نصب و راه اندازی اولین پروژه
  • -طرق مختلف استفاده در مرورگر
  • اولین برنامه 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

پروژه های عملی  جاوااسکریپت:

  • سبد خرید
  • بازی حدس عدد
  • ماشین حساب
  • جدول با قابلیت فیلترینگ و مرتب سازی داده ها و صفحه بندی
  • نمایش و مخفی سازی رمز عبور در ورودی
  • اسلایدر
  • لودینگ
  • تایپ متحرک
  • گالری تصویر
  • کپی متن
  • ورود و ثبت نام
  • دارک مود
  • آپلودر
  • پروژه Rest Api
  • تولید کد Captcha
  • آزمون آنلاین Quiz
  • پروژه آب و هوا

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

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

از تخفیف دوره باخبرم کن خبرم کن

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

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

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

آخرین مقالات

مشاهده همه