LAITEC | آزمایشگاه یادگیری فناوری اطلاعات

دوره طراحی و توسعه وب 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 به عنوان چهارمین پروژه

پیش نیاز

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

مخاطبان دوره

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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