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

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

توضیحات دوره

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

پیش نیازها

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

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

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

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

سرفصل دوره

طراحی سایت HTML CSS FLEXBOX

آشنایی با 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

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

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

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

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

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

آخرین مقالات

مشاهده همه

تقدیرنامه ها