ما را دنبال کنید:
image

دوره جامع طراحی وب (HTML ۵، CSS، Bootstrap، SASS، Javascript، Ajax، JQUERY)

آنچه یاد خواهید گرفت

HTML چیست

  • Tools - browsers - IDE - texteditor
  • How the web works
  • host چیست
  • domain چL:
    یست
  • sketch و wireframe چیست
  • نقش html و css و javascript در صفحات وب
  • تعریف وبسایتهای ایستا (static)
  • تعریف وبسایتهای پویا (dynamic)
  • تفاوت وبسایتهای پویا (dynamic) و وبسایتهای ایستا (static)
  • front-end چیست و به چه کسی front-end developer میگویند
  • back-end چیست و به چه کسی back-end developer میگویند
  • تعریف زبان های مفسری (Interpreter)
  • تعریف زبانهای کامپایلری (Compiler)
  • فرق زبان های نشانه گذاری و برنامه نویسی
  • tag چیست و چند نوع تگ داریم
  • ساخت اولین صفحه با html
  • Doctype چیست
  • توضیح تگهای html - head - body - title
  • متا تگ ها
  • seo چیست
  • تگهای headings
  • attribute در تگ
  • تگ paragraph
  • تگ br و hr
  • تگ anchor (a)
  • آدرس دهی relative و absolute
  • تگ img (jpg , png , gif , svg , webp )
  • تفاوت bitmap و vector
  • تگهای strong - em - i
  • div - span
  • block و inline
  • تگهای ul li - ol li - dl dt dd
  • تگهای table - thead - tbody- tfoot - tr - th - td
  • تگ form - inputs - textarea - label
  • تگ select - option - optgroup
  • تگ fieldset - legend
  • تگ iframe

HTML 5:

  • تگ header
  • تگ footer
  • تگ main
  • تگ nav
  • تگ section
  • تگ article
  • تگ aside
  • تفاوت div و section
  • تگ figure - figcaption
  • تگ audio
  • تگ video
  • تگ address
  • تگ time
  • تگ mark
  • تگ cite
  • svg چیست
  • canvas چیست

CSS:

  • css inline-internal-external
  • selector ها در css
  • تعریف font و انواع web font
  • استفاده font-awesome از طریق file
  • استفاده font-awesome از طریق cdn
  • web font generators
  • font-icon ها
  • رنگها در css
  • تفاوت طراحی flat و realism
  • background-color
  • background-image
  • background-postion
  • background-repeat
  • background-size
  • background-clip
  • multi-backgorund
  • background-blend-mode
  • gradients
  • text-decoration
  • text properties (color - fontsize - font-weight - font-style ...)
  • list-styles
  • border - outline
  • css3 and prefixes
  • border-radius
  • box-shadow
  • text-shadow
  • filter ها در css
  • css pseudo classes (:hover , :active , :first-child , ....)
  • css pseudo elements (:after , :before , ....)
  • inline و block و inline-block
  • vh و vw
  • float
  • margin - padding - box-sizing
  • positions
  • transforms
  • transform 3d
  • transitions
  • animations
  • css clicks
  • variables in css
  • ریسپانسیو چیست

media query:

  • em - rem
  • ساخت یک وبسایت ریسپانسیو با float به عنوان اولین پروژه
  • طراحی یک وبسایت توسط دانشجو با float به عنوان اولین پروژه
  • شروع کار با git - github
  • معرفی version control git
  • معرفی github - bitpucket - gitlab
  • دستور status در گیت
  • دستور add در گیت
  • دستور commit در گیت
  • دستور push در گیت
  • دستور clone در گیت
  • فرستادن پروژه روی وبسایت github
  • آپلود پروژه در (heroku یا netlify یا githubpages)

flexbox:

  • display flex و inline-flex
  • flex container و flex items
  • flex-direction
  • justify-content
  • align-items
  • align-content
  • flex-wrap
  • flex-flow
  • flex-basis
  • flex-grow
  • flex-shrink
  • align-self
  • order
  • flex و position (absolute - fix)
  • طراحی یک سایت ریسپانسیو با flex-box به عنوان دومین پروژه
  • طراحی یک وبسایت توسط دانشجو با flex-box به عنوان دومین پروژه

display Grid:

  • grid vs flex
  • grid-template
  • grid-template-clumns
  • grid-template-rows
  • grid-template-areas
  • grid-area
  • grid-auto-comumns
  • grid-auto-flow
  • grid-gap
  • grid-row
  • grid-row-start
  • grid-row-end
  • minmax - spanning
  • fraction in grid
  • طراحی یک سایت ریسپانسیو با display:grid به عنوان سومین پروژه
  • طراحی یک وبسایت توسط دانشجو با display:grid به عنوان سومین پروژه

Bootstrap:

  • bootstrap چیست و انواع framework css
  • bootstrap 4 vs bootstrap 3
  • توضیح فایل ها و ساختار bootstrap
  • اضافه کردن bootstrap به صفحات
  • مروری بر فایل bootstrap.css
  • minify چیست
  • containers
  • grid ها و ستون بندی ها در bootstrap
  • Typography
  • colors
  • tables
  • images
  • jumbotron
  • alerts
  • buttons - buttons group
  • progressbar
  • spinners
  • pagination
  • list groups
  • cards
  • dropdowns
  • collapse
  • navs - navbar
  • forms
  • inputs
  • utilities (margins - paddings - colors - background-colors - flex classes - borders ...)
  • carousel
  • modal
  • tooltip
  • popover
  • scrollspy
  • طراحی یک سایت ریسپانسیو با bootstrap به عنوان چهارمین پروژه
  • طراحی یک وبسایت توسط دانشجو با bootstrap به عنوان چهارمین پروژه

SASS:

  • sass چیست
  • css preprocessor ها و انواع آن
  • variables
  • nesting
  • mixins
  • extends
  • functions
  • طراحی یک سایت ریسپانسیو با sass به عنوان پنجمین پروژه
  • طراحی یک وبسایت توسط دانشجو با sass به عنوان پنجمین پروژه

JAVASCRIPT & ES6:

  • javascript چیست
  • تاریخچه Javascript
  • تفاوت Ecmascript و Javascript
  • ابزارهای مورد نیاز
  • استفاده از console 
  • اجرای کدهای js در مرورگر
  • اجرای کدهای js در terminal توسط node
  •  استفاده از Alert 
  • Document.write
  • variables
  • Data types
  • Numbers
  • Strings
  • Boolean
  • Null
  • Undefined
  • Arrays
  • Objects
  • Date
  • operators
  • Type coercion
  • دستورات شرطی if - else - if else - switch case
  • حلقه های for - while - do while
  • functions
  • function scope and global scope
  • IIFE Immediately Invoked Function Expression
  • Function Recursive
  • Arguments
  • Objects

مفهوم Prototype:

  • ارث بری در Prototype
  • کار با call
  • کار با bind
  • کار با apply
  • Setinterval
  • Settimeout
  • String methods
  • MATH methods
  • time methods
  • Array methods
  • BOM چیست و کار با آن
  • ِDOM چیست

شروع کار با DOM:

  • Selector ها در DOM
  • Elements method and perperties (delete element - create element - ....)
  • DOM method and propeties
  • Events
  • This
  • Local storage
  • XML چیست
  • JSON چیست
  • تفاوت JSON و XML

کار با Ajax:

  • انجام چند پروژه javascript (example : toodList - image slide - modal - sticky menu - game and ...)
  • (ES6 (ecmascript 6 and more
  • es6 چیست
  • let and const
  • Template Strings
  • Arrow functions
  • Arrow Functions vs Traditional Functions
  • This in arrow functions
  • Arguments in arrow function
  • (map (es5
  • (forEach (es5
  • For of
  • find
  • filter
  • reduce
  • Some
  • every
  • Rest params
  • Spread
  • Strings new methods
  • class
  • class inheritance and extends
  • Static methods
  • super
  • Object new methods
  • Getter and Setter
  • fetch
  • Callback hell
  • Promise
  • Promise All
  • Async and await
  • Modules - export - import
  • انجام چند پروژه و معرفی فریم ورک های محبوب javascript

JQUERY:

  • Jquery چیست
  • Jquery in dom
  • Selectors
  • css methods
  • jquery and dom
  • html and text method
  • $(this(in jquery
  • siblings
  • parents
  • childrens
  • find
  • filter
  • append
  • appendto
  • prepend
  • prependto
  • after
  • before
  • remove elements
  • replace elements
  • mouse events (hover - click ....)
  • keyboard events
  • forms and validation
  • animations in jquery (animate)
  • show and hide and toggle
  • fadeIn and fadeOut and fadeToggle
  • slideup and slidedown and slidetoggle

ajax:

  • کار با plugin ها
  • طریقه نوشتن plugin
  • پیاده سازی مفاهیم در قالب مثال و پروژه (example : smooth scroll - parallax - accordion - slider scroll and ...)
  • Jquery UI
  • آشنایی با jquery ui
  • چگونگی استفاده از jquery ui

پیش نیاز

دانش و مهارت استفاده از کامپیوتر و اینترنت

مخاطبان دوره

  • همه علاقمندان به حوزه برنامه نویسی وب در همه پلتفرم ها

توانایی پس ازگذراندن دوره

  • پیاده سازی حرفه ای سمت کاربر وب سایت ها 

دوره جامع طراحی و برنامه نویسی وب بصورت حضوری برگزار می گردد. افرادی که علاقمند به طراحی و توسعه وب هستند می توانند در دوره جامع طراحی و برنامه نویسی وب (HTML 5، CSS،  Bootstrap، SASS، Javascript، Ajax،  JQUERY) لایتک شرکت نمایند و مهارت کسب نمایند.

ثبت نام خود را انجام دهید و کارشناسان لایتک با شما تماس خواهند گرفت.

تماس با شماره های زیر:

  • 66086019
  • 66035125
  • 09197603991

توجه: قبل از واریز وجه دوره، حتما از طریق مسئول آموزش استعلام گرفته شود

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

دوره های لایتک در برج فناوری شریف به صورت حضوری و برای افرادی که امکان شرکت در دوره به صورت حضوری را ندارند به صورت آنلاین برگزار می شود.

در زمان استراحت، پذیرای شما در کافی شاپ مجموعه هستیم:

و با سرگرمی های تعبیه شده، به کمی استراحت بپردازید و با روحیه مضاعف به کلاس برگردید:

عکس یادگاری از دوره های قبل: 

حرفه ای شدن در محیط آموزشی جذاب را با لایتک تجربه کنید

این دوره برای شروع به کار در مسیر طراحی و توسعه وب بوده و هدف آن تربیت برنامه نویسان مسلط به طراحی سمت کاربر انواع وب سایت ها می باشد.

سبک برگزاری کلاس به همراه انجام پروژه های متعدد کوچک و بزرگ توسط استاد و دانشجویان می باشد.

در صورت نیاز به مشاوره و راهنمایی جهت شرکت در دوره، می توانید با شماره های لایتک تماس گرفته و نسبت به تعیین زمان مشاوره توسط کارشناسان لایتک اقدام گردد.

لازم به ذکر است آزمون های دوره Web Developer به صورت پروژه برگزار می گردد.

دوره های آموزشی Web Developer را برای حرفه ای شدن به خاطر بسپارید:

لیست کامل دوره های طراحی و توسعه وب را می توانید در این بخش مشاهده فرمایید:

  • دوره جامع طراحی و برنامه نویسی وب (HTML 5، CSS،  Bootstrap، SASS، Javascript، Ajax، Typescript ، JQUERY)​
  • دوره طراحی و توسعه وب سمت سرور (JavaScript, Jquery, Ajax)
  • دوره جامع برنامه نویسی PHP (مقدماتی، پیشرفته، لاراول به صورت کاملا عملی و پروژه محور)
  • دوره ReactJS و NodeJ

کلیه اساتید لایتک دارای سابقه درخشان در حوزه آموزش می باشند.

لینک اعضای هیئت علمی

مسیر آموزشی کامل دوره طراحی و توسعه وب فرانت اند: