آموزش Web Design Pack

دوره: آموزش Web Design Pack

معرفی :

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

مخاطبین :

فارغ التحصیلان گرایش نرم افزار رشته کامپیوتر
علاقمندان به طراحی وب سایت

سرفصل :‌

معرفی مفاهیم پایه طراحی وب	بررسی مفهم 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() آموزش وسط چین کردن تگ ها Display Box-shadow معرفی 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 معرفی شرط ها If Else Else if Switch معرفی توابع در js نحوه ورودی گرفتن توابع بررسی تفاوت توابع void و غیره بررسی توابع بازگشتی معرفی حلقه ها For While 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 ها 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