دوره هیولای طراحی وب – دوره جامع و صفر تا صد طراحی سایت (HTML و CSS) در ساری
طراحی وب چیست؟
زبان HTML که مخفف Hypertext Markup Language یک زبان نشانه گذاری می باشد که در واقع اسکلت اصلی تمامی سایت های جهان با آن ساخته شده است. زبان HTML هیچگونه ظاهری از خود ندارد و رنگ های و طرح هایی که داخل سایت های مختلفی که می بینید توسط مکمل زبان HTML یعنی CSS و Cascading style sheets داده شده است. شما می توانید با یادگیری این دو زبان کامپیوتری اقدام به طراحی انواع سایت های دلخواه خود نمایید.
چرا باید طراحی وب یاد بگیرید؟
اگر به هر طریقی قصد دارید وارد دنیایی برنامه نویسی و یا طراحی وبسایت ها بشید فراموش نکنید بدون HTML و CSS امکان پذیر نیست موفق بشید.
مخاطبین این دوره چه کسانی هستند؟
- افراد مبتدی که تازه میخواهند برنامه نویسی را یاد بگیرند
- تمام کسانی که به برنامه نویسی علاقه مندن
- کسانی که قصد دارد به عنوان طراح رابط کاربری وارد بازار کار شوند
- کسانی که تمایل دارند وارد بازار کار طراحی سایت های ریسپانسیو یا واکش گرا شوند
پیش نیازهای این دوره چیست؟
- شما به سیستم و لپتاپ حرفه‌ای نیاز ندارید و یک سیستم معمولی هم می‌تواند نیاز شما را در این مرحله برآورده کند.
- داشتن لپ تاپ برای حضور در کلاس الزامیست. در صورتی که لپ تاپ ندارید، حتما با پشتیبانی بخش آموزش هماهنگ کنید.
اهداف کلی دوره چیست؟
- توانمندسازی دانشجویان برای فعالیت در حوزه وب
- طراحی ریسپانسیو یا همان واکنش گرای صفحات وب جهت نمایش در موبایل، تبلت و … طراحی صفحات وب با سرعت بالا و ساده تر
- کسب مهارت لازم برای ارتقای سطح شغلی و درآمد خودتان
راه‌های کسب درآمد از طریق طراحی وب چیست؟
- طراحی UI سایت
- طراحی قالب و فروش آن در مارکت ها
درآمد یک طراح وب چقدر است؟
طبق اطلاعات دریافتی کتوسط درامد ماهیانه با سابقه زیر ۲ سال در تهران میانگین ۱۰ میلیون ، تا ۵ سال در میانگین ۲۰ میلیون و بالای آن میانگین ۳۰ میلیون
نرم افزارهای مورد نیاز
- Chrome
- ++Notepad
- VScode
اگر به دنبال دوره حرفه ای طراحی وب با HTML و CSS در شهر ساری هستید، این دوره مخصوص شماست. دوره صفر تا صد زبان های HTML و CSS در شهر ساری با پروژه های عملی و حرفه ای در خدمت شماست.
سرفصل های دوره هیولای طراحی وب – دوره جامع و صفر تا صد طراحی سایت (HTML و CSS) در ساری
• در مورد مدرس، محتوای این دوره آموزشی و ویژگی های آن
• آیا این دوره نیاز به پیشنیاز خاصی دارد ؟
• معرفی اولیه زبان HTML و CSS ، ورژن های مختلف آن و تفاوت آن ها
• تشریح رابطه زبان های تحت وب، – Ajax Javascript – PHP – CSS – HTML
• چرا باید HTML و CSS را یاد بگیرم ؟
• مرور کلی مباحث تدریس شده در این دوره
• مرورگرها و موتور های آنان
• موتور های رندرینگ مرورگرها
• ابزار بازرسی عناصر در مرورگرها inspect Element
• ادیتور ها و ویژگی های آنها
• انکودینگ فایل ها و تنظیم آن
• آشنایی با ویرایشگرهای Notpad++,Vscode,PHPstorm
• در مورد emmet و سرعت در کدنویسی
• در مورد لایو ادیت و دیدن خروجی کدهای نوشته شده به صورت لحظه ای
• Syntax و قواعد نوشتاری تگ های HTML
• انواع ویژگی (Attribute) در تگ های html
• ویژگی های اصلی و سراسری
• رویدادها (events Attributes)
• ویژگی های خاص تگ ها
• Syntax و قواعد نوشتاری CSS
• تگ ها و ویژگی های منسوخ شده HTML و جایگزین آن ها
• بدنه و ساختار کلی یک صفحه وبhtml و تشریح بخش های مختلف آن
• کامنت ها در صفحات html
• کامنت های شرطی
• 4 روش استفاده از CSS در صفحات وب و مزایا و معایب هر روش
• روش های استفاده از کدهای جاوااسکریپت در صفحات وب
• آدرس های نسبی و کامل فایل ها
• پدر و فرزندی تگ ها و تشریح آن
• درخت تگ ها و رسم آن توسط یک ابزار آنالیز
• یاد گیری با بررسی سورس کد صفحات وب
• واحدهای اندازه در html و css
• تشریح و توضیح در مورد بیش از ۱۰ واحد اندازه موجود
• رنگ ها در html و css
• نام رنگ ها ، رنگ های HSL, RGBA, RGB, hex و HSLA
• پاسخ تمرین جلسه پیش و توضیح رنگ های HSL و HSLA
• تگ های Block و Inline و تفاوت های آن ها
• آموزش جزئی مجموعه تگ های فرمت دهی متن
• تگ <!DOCTYPE >و کاربردهای آن
• تگ<html > و کاربردهای آن
• تگ <title >و کاربردهای آن
• تگ <body >و کاربردهای آن
• تگ کامنت و کاربردهای آن
• تگ های عنوان و کاربردهای آن
• تگ <p >و کاربردهای آن
• تگ <br >و کاربردهای آن
• تگ <hr >و کاربردهای آن
• تگ <abbr >و کاربردهای آن
• تگ <address >و کاربردهای آن
• تگ <b >و کاربردهای آن
• تگ <bdi >و کاربردهای آن
• تگ <bdo >و کاربردهای آن
• تگ <big >و کاربردهای آن
• تگ های نقل قول و کاربردهای آن
• تگ <center >و کاربردهای آن
• تگ <cite> و کاربردهای آن
• تشریح تفاوت بین تگ های i و em و تگ های b و strong
• تگ <code >و کاربردهای آن
• تگ <del >و کاربردهای آن
• تگ <ins >و کاربردهای آن
• تگ <dfn >و کاربردهای آن
• تگ <em >و کاربردهای آن
• تگ <i >و کاربردهای آن
• تگ <kbd >و کاربردهای آن
• تگ <mark >و کاربردهای آن
• تگ <meter >و کاربردهای آن
• تگ <pre >و کاربردهای آن
• تگ <progress >و کاربردهای آن
• تگ <q >و کاربردهای آن
• تگ <s >و کاربردهای آن
• تگ <samp >و کاربردهای آن
• تگ <small >و کاربردهای آن
• تگ <strong >و کاربردهای آن
• تگ <sub >و کاربردهای آن
• تگ <sup >و کاربردهای آن
• تگ <time >و کاربردهای آن
• تگ <var >و کاربردهای آن
• تگ <wbr> و کاربردهای آن
• تگ <head >و کاربردهای آن
• تگ <meta >و کاربردهای آن
• تگ <base >و کاربردهای آن
• تگ <iframe >و کاربردهای آن
• تگ <a >و کاربردهای آن
• تگ <link >و کاربردهای آن
• تگ <nav >و کاربردهای آن
• تگ <ul >و کاربردهای آن
• تگ <ol >و کاربردهای آن
• تگ <li >و کاربردهای آن
• تگ <dir >و کاربردهای آن
• تگ <dl >و کاربردهای آن
• تگ <dt >و کاربردهای آن
• تگ <dd >و کاربردهای آن
• تگ <menu >و کاربردهای آن
• تگ <menuitem >و کاربردهای آن
• تگ <embed >و کاربردهای آن
• تگ <object >و کاربردهای آن
• تگ <param> و کاربردهای آن
• تگ <form >و کاربردهای آن
• تگ <input >و کاربردهای آن
• انواع مختلف فیلد های موجود در فرم ها
• فیلد و ورودی button
• فیلد و ورودی checkbox
• فیلد و ورودی color
• فیلد و ورودی date
• فیلد و ورودی datetime
• فیلد و ورودی local-datetime
• فیلد و ورودی email
• فیلد و ورودی file
• فیلد و ورودی hidden
• فیلد و ورودی image
• فیلد و ورودی month
• فیلد و ورودی number
• فیلد و ورودی password
• فیلد و ورودی radio
• فیلد و ورودی range
• فیلد و ورودی reset
• فیلد و ورودی search
• فیلد و ورودی submit
• فیلد و ورودی tel
• فیلد و ورودی text
• فیلد و ورودی time
• فیلد و ورودی url
• فیلد و ورودی week
• تگ <textarea >و کاربردهای آن
• تگ <button> و کاربردهای آن
• تگ <select >و کاربردهای آن
• تگ <optgroup >و کاربردهای آن
• تگ <option >و کاربردهای آن
• تگ <label >و کاربردهای آن
• تگ <fieldset >و کاربردهای آن
• تگ <legend >و کاربردهای آن
• تگ <datalist >و کاربردهای آن
• تگ <keygen >و کاربردهای آن
• تگ <output >و کاربردهای آن
• تگ <img >و کاربردهای آن
• تگ <map >و کاربردهای آن
• تگ <area >و کاربردهای آن
• تگ >figure >و کاربردهای آن
• تگ <figcaption >و کاربردهای آن
• تگ <canvas >و کاربردهای آن
• تگ <audio >و کاربردهای آن
• تگ <video >و کاربردهای آن
• تگ <source >و کاربردهای آن
• تگ <track> کاربردهای آن
• تگ <table >و کاربردهای آن
• تگ <caption >و کاربردهای آن
• تگ <th >و کاربردهای آن
• تگ <tr >و کاربردهای آن
• تگ <td >و کاربردهای آن
• تگ <style >و کاربردهای آن
• تگ <div >و کاربردهای آن
• تگ <span >و کاربردهای آن
• تگ <header >و کاربردهای آن
• تگ <footer >و کاربردهای آن
• تگ <section >و کاربردهای آن
• تگ <article >و کاربردهای آن
• تگ <aside >و کاربردهای آن
• تگ <details >و کاربردهای آن
• تگ <summary >و کاربردهای آن
• تگ <dialog> و کاربردهای آن
• مینی پروژه – ایجاد یک قالب کامل HTML5 بدون کدهای CSS
• معرفی سلکتورهای مختلف CSS
• سلکتور .class
• سلکتور #id
• سلکتور *
• سلکتور element
• سلکتور element,element
• سلکتور element element
• سلکتور element>element
• سلکتور element+element
• سلکتور element1~element2
• سلکتور [attribute]• سلکتور [attribute=value]• سلکتور [attribute~=value]• سلکتور [attribute|=value]• سلکتور [attribute^=value]• سلکتور [attribute$=value]• سلکتور [attribute*=value]• سلکتور :active
• سلکتور:checked
• سلکتور:disabled
• سلکتور:empty
• سلکتور:first-child
• سلکتور :first-of-type
• سلکتور :focus
• سلکتور :hover
• سلکتور :in-range
• سلکتور :invalid
• سلکتور :lang
• سلکتور :last-child
• سلکتور :last-of-type
• سلکتور :link
• سلکتور :not
• سلکتور :nth-child(n)
• سلکتور :nth-last-child(n)
• سلکتور :nth-last-of-type(n)
• سلکتور :nth-of-type(n)
• سلکتور :only-of-type
• سلکتور :only-child
• سلکتور :optional
• سلکتور :out-of-range
• سلکتور :read-only
• سلکتور :read-write
• سلکتور :required
• سلکتور :root
• سلکتور :target
• سلکتور :valid
• سلکتور :visited
• سلکتور ::selection
• سلکتور::after
• سلکتور::before
• سلکتور:: first-letter
• سلکتور:: first-line
• ذکر روند تدریس ویژگی های CSS
• ویژگی های پیشونددار مرورگرهای خاص
• پیشوند -moz -و مرورگر موزیال فایرفاکس
• پیشوند -ms -و اینترنت اکسپلورر
• پیشوند -o -و مرورگر اپرا
• پیشوند -webkit -برای کروم و سافاری
• ذکر معایب و مزایای استفاده از ویژگی های پیشوند دار در کنار ویژگی های استاندارد CSS3
• معرفی کیورد initial و کاربردهای آن
• معرفی کیورد inherit و کاربردهای آن
• معرفی کیورد none و کاربردهای آن
• معرفی کیورد auto و کاربردهای آن
• معرفی کیورد !important و کاربردهای آن
• معرفی Box-model
• تفاوت margin و border, padding
• آموزش ویژگی های مختلف زبان CSS
• ویژگی color و کاربردهای آن
• ویژگی opacity و کاربردهای آن
• ویژگی background و کاربردهای آن
• ویژگی background-attachment و کاربردهای آن
• ویژگی background-color و کاربردهای آن
• ویژگی background-image و کاربردهای آن
• ویژگی background-position و کاربردهای آن
• ویژگی background-repeat و کاربردهای آن
• ویژگی background-clip و کاربردهای آن
• ویژگی background-origin و کاربردهای آن
• ویژگی background-size و کاربردهای آن
• ذکر نکات مهم در مورد نحوه طراحی و انتخاب درست پس زمینه
• بحث تقارن پس زمینه و یکپارچه سازی پس زمینه نهایی با تکرار تصویر کوچک
• ویژگی border و کاربردهای آن
• ویژگی Border-color و کاربردهای آن
• ویژگی Border-radius و کاربردهای آن
• ویژگی Border-style و کاربردهای آن
• ویژگی Border-width و کاربردهای آن
• ویژگی Border-image و کاربردهای آن
• ویژگی text-shadow و کاربردهای آن
• ویژگی box-shadow و کاربردهای آن
• ویژگی overflow و کاربردهای آن
• ویژگی padding و کاربردهای آن
• ویژگی margin و کاربردهای آن
• ویژگی های letter-spacing و line-height و کاربردهای آن
• ویژگیtab-size و text-align و کاربردهای آن
• ویژگی text-indent و text-justify و کاربردهای آن
• ویژگی text-transform و کاربردهای آن
• ویژگی white-space و کاربردهای آن
• ویژگیword-break و کاربردهای آن
• ویژگی word-spacing و کاربردهای آن
• ویژگیWord-wrap و کاربردهای آن
• ویژگیtext-decoration و کاربردهای آن
• ویژگیtext-decoration-color و کاربردهای آن
• ویژگیtext-decoration-line و کاربردهای آن
• ویژگی text-decoratrion-style و کاربردهای آن
• ویژگی @face-font و کاربردهای آن
• ویژگی font و کاربردهای آن
• ویژگی family-font و کاربردهای آن
• ویژگیfont-family و کاربردهای آن
• ویژگیfont-style و کاربردهای آن
• ویژگیfont-variant و کاربردهای آن
• ویژگی font-weight و کاربردهای آن
• ویژگی position و کاربردهای آن
• ویژگی top و کاربردهای آن
• ویژگی left و کاربردهای آن
• ویژگی bottom و کاربردهای آن
• ویژگی right و کاربردهای آن
• ویژگی float و کاربردهای آن
• ویژگی clear و کاربردهای آن
• ویژگی clip و کاربردهای آن
• ویژگی display و کاربردهای آن
• ویژگی height و کاربردهای آن
• ویژگی width و کاربردهای آن
• ویژگی visibility و کاربردهای آن
• ویژگیvertical-align و کاربردهای آن
• ویژگی direction و کاربردهای آن
• ویژگیz-index و کاربردهای آن
• ویژگیborder-collapse و کاربردهای آن
• ویژگیborder-Spacing و کاربردهای آن
• ویژگی Caption-size و کاربردهای آن
• ویژگیempty-cell و کاربردهای آن
• ویژگیtable-layout و کاربردهای آن
• ویژگیincrement-counter و کاربردهای آن
• ویژگیreset-counter و کاربردهای آن
• ویژگیlist-style و کاربردهای آن
• ویژگی list-style-image و کاربردهای آن
• ویژگی list-style-position و کاربردهای آن
• ویژگی list-style-type و کاربردهای آن
• ویژگی content و کاربردهای آن
• ویژگی cursor و کاربردهای آن
• ویژگی outline و کاربردهای آن
• ویژگیoutline-color و outline-offset و کاربردهای آن
• ویژگیoutline-style و outline-width و کاربردهای آن
• ویژگی resize و کاربردهای آن
• ویژگیtext-overflow و کاربردهای آن
• ویژگی columns و کاربردهای آن
• ویژگی coulemn-countو کاربردهای آن
• ویژگی column-fill و column-gap و کاربردهای آن
• ویژگی column-rule و کاربردهای آن
• ویژگی column-rule-color و کاربردهای آن
• ویژگی column-rule-style و کاربردهای آن
• ویژگی column-rule-width و کاربردهای آن
• ویژگی column-space و کاربردهای آن
• ویژگی column-width و کاربردهای آن
• نمایش خروجی قالب و ساختار آن
• مرور و توضیح کلی در مورد تگ های قالب
• آشنایی با نحوه استاندارد نوشتن استایل ها و جداسازی آنها با کامنت های توضیحی
• استایل دهی بخش هدر قالب، عنوان سایت و توضیح آن
• ایجاد منوی باالی سایت و استایل دهی به آن
• رفع مشکل بیرون زدن تصاویر از باکس محتوا با یک ترفند ساده!
• استایل دهی بخش اسالیدر قالب
• چینش سایدبار و محتوا در کنار هم و استایل دهی کلی آن
• استایل دهی سایدبار قالب و محتوا و لیست های درون ان
• استایل دهی مقاالت و لینک ادامه مطلب و تاریخ انتشار آن
• استایل دهی فوتر قالب
• آشنایی با نحوه لینک دادن به بخشی از صفحه کنونی
• استایل دهی عمومی جدول ها با استفاده از CSS
• معرفی ابزاری خاص برای ایجاد استایل های مربوط به جدول ها
• ذکر نکات و موارد مورد نیاز برای ادامه دوره
• آموزش خطایابی و نحوه انجام تغیرات و رفع مشکلات موجود در صفحات وب
• معرفی ۳ پیشنیاز لازم برای انجام تغیرات و رفع مشکلات موجود در صفحات وب
• انجام تغییرات و رفع مشکلات در ظاهر وبسایت و صفحات وب
• انجام چندین تغییر در ظاهر یک وبسایت
• بررسی سورس کد صفحه وب و اعتبار سنجی آن
• بررسی سورس کد وبسایت و نمایش و توضیح خطاهای موجود در اعتبار سنجی آن
• ذکر نکاتی در مورد نحوه تمرین شما برای تسلط بیشتر
• ذکر نکاتی مختصر در مورد کپی کردن ظاهر قالب های دیگر
• ناسازگاری مرورگرها! چالش ها و نحوه کدنویسی استاندارد و صحیح
• تعریف ناسازگاری و منابع آن
• معرفی دلایل ایجاد ناسازگاری
• معرفی چندین روش و نکته مهم برای رهایی از ناسازگاری ها
• معرفی Reset CSS و دلیل استفاده از آن
• آشنایی با جاوااسکریپت و کاربرد آن در صفحات وب
• معرفی مفهوم DHTML
• معرفی اولیه زبان جاوااسکریپت
• توانایی ها مزیت های زبان جاوااسکریت
• معرفی کاربردهای زبان جاوااسکریپت
• مدل DOM و نحوه انجام تغیرات در صفحات وب توسط جاوااسکریپت
• اشیاء پیش ساخته در زبان جاوااسکریپت برای دریافت اطالعات جالب صفحه وب و مرورگر
• معرفی یک سایت و ابزار برای بررسی قابلیت های پشتیبانی شده در مرورگرهای مختلف
• توضیح کلی در مورد نحوه کدنویسی جاوااسکریپت
• ذکر یک مثال جاوااسکریپت برای مخفی سازی پاراگراف با کلیک روی دکمه
• آشنایی با جی کوئری و قواعد نوشتاری آن
• ذکر مثال معادل جی کوئری برای مخفی سازی پاراگراف با کلیک روی دکمه و نمایش تفاوت دو مثال
• ذکر مزیت های jquery نسبت به جاوااسکریپت خالص
• ایا برای کار با جی کوئری حتما یادگیری جاوااسکریپت ضروریست ؟
• آموزش روش کار و استفاده از پلاگین ها و کتابخانه های جی کوئری و CSS
• استفاده از پلاگین ها در بطن پروژه جلسه ۱۵ برای کاربردی بودن آموزش ها
• آموزش نحوه جستجوی برای یافتن پلاگین های مفید جی کوئری و CSS
• نکات مهمی در مورد استفاده از پلاگین ها
• چه زمانی از پلاگین ها استفاده کنیم و چه زمانی خودمان کدنویسی کنیم؟
• آموزش کامل استفاده از ۶ پلاگین کاربری( دانلود، مطالعه اسناد کمکی، نصب و استفاده(
• پلاگین :prefixfree رهایی از بند ویژگی های پیشوندی مرورگرهای مختلف
• پلاگینbuttons:css ایجاد دکمه های زیبا و متنوع به راحتی هر چه تمامتر
• پلاگین hint.css : ایجاد تولتیپ های متنوع و قابل تنظیم
• پلاگین fontAwesome : پلاگین و مجموعه عظیمی از آیکن های مورد استفاده در صفحات وب
• پلاگین PrettyPhoto : پلاگینی جذاب و زیبا برای نمایش lightbox با ظاهری شیک
• پلاگین ResponsiveSlides : پلاگینی کم حجم و کارا برای ایجاد اسلایدرهای واکنشگرا
• آموزش نحوه استفاده از تنظیمات پلاگین ها
• آموزش شخصی سازی دکمه های اسالیدر برای سازگاری با قالب و ایجاد ظاهر بهتر و شکیل تر
• ذکر نکته های کاربردی و مهم در طراحی صفحات وب
• نحوه انتخاب عرض مناسب برای قالب ها و صفحات وب
• بررسی رزولوشن مانیتور ها و آنالیز عرض آن ها برای انتخاب عرض صحیح قالب
• بررسی علل ایجاد اسکرول افقی و راه های پرهیز از اتفاق افتادن آن
• مقایسه انتخاب عرض قالب به صورت تمام عرض در مقابل عرض ثابت
• نکاتی در مورد استفاده از ویژگیmax-width برای ایجاد حد ماکزیمم
• نکته های مفید در تراز کردن عمودی و افقی متن ها و اشیاء در صفحات وب
• نحوه چیدن تگ ها و المان های بالکی در کنار هم
• چیدن تعداد خاصی باکس در یک سطر
• مینی پروژه : پیاده سازی کامل منوی بالای سایت حاوی زیر منوهای تو در تو
سوالات متداول
این دوره مختص افرادی است که قصد ورود به بازار کار و کسب در آمد میلیونی دارند. در این دوره ها، صفر تا صد تخصص مورد نظر پوشش داده شده و فرد برای ورود به بازار کار یا استخدام در شرکت های مطرح آماده می شود.
دوره ها هم به صورت حضوری و هم به صورت آنلاین برگذار می شود.
همچنین ویدئو تمام جلسات ضبط شده و در اختیار شما قرار خواهد گرفت.
بله. علاوه بر آزمون پایانی، آزمون های مقطعی به صورت کوئیز و در طول دوره انجام خواهد شد.
بله. در پایان دوره، گواهی حضور به شما داده خواهد شد.
خیر. در هر صورت گواهی حضور دریافت خواهید کرد، اما میزان نمره یا سطح شما، در گواهی قید خواهد شد.
میزان غیبت مجاز، 2 روز در طول دوره می باشد.
تنها تا 2 جلسه اول مجاز به لغو کلاس هستید. در این مرحله، 70 درصد مبلغ دریافتی پرداخت خواهد شد.
بله. برای اطلاعات بیشتر با واحد آموزش تماس بگیرید.
09364275000
خیر. برای شرکت در هیچ کلاسی، نیاز به هیچ مدرک دانشگاهی نیست.
در تمام خدمات ما.
طراحی وبسایت، خرید قالب، دوره های آموزشی، پنل های پیامکی و ….
تخفیف ها به دو صورت موقتی و دائمی ارائه می شوند. برخی از این تخفیف ها فقط تا مدت مشخصی قابل استفاده هستند و برخی هم زمان مشخصی برای استفاده نداشته و هر زمان که مایل باشید می توانید از آن ها استفاده کنید.
برخی از این تخفیف ها یکبار مصرف و برخی چندبار مصرف هستند.
بله، به همراه داشتن لپ تاپ شخصی در کلاس ها الزامی است.