مسیر یادگیریسرفصلهای دوره
سر فصلها
معرفی مفاهیم پایه طراحی وب
• بررسی مفهم 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
o Font-family
o استفاده از سایت transfonter
o استفاده از font-face
o بررسی مفهوم font stack
Font-size
Font-weight
Font-style
Font-variant
Font
Color
• معرفی descendant selectors
• معرفی child selectors
• معرفی next-sibling selector
• معرفی Subsequent-sibling selectors
• معرفی universal selector
o Line-height
o Text-indent
o Text-align
o Text-decoration
o Text-transform
o Letter-spacing
o Word-spacing
o Text-shadow
o Whitespace
o Vertical-align
o Direction
o List-style-type
• معرفی رنگ ها
• معرفی HEX color Mode
• معرفی RGB color mode
• معرفی RGBa color mode
o Color
o Background-color
o Width
o Height
o Opacity
• معرفی attribute selector ها و regex
o Background-image
o Background-repeat
o Background-position
o Background-origin
o Background-attachment
o Background-size
o Background
• ساخت کامپوننت parallax
o Linear-gradient
o Radial-gradient
o Repeating-linear-gradient
o Repeating-radial-gradient
• بررسی سایت css gradient generator
• تقسیم بندی ماژولار css با استفاده از @import
• بررسی مفهوم box model
o Overflow
o Padding
o Box-sizing
o Border-style
o Border-width
o Border-color
o Border
o Border-radius
• بررسی سایت border radius generator
o Outline-style
o Outline-width
o Outline-color
o Outline-offset
o Outline
o Margin
• بررسی مفهوم collapsing margin
• بررسی margin در تگ های inline
• بررسی negative margins
• معرفی css variables با استفاده از :root و var()
• معرفی تابع ریاضی calc()
• آموزش وسط چین کردن تگ ها
o Display
o Box-shadow
• معرفی font awesome و نحوه نصب و استفاده از آن
• معرفی pseudo class selector های زیر:
• Link
• Visited
• Focus
• Hover
• Active
• معرفی مفهوم transition
o Transition-property
o Transition-duration
o Transition-timing-functioning
• بررسی وب سایت cubic-bezier
o Transition-delay
o Transition
• بررسی سایت hover.css
• معرفی سایر pseudo class selector ها
o Root
o Empty
o First-child
o Last-child
o Only-child
o First-of-type
o Last-of-type
o Only-of-type
o Nth-child()
o Nth-last-child()
o Nth-of-type()
o Nth-last-of-type()
o Enabled
o Disabled
o Checked
o Not()
• ساخت یک پروژه ساده
• معرفی pseudo element selector های زیر
o First-line
o First-letter
o Before
o After
• ادامه معرفی property های Css
o Float
o Clear
o Shape-outside
o Shape-margin
o Position(static,relative,absolute,fixed,sticky)
o Top , left , right , bottom
o Z index
• ساخت منو nested
• ساخت mega menu
• ساخت منو همبرگری
• ساخت منو دیجی کالا
o Transform
o Translate()
o Rotate()
o Skew()
o Sclale()
o Transform-origin
o Perspective
o Perspective-origin
o Filter
o Blur()
o Brightness()
o Contrast()
o Grayscale()
o hue-rotate()
o invert()
o saturate()
o sepia()
• معرفی animation ها و نحوه استفاده از @keyframes
o animation-name
o animation-duration
o animation-timing-functioning
o animation-delay
o animation-iteration-count
o animation-direction
o animation-fill-mode
• معرفی کتاب خانه animate.css
o resize
o border-collapse
o border-spacing
o empty-cells
o table-layout
o caption-side
• معرفی swiper js
o flex
o flex-direction
o flex-wrap
o flex-flow
o justify-content
o align-items
o align-content
o align-self
o order
o flex-grow
o 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
• استفاده از کامپوننت های زیر:
o Accordion
o Alert
o Badge
o Breadcrumb
o Buttons
o Button group
o Card
o Close button
o Collapse
o Dropdowns
o List group
o Modal
o Nav & tabs
o Navbar
o Offcanvas
o Pagination
o Popovers
o Progress
o Scrollspy
o Spinners
o Toasts
o 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
• معرفی شرط ها
o If
o Else
o Else if
o Switch
• معرفی توابع در js
• نحوه ورودی گرفتن توابع
• بررسی تفاوت توابع void و غیره
• بررسی توابع بازگشتی
• معرفی حلقه ها
o For
o While
o Do while
• معرفی حلقه های تو در تو
• معرفی آرایه ها
• نحوه دسترسی به عناصر آرایه و معرفی 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 ها
o Click
o Mouse enter
o Mouseleave
o Keyup
o Keydown
• نحوه css دادن با js
• ساخت ماشسن حساب با js
• معرفی متد های string
o Substr
o Sunstring
o Slice
o Tolowercase
o toUppercase
o replace
o trim
o charAt
o indexof
o lastindexof
o include
o startwith
o endwith
• نحوه دسترسی به کارکتر های string
• معرفی متد split
• آموزش ساخت modal
• معرفی Math در js
o PI
o e
o sqrt
o round
o floor
o ceil
o trunc
o 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
o Screen.width
o Screen.height
o Screen.height
o Screen.availwidth
o Screen.availheight
o Innerwidth
o Innerheight
o Location.href
o Location.hostname
o Location.pathname
o 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
o XmlHttpRequest
o Promise
o Fetch
o 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
o Click
o Dclick
o Moueenter
o Mouseleave
o Hover
o Focus
o Blur
o On
• معرفی افکت ها
o Show
o Hide
o Fadein
o Fadeout
o Fadetoggle
o Fadeto
o Slidedown
o Slideup
o Slidetoggle
• انیمیشن در jquery
• معرفی callback در jquery
• نحوه استفاده از scroll در jquery
• ساخت منو با jquery
• معرفی addclass و Removeclass و hasclass
• نمایش محتوا سایت با اسکرول
• معرفی traversing در jquery
o Parent
o Parents
o Parentuntil
o Children
o Find
o Siblings
o Next
o Nextall
o Nextuntil
o Prev
o Prevall
o Prevuntil
o First
o Last
o Eq
o Filter
o Not
• معرفی ajax در jquery
• آموزش ساخت json-server
• پروژه وبسایت کامل با استفاده از js و jquery و api
• معرفی کتابخانه react