| معرفی مفاهیم پایه طراحی وب |
- بررسی مفهم UI
- بررسی مفهوم UX
- بررسی مفهوم Front-End
- بررسی مفهوم Back-End
- معرفی HTML
- معرفی CSS
- معرفی Javascript
- بررسی مفهوم SEO
- بررسی مفهوم Progressive Enhancement
- بررسی مفهوم Responsive Web Design
- بررسی مفهوم Internet
- بررسی مفهوم Protocol
- بررسی مفهوم WEB
- بررسی مفهوم HTTP
- بررسی مفهوم Server
- بررسی مفهوم IP
- بررسی مفهوم Domain
- بررسی مفهوم DNS
- بررسی مفهوم Intranet
- بررسی مفهوم Extranet
- بررسی موتور های رندرگیری مرورگر ها
- بررسی URL
- بررسی مفهوم HTTPS
- بررسی تفاوت سایت های static و dynamic
- بررسی request و response های یک وب سایت
- بررسی نحوه رندرگیری کد ها توسط مرورگر
- کامنت ها در HTML
- معرفی tag ها در HTML و انواع آن ها(single & pairs)
- بررسی ساختار تگ ها در HTML
- معرفی VS Code و پلاگین های آن(material icons, material themes , open in browser , prettier ,rainbow brackets , path intellisense, )
- بررسی ساختار یک سند HTML
- معرفی BOM و DOM
- نمایش درخت HTML
- بررسی مفهوم semantic
|
| معرفی HTML |
- معرفی تگ p و display آن
- معرفی تگ های Heading و display آن ها
- معرفی تگ hr و display آن
- معرفی لیست های ترتیبی و غیر ترتیبی و display آن ها
- آموزش Emmet
- معرفی attribute های تگ های HTML و بررسی نکات آن ها
- آموزش لیست های Nested
- معرفی پلاگین live-server در vs code
- معرفی تگ blockqoute و display آن
- معرفی تگ pre و display آن
- معرفی Webstorm و نحوه نصب و کرک آن
- معرفی پلاگین های Webstorm و استفاده از آن ها (atom material icons, material theme ui lite, rainbow brackets)
- برسی تفاوت های HTML4 و HTML5
- معرفی Doctype
- معرفی تگ های sematic
- معرفی تگ main و display آن
- معرفی تگ header و display آن
- معرفی تگ footer و display آن
- معرفی تگ section و display آن
- معرفی تگ article و display آن
- معرفی تگ aside و display آن
- معرفی تگ nav و display آن
- معرفی تگ address و display آن
- معرفی تگ em و display آن
- بررسی تفاوت display های inline و block
- معرفی تگ strong و display آن
- معرفی تگ b و display آن
- معرفی تگ i و display آن
- معرفی تگ s و display آن
- معرفی تگ u و display آن
- معرفی تگ small و display آن
- معرفی تگ q و display آن
- معرفی تگ abbr و display آن
- بررسی حالات nesting در element ها
- معرفی تگ sub و display آن
- معرفی تگ sup و display آن
- معرفی تگ mark و display آن
- معرفی تگ ins و display آن
- معرفی تگ del و display آن
- معرفی تگ br و display آن
- معرفی تگ div و display آن
- معرفی تگ span و display آن
- معرفی id و class و بررسی تفاوت آن ها
- معرفی global attributes
- بررسی character escapes
- آموزش دستورات پایه CMD
- معرفی node js
- معرفی npm
- معرفی live-server و دستورات آن
- معرفی تگ a و display آن
- معرفی Attribute HREF
- معرفی URL های Relative و Absolute
- لینک کردن تگ a به بخشی از سایت و استفاده از پراپرتی scroll-behavior
- بررسی Attribute Target
- بررسی mail links
- بررسی tel links
- معرفی تصاویر و بررسی انواع آن ها(vector & raster)
- بررسی فرمت های عکس ها
- بررسی انواع color mode
- معرفی mimetype
- معرفی تگ img و display آن
- بررسی تفاوت display های block و inline و inline-block
- معرفی تگ table و display آن
- معرفی تگ های tr و th و td
- معرفی Attribute colspan & rowspan
- معرفی تگ caption در table
- معرفی تگ های thead و tbody و tfoot
- بررسی چگونگی عمکرد form ها
- معرفی تگ form و attribute های action و method و enctype
- بررسی method های get و post
- معرفی تگinput و انواع type های آن(text,password,search,email,url,tel,submit,reset,button,radio,checkbox,file,hidden,date,time,number,range,color)
- معرفی attribute های Value,name,placeholder,min-length,max-length,required,diabled,readonly
- معرفی تگtextarea و display آن
- معرفی تگ Select و option و optgroup
- معرفی تگ label و display آن
- آموزش اتصال input و lablel به هم
- معرفی تگ fieldset و legend
- معرفی تگ iframe
- معرفی تگ video و display آن
- معرفی تگ audio و display آن
|
| معرفی CSS |
- معرفی declaration
- معرفی selector و property و value
- معرفی element selector
- معرفی id selector(local & global)
- معرفی class selector(local & global)
- بررسی تفاوت Style های inline , internal ,external
- بررسی اولویت های style دهی
- کامنت ها در CSS
- معرفی !important و اولویت آن
- معرفی group selector
- معرفی CSS Units
- معرفی property های زیر در CSS
- Font-family
- استفاده از سایت transfonter
- استفاده از font-face
- بررسی مفهوم font stack
- Font-size
- Font-weight
- Font-style
- Font-variant
- Font
- Color
- معرفی descendant selectors
- معرفی child selectors
- معرفی next-sibling selector
- معرفی Subsequent-sibling selectors
- معرفی universal selector
- Line-height
- Text-indent
- Text-align
- Text-decoration
- Text-transform
- Letter-spacing
- Word-spacing
- Text-shadow
- Whitespace
- Vertical-align
- Direction
- List-style-type
- معرفی رنگ ها
- معرفی HEX color Mode
- معرفی RGB color mode
- معرفی RGBa color mode
- Color
- Background-color
- Width
- Height
- Opacity
- معرفی attribute selector ها و regex
- Background-image
- Background-repeat
- Background-position
- Background-origin
- Background-attachment
- Background-size
- Background
- ساخت کامپوننت parallax
- Linear-gradient
- Radial-gradient
- Repeating-linear-gradient
- Repeating-radial-gradient
- بررسی سایت css gradient generator
- تقسیم بندی ماژولار css با استفاده از @import
- بررسی مفهوم box model
- Overflow
- Padding
- Box-sizing
- Border-style
- Border-width
- Border-color
- Border
- Border-radius
- بررسی سایت border radius generator
- Outline-style
- Outline-width
- Outline-color
- Outline-offset
- Outline
- Margin
- بررسی مفهوم collapsing margin
- بررسی margin در تگ های inline
- بررسی negative margins
- معرفی css variables با استفاده از :root و var()
- معرفی تابع ریاضی calc()
- آموزش وسط چین کردن تگ ها
- معرفی font awesome و نحوه نصب و استفاده از آن
- معرفی pseudo class selector های زیر:
- Link
- Visited
- Focus
- Hover
- Active
- معرفی مفهوم transition
- Transition-property
- Transition-duration
- Transition-timing-functioning
- بررسی وب سایت cubic-bezier
- Transition-delay
- Transition
- بررسی سایت hover.css
- معرفی سایر pseudo class selector ها
- Root
- Empty
- First-child
- Last-child
- Only-child
- First-of-type
- Last-of-type
- Only-of-type
- Nth-child()
- Nth-last-child()
- Nth-of-type()
- Nth-last-of-type()
- Enabled
- Disabled
- Checked
- Not()
- ساخت یک پروژه ساده
- معرفی pseudo element selector های زیر
- First-line
- First-letter
- Before
- After
- ادامه معرفی property های Css
- Float
- Clear
- Shape-outside
- Shape-margin
- Position(static,relative,absolute,fixed,sticky)
- Top , left , right , bottom
- Z index
- ساخت منو nested
- ساخت mega menu
- ساخت منو همبرگری
- ساخت منو دیجی کالا
- Transform
- Translate()
- Rotate()
- Skew()
- Sclale()
- Transform-origin
- Perspective
- Perspective-origin
- Filter
- Blur()
- Brightness()
- Contrast()
- Grayscale()
- hue-rotate()
- invert()
- saturate()
- sepia()
- معرفی animation ها و نحوه استفاده از @keyframes
- animation-name
- animation-duration
- animation-timing-functioning
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- معرفی کتاب خانه animate.css
- resize
- border-collapse
- border-spacing
- empty-cells
- table-layout
- caption-side
- معرفی swiper js
- flex
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- align-self
- order
- flex-grow
- flex-shrink
- معرفی media query و ساخت صفحات responsive
- معرفی srcset و x-descriptor و w-descriptor
- معرفی تگ picture
- معرفی owl carousel
- پروژه تبدیل UI به صفحات وب
- نحوه خرید دامنه و هاست
|
| معرفی grid css |
- grid column
- grid row
- grid cell
- grid cell
- grid line
|
| معرفی property های grid |
- grid-template-columns
- grid-gap
- grid-column-gap
- grid-row-gap
- grid-template-rows
- grid-column
- grid-row
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- grid-template-areas
- grid-area
- justify-content
- justify-items
- justify-self
- align-content
- align-items
- align-self
|
| معرفی SASS |
- معرفی Sass و نحوه نصب و کانفیگ آن
- کانفیگ Sass با npm scripts
- کانفیگ sass با نرم افزار های جانبی مثل koala
- ایجاد متغیر در sass
- آموزش nesting در sass
- آموزش استفاده از pseudo class selector ها و pseudo element selector ها در Sass
- آمورش inheritance و @extend در sass
- آموزش condition ها در sass
- آموزش استفاده از ریاضیات در sass
- آموزش استفاده از function ها در sass
- آموزش استفاده از @mixin در sass
- آموزش iteration ها در sass
- ساخت گرید بندی bootstrap با sass
- آموزش media query در sass
- انجام یک پروژه ساده با sass
|
| معرفی bootstrap 5 |
- آموزش نحوه دانلود و نصب bootstrap5 و کانفیگ آن
- معرفی break point ها
- معرفی انواع container
- آموزش استفاده از grid بندی bootstrap 5
- نحوه استفاده از grid بندی bootstrap و ساخت صفحات responsive
- تزار کردن افقی و عمدی column ها
- عوض کردن order
- استفاده از offset
- معرفی margin
- معرفی padding
- معرفی gutter
- معرفی background color
- معرفی color
- معرفی دیسپلی ها
- معرفی flex
- معرفی float
- معرفی overflow
- معرفی position
- معرفی shadow
- معرفی width و height
- معرفی vertical align
- معرفی کلاس border
- معرفی کلاس rounded
- معرفی کلاس های heading
- معرفی کلاس های display
- معرفی کلاس lead
- معرفی کلاس mark
- معرفی کلاس small
- معرفی کلاس text-decoration-underline
- معرفی کلاس text-decoration-line-through
- معرفی کلاس initialism
- معرفی کلاس blockquote
- معرفی کلاس text-center
- معرفی کلاس list-unstyled
- معرفی کلاس list-inline و list-inline-item
- معرفی کلاس img-fluid
- معرفی کلاس img-thumbnail
- معرفی کلاس rounded
- استفاده از float در bootstrap
- معرفی کلاس table
- استفاده از رنگ ها در table
- معرفی کلاس table-striped
- معرفی کلاس table-hover
- معرفی کلاس table-active
- معرفی کلاس table-bordered
- استفاده از رنگ ها در table border
- معرفی کلاس table-borderless
- معرفی کلاس table-sm
- معرفی کلاس table-responsive
- معرفی vertical align در bootstrap
- آموزش Table های nesting
- معرفی کلاس table-light و table-dark
- معرفی Caption-side در bootstrap
- معرفی کلاس figure و figure-img و figure-caption
- معرفی کلاس form-label و form-control
- معرفی کلاس form-control-plaintext
- معرفی کلاس visually-hidden
- معرفی کلاس form-control-color
- معرفی کلاس form-select
- معرفی کلاس form-check و form-check-input و form-check-label
- معرفی کلاس form-switch
- معرفی کلاس form-check-inline
- معرفی کلاس btn-check
- معرفی کلاس form-range
- معرفی کلاس input-group و input-group-text
- معرفی کلاس input-group-sm
- معرفی کلاس dropdown-toggle و dropdown-menu و "dropdown-item و dropdown-divider
- معرفی کلاس dropdown-menu-end
- معرفی کلاس dropdown-toggle-split
- معرفی کلاس form-floating
- معرفی کلاس s-invalid و is-valid و invalid-feedback و has-validation
- معرفی کلاس {valid|invalid}-tooltip
- استفاده از کامپوننت های زیر:
- Accordion
- Alert
- Badge
- Breadcrumb
- Buttons
- Button group
- Card
- Close button
- Collapse
- Dropdowns
- List group
- Modal
- Nav & tabs
- Navbar
- Offcanvas
- Pagination
- Popovers
- Progress
- Scrollspy
- Spinners
- Toasts
- Tooltip
- معرفی کلاس clearfix
- معرفی کلاس link-*
- معرفی کلاس ratio
- معرفی کلاس fixed-top
- معرفی کلاس fixed-bottom
- معرفی کلاس ticky-top
- معرفی کلاس visually-hidden
- معرفی کلاس visually-hidden-focusable
- معرفی کلاس visually-hidden-focusable
- معرفی کلاس card و card-body و card-title و card-text
- معرفی کلاس stretched-link
- معرفی کلاس text-truncate
- ساخت پروژه با bootstrap
|
| آموزش Javascript |
- معرفی زبان JavaScript
- معرفی کاربرد های زبان JavaScript
- معرفی فریمورک ها و کتابخانه های این زبان
- بررسی تفاوت های زبان های مفسری و کامپایلری
- معرفی تگ script
- بررسی قرار دادن تگ script در جای های مختلف
- معرفی اتریبیوت های defer و async و تفاوت آن ها
- نحوه نوشتن JavaScript به صورت external
- چاپ کردن دیتا با java script
- Document.write
- Document.writeln
- Alert
- Console.log
- نحوه کامنت گذاری
- معرفی متغیر ها
- بررسی نحوه نام گذاری متغیر ها
- بررسی روش های نام گذاری متغیر ها
- نحوه کار با متغیر ها
- معرفی var و let و const
- معرفی انواع داده
- معرفی typeof
- بررسی concat در js
- بررسی بک تیک و template string
- نحوه ورودی گرفتن از کاربر
- آموزش casting در js
- معرفی block scope ها و متغیر های global و local
- معرفی arithmetic operator ها
- معرفی assignment operator ها
- معرفی comparison operator ها
- معرفی ternary operator
- معرفی logical operator ها
- معرفی nan و تابع isNan
- معرفی شرط ها
- معرفی توابع در js
- نحوه ورودی گرفتن توابع
- بررسی تفاوت توابع void و غیره
- بررسی توابع بازگشتی
- معرفی حلقه ها
- معرفی حلقه های تو در تو
- معرفی آرایه ها
- نحوه دسترسی به عناصر آرایه و معرفی index ارایه ها
- آپدیت ارایه ها
- نحوه استفاده از length در ارایه ها
- معرفی توابع push و pop و shift و unshift
- معرفی تابع isArray
- معرفی associative array ها
- معرفی تابع toString
- معرفی تابع join
- معرفی تابع delete
- معرفی تابع Splice
- معرفی تابع concat
- معرفی تابع Slice
- معرفی تابع sortNumeric
- معرفی متد foreach
- معرفی متد map
- بررسی تافوت foreach و map
- معرفی متد filter
- معرفی متد indexOf و lastIndexOf
- معرفی object
- نحوه دسترسی به عناصر object
- آموزش event ها
- Click
- Mouse enter
- Mouseleave
- Keyup
- Keydown
- نحوه css دادن با js
- ساخت ماشسن حساب با js
- معرفی متد های string
- Substr
- Sunstring
- Slice
- Tolowercase
- toUppercase
- replace
- trim
- charAt
- indexof
- lastindexof
- include
- startwith
- endwith
- نحوه دسترسی به کارکتر های string
- معرفی متد split
- آموزش ساخت modal
- معرفی Math در js
- PI
- e
- sqrt
- round
- floor
- ceil
- trunc
- random
- ساخت captcha
- معرفی arrow function ها
- معرفی dom و bom
- دسترسی به dom با استفاده از id و tagname و classname
- استفاده از queryselector
- معرفی innerhtml و innertext
- معرفی .attribute
- معرفی setattribute
- معرفی .claaname
- معرفی .href
- معرفی .src
- معرفی regular expression
- استفاده از متد های search و replace
- معرفی modifier ها در search
- استفاده از parentnode و childrennode و firstchild و lastchild و nextsibiling و previoussibiling
- معرفی createElement و append و insertBefore و remove
- معرفی bom
- Screen.width
- Screen.height
- Screen.height
- Screen.availwidth
- Screen.availheight
- Innerwidth
- Innerheight
- Location.href
- Location.hostname
- Location.pathname
- Location.protocol
- معرفی setTimeOut و setInterval
- ساخت ساعت دیجیتال
- معرفی json
- معرفی توابع .parse و .stringfy
- بررسی تافاوت json و object
- بررسی تفاوت json و xml
- بررسی انواع داده ها در json
- ساخت فایل json
- بررسی تفاوت sync و async
- استفاده از callback در async
- استفاده از promise در async
- استفاده از await در async
- معرفی ajax و api
- بررسی تفاوت soap و Rest api
- معرفی get در api
- XmlHttpRequest
- Promise
- Fetch
- Axios
- معرفی ecmascript
- نحوه array destructing
- نحوه object destructing
- نحوه import و expprt
- استفاده از allias و * در import و export
- معرفی مفاهیم شی گرایی و کلاس ها
- ساخت کلاس در js
- معرفی متغیر ها و توابع public و private
- معرفی setter و getter
- معرفی constructor
- معرفی وراثت در شی گرایی
- معرفی کلاس های static
- معرفی jquery
- نحوه دانلود و نصب jquery
- استفاده از document.ready
- آموزش selector ها در jquery
- روبداد ها در jquery
- Click
- Dclick
- Moueenter
- Mouseleave
- Hover
- Focus
- Blur
- On
- معرفی افکت ها
- Show
- Hide
- Fadein
- Fadeout
- Fadetoggle
- Fadeto
- Slidedown
- Slideup
- Slidetoggle
- انیمیشن در jquery
- معرفی callback در jquery
- نحوه استفاده از scroll در jquery
- ساخت منو با jquery
- معرفی addclass و Removeclass و hasclass
- نمایش محتوا سایت با اسکرول
- معرفی traversing در jquery
- Parent
- Parents
- Parentuntil
- Children
- Find
- Siblings
- Next
- Nextall
- Nextuntil
- Prev
- Prevall
- Prevuntil
- First
- Last
- Eq
- Filter
- Not
- معرفی ajax در jquery
- آموزش ساخت json-server
- پروژه وبسایت کامل با استفاده از js و jquery و api
- معرفی کتابخانه react
|
