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

دوره آنلاین آموزشی طراحی وب 1 ( HTML5,CSS3,Bootstrap,SaSS)

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

  • HTML:

  • html چیست
  • Tools - browsers - IDE - texteditor
  • How the web works
  • host چیست
  • domain چیست
  • 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 به عنوان پنجمین پروژه

پیش نیاز

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

مخاطبان دوره

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

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

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

تمامي دوره ها با رعايت كليه نكات بهداشتي و به صورت حضوري برگزار خواهد شد.

پس با خيال راحت ثبت نام خود را انجام دهيد.

یکی از این صندلیهای کلاس (کلاس شماره 1) منتظر شماست تا قدم در دنیای آموزش حرفه ای بردارید:

 

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

 

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

 

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

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

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

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

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

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

  • دوره طراحی وب - سمت کاربر
  • دوره تخصصی PHP مدرن
  • دوره جاوا اسکریپت سمت کاربر و سرور

 

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

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