دوره حضوری/آنلاین جامع طراحی سایت HTML CSS VSCode JavaScript jQuery
خلاصه دوره طراحی سایت:
دوره طراحی سایت شامل برنامه‌ریزی، ساخت و نگهداری وب سایت می‌شود. یک طراح وب وظیفه دارد که مطمئن شود، یک وب سایت از نظر بصری چشم‌نواز باشد، جست‌وجو در آن به‌راحتی انجام گیرد، به خوبی نگهداری شود و برای طیف گسترده‌ای از کاربران قابل دسترسی باشد. یک طراح وب ممکن است با یک تیم کار کند و مسئولیت بخشی از پروژه را به‌عهده داشته‌باشد و یا تمام مسئولیت‌های طراحی یک وب سایت را به تنهایی انجام دهد.
تخمین‌زده می‌شود که تا سال 2040، 95 درصد از خریدها به شکل آنلاین و از طریق وب سایت‌ها انجام گیرد که در نتیجه بازار کار طراحی وب با تقاضای بالایی روبه‌رو خواهدشد.
در دوره طراحی سایت با مطالب زیر آشنا می‌شوید:
• HTML، CSS ، JavaScript : زبان‌های برنامه نویسی مورد نیاز برای طراحی سایت
• jQuery: کتابخانه جاوا اسکریپت که طراحی سایت با این زبان برنامه نویسی را سریع‌تر و آسان‌تر می‌کند.
• Visual Studio Code (VS Code): یک ویرایشگر کد منبع باز می‌باشد که به وسیله مایکروسافت برای سیستم عامل‌های لینوکس، ویندوز و مک طراحی شده‌است.
• Bootstrap: یک فریمورک رایگان برای توسعه سریع‌تر و آسان‌تر وب
اگر در زمینه یادگیری و آموزش طراحی سایت جدی هستید، بهترین راه‌حل یافتن بستری است که بتواند شما را برای حضور در بازارکار آماده کند. برنامه درسی ما در سماتک به نحوی است که شما را برای رسیدن به این هدف یعنی فعالیت در حوزه طراحی سایت آماده می‌کند.
مدت دوره طراحی سایت:
90 ساعت
پیش‌نیاز دوره طراحی سایت:
آشنایی با مبانی کامپیوتر
مخاطب دوره طراحی سایت:
افرادی که تمایل به طراحی و برنامه نویسی تحت وب دارند و قصد دارند که برای خود و یا دیگران وب سایت طراحی کنند.
اهداف دوره طراحی سایت:
در انتهای دوره طراحی سایت دانشجويان قادر خواهند بود:
1. مبانی طراحی وب را تعریف کنند.
2. گرافیک‌های طراحی‌شده را به وب سایت استاتیک تبدیل نمایند.
3. اسلایدرها را طراحی و ایجاد نمایند.
4. با استفاده از جاوا اسکریپت و jQuery صفحات را مدرن و تعاملی سازند.
5. پس از آشنایی با طراحی ریسپانسیو، با استفاده از bootstrap سایت‌های ریسپانسیو را طراحی نمایند.
6. وب سایت طراحی‌شده را بر روی اینترنت بارگذاری نمایند.
7. مفهوم Ajax و نحوه کاربرد آن در jQuery را توضیح دهند.
سرفصل دوره طراحی سایت:
HTML5 – CSS3
• آشنایی با مفهوم و تاریخچه وب و زیرساخت‌های نرم افزاری و سخت افزاری لازم برای ایجاد ، استقرار و نگهداری وب سایت‌ها
• معرفی مفاهیم شبکه‌ای مرتبط با وب مانند: Domain،Host،Web Server،DNS Server
• معرفی مفاهیم نرم افزاری مرتبط با طراحی وب مانند: HTML و CSS
• بررسی مفهوم Markup Language و Cascading Style Sheet
• تشریح نحوه عملکرد Web Browser ها
• بررسی مفهوم Search Engine، SEO، UI (واسط کاربری) ، UX
• بررسی مفهوم Responsive (واکنش گرا)
• بررسی مفهوم Tag و ساختار یک سند HTML استاندارد
• معرفی DOCTYPE
• آموزش روش آماده‌سازی بستر طراحی وب و نرم افزارهای مربوطه
• ارائه طبقه‌بندی تگ‌ها مانند: Text Level و Block Level،List و …
• بررسی نکات مربوط به List ها
• بررسی پاراگراف‌ها ،span و کلیه تگ‌های طبقه‌بندی‌شده
• معرفی مفهوم Attribute ، معرفی مفهوم Comment و دلائل استفاده از آن
• معرفی و ارائه مثال از تگ‌های مربوط به هرطبقه
• بررسی استانداردهای نامگذاری المان‌ها
• بررسی مفهوم Validation در اسناد HTML
• معرفیCSS و بررسی نقش CSS در آرایش تگ‌ها
• بررسی روش‌های مختلف اعمال Style روی تگ‌ها مانند : Inline، Internal، External
• معرفی انواع Selector ها در CSS
• بررسی نحوه استفاده از تصاویر در سند HTML
• بررسی انواع File Path ، Image Map و نحوه استفاده از تصاویر در Background
• بررسی نکات مربوط به استفاده از تصاویر در Background مانند Repeat و …
• بررسی نحوه استفاده از صدا و تصویر در Background
• معرفی IFrame و روش استفاده از آن
• ایجاد انیمیشن با تصاویر و ابزارهای مربوطه
• بررسی نحوه استفاده از رنگ و فونت
• بررسی نکات مربوط به فونت مانند: Size و Weight و …
• معرفی انواع فونت‌ها و پسوندهای مربوطه
• بررسی روش استفاده از کاراکترهای خاص در سند HTML
• معرفی مفهوم Hyper Link و نکات مربوط به Navigation
• آشنایی با مفهوم Anchor و Hash
• بررسی روش ایجاد منو و انواع آن
• بررسی روش‌های مختلف آدرس دهی لینک‌ها مثلا Internal و External
• بررسی تگ Table و اجزاء مختلف آن و معایب و مزایای Table
• بررسی نحوه استفاده از Table برای چیدمان و نحوه اختصاص اندازه به المان‌ها
• بررسی نکات مربوط به Formatting در Tableو نکات جدید HTML5 در جداول
• بررسی مفهوم Layout های Table Less
• بررسیDIV و نکات مربوطه در حیطه Positioning
• بررسی روش‌های تقسیم‌بندی صفحه و مفاهیم Margin ، Padding
• بررسیBorder و نکات مربوطه
• بررسی نکات مربوط به Text مانند Direction ،Decoration،Align و …
• بررسی نکات مربوط به Positioning در CSS3
• بررسی نکات حرفه‌ای‌تر در CSS3 مانند: Animation و Transition Bottom of Form
• بررسی انواع Effect ها در CSS3
• بررسی نکات مربوط به Transform در CSS3
• بررسی انواع Layout ها
• معرفی مفهوم Float و Absolute و …
• معرفی مفاهیم مرتبط با Boxing
• بررسیForm و انواع Input ها
• معرفی تگ‌های مفهومی HTML5
• بررسی Canvas و نحوه استفاده از آن و بررسی SVG و نحوه استفاده از آن
• بررسی و نحوه استفاده از وب فونت‌ها Font Face
• معرفی Media Query
• معرفی و پیاده سازی Responsive Layout
Visual Studio Code (VS Code)
• آشنایی با رابط کاربری VS Code
• نحوه ایجاد پروژه و فایل
• نحوه نصب Extentions و معرفی extention های مورد نیاز
• چگونگی شخصی‌سازی محیط
• چگونگی استفاده از LiveServer جهت نمایش سایت
• چگونگی دیباگ‌کردن در vs code
• نحوه ساخت و استفاده از Task
JavaScript & jQuery
• بررسی مفهوم Client Side کد و لزوم وجود امکان برنامه نویسی سمت کلاینت
• معرفی زبان برنامه نویسیJava Script و روش استفاده از آن در یک سند HTML
• بررسی نکات مربوط به تگ Script و محل نوشتن دستورات
• معرفی مفهوم متغیر و ارائه نکات مربوط به متغیرها در Java Script
• بررسی متغیرهایLocal و Global
• بررسی مفهوم Notation و روش رعایت آن در Java Script
• بررسی فایل‌های JS و روش استفاده از آن‌ها
• بررسی انواع عملگرها
• معرفی مفهوم شرط و ساختارهای بررسی شرط
• بررسی دستور switch
• بررسی مفهوم حلقه و موارد نیاز به حلقه‌های تکرار
• بررسی انواع حلقه‌های تکرار و حلقه‌های while و for و …
• بررسی روش تعریف تابع و نکات مربوطه
• بررسی مفهوم رویداد، روش اداره آن و تنوع رویداد های المان‌ها
• معرفی DOM و اجزاء آن و روش دسترسی به آن‌ها
• بررسی انواع روش‌های دسترسی به المان‌ها مانند: دسترسی بر اساس id و …
• بررسی روش درج، حذف و ویرایش المان‌ها و Node ها
• بررسی روش دسترسی به Node های پدر و فرزند و حالت‌های متنوع دسترسی
• معرفی innerText و innerHTML
• معرفی Framework و مفهوم آن و انواع Framework های Java Scrip
• معرفی jQuery و مزایای استفاده از آن
• بررسی روش استفاده از jQuery در یک سند HTML
• بررسی و مقایسه عملیات مختلف مانند: اداره رویداد، فراخوانی توابع، مقداردهی به مشخصه‌ها در jQuery و Java Script
• معرفیSelector هایjQuery و نکات مربوطه
• آشنايی با jQuery و نحوه نصب و شیوه کار با آن
• آموزش قواعد نوشتاری در jQuery
• آموزش دسترسی به المان‌هایhtml در jQuery
• آموزش دسترسی به تمام المان‌ها Select To Every Things
• آموزش دسترسی به وسيله شناسه ID Selector
• آموزش دسترسی به وسيله‌ی نام تگ Tag Name Selector
• آموزش دسترسی به وسيله‌ی کلاس Class Selector
• آموزش دسترسی به وسيله‌ی Attribute Selector
• آموزش دسترسی توسط نمايش و عدم نمايش Selecting Visibility
• آموزش دسترسی توسط فرزند و پدر Selecting Parents and Children
• آموزش رويدادها و معرفیEffect ها در jQuery
• معرفی مفهوم AJAX و بررسی روش پیاده‌سازی آن در Java Script و jQuery و مزایای آن
Bootstrap
• معرفی مفهوم CSS Framework
• معرفی و بررسی تاریخچه Bootstrap
• بررسی روش استفاده از Bootstrap در یک سند HTML
• معرفی Grid System
• معرفی انواع سایزها و کلاس‌های مرتبط و روش تشخیص Resolution کاربر
• معرفیResponsive Layout در Bootstrap
• بررسی Typography با Bootstrap
• بررسی روش ایجاد فرم و کلاس‌های مرتبط
• بررسی روش پنهان‌سازی بخش‌هایی از سند
• بررسی نکات و کلاس‌های مرتبط با جدول
• بررسی نکات و کلاس‌های مرتبط با تصاویر
• بررسی روش استفاده از Icon ها
• بررسی روش استفاده از Helper ها
• بررسی نکات کلاس‌های مرتبط با دکمه
بررسی ارائه مثال از موارد زیر:
o Button groups
o Button dropdowns
o Input groups
o Nav
o Navbar
o Breadcrumbs
o Pagination
o Labels
o Badges
o Jumbotron
o Page header
o Thumbnails
o Alerts
o Progress bars
o Media object
o List group
o Panels
o Wells
o Modal Form
o Affix
o Scrollspy
o Carousel
جزئیات سرفصل آموزشی دوره طراحی سایت را از طریق لینک زیر دریافت کنید:
پاسخ به سوال‌های شما درباره دوره طراحی سایت
در ادامه به متداول‌ترین سوالاتی که دانشجوها از ما در مورد دوره آموزش طراحی سایت می‌پرسند، پاسخ می‌دهیم:
بعد از گذراندن دوره آموزش طراحی سایت در چه مشاغلی می‌توانم فعالیت کنم؟
پس از اتمام دوره طراحی سایت، ممکن است برای موقعیت‌هایی مانند طراح وب، توسعه‌دهنده وب، توسعه‌دهنده Front-end، طراح UX، طراح UI یا توسعه‌دهنده وردپرس واجد شرایط باشید. متوسط حقوق یک توسعه‌دهنده وب یا طراح دیجیتال بسته به عنوان شغلی و مکان خاص فرد متفاوت خواهد‌بود.
قبل از شروع یادگیری در مورد طراحی سایت، چه مهارت یا تجربه‌ای باید داشته‌باشم؟
قبل از شروع یادگیری و آموزش طراحی سایت، فقط باید مهارت‌های اولیه کامپیوتر را داشته‌باشید. برخی تجربه‌ها، مانند: شرکت در کلاس‌های ریاضی و دوره‌های منطق و الگوریتم، می‌تواند یادگیری و آموزش طراحی سایت یا پیشرفت در درس‌ها را برای شما آسان‌تر کند.
همچنین آشنایی با طراحی گرافیکی یا آزمایش ابزارهای طراحی گرافیکی می‌تواند به شما کمک کند تا برای کار با عناصر بصری و ایجاد چیدمان‌های زیباشناختی آماده‌شوید. صرف وقت در فضای آنلاین و توجه به ظاهر و عملکرد وب سایت‌های مختلف نیز می‌تواند شما را برای مطالعه و آموزش طراحی سایت آماده‌کند.
چه نوع افرادی برای ایفای نقش در حوزه طراحی سایت مناسب هستند؟
افراد خلاق و مسلط به کامپیوتر، برای ایفای نقش در طراحی وب مناسب هستند. یک طراح سایت باید به جزئیات توجه‌داشته‌باشد و همچنین بتواند مفاهیم خلاقانه و چشم‌نواز را ارائه دهد. ذهن منطقی و حس سازماندهی به یک طراح وب اجازه می‌دهد تا محصولی را تولید کند که کاربر پسند باشد و بتوان به راحتی از آن استفاده کرد.
همچنین یک طراح سایت علاوه‌بر صبوربودن باید بتواند انتقادهای مشتریان و بازدیدکنندگان وب سایت را بپذیرد. طراحان وب فریلنسر باید به اندازه کافی خودانگیخته باشند تا به‌طور مداوم به دنبال مشتریان جدید بگردند.
چگونه بفهمم که یادگیری و آموزش طراحی سایت برای من مناسب است؟
اگر علاقه‌مند به ایجاد فضایی برای خود در اینترنت و یا کمک به افراد یا مشاغل در انجام این کار هستید، یادگیری و آموزش طراحی سایت ممکن است برای شما مناسب‌باشد. همچنین ممکن است شما صاحب کسب‌وکاری باشید که نیاز به ایجاد یک فروشگاه آنلاین دارد، یا شاید هنرمندی باشید که می‌خواهید سایتی ایجاد کنید و نمونه کارهای خود را به نمایش بگذارید
طراحی وب یک سرگرمی یا مسیر شغلی ایده‌آل برای هرکسی است که علاقه زیادی به تعامل با جوامع آنلاین دارد و بدش نمی‌آید که زمان زیادی را جلوی صفحه رایانه صرف کند. دوره آموزش طراحی سایت سماتک تمام مباحث موردنیاز برای شروع فعالیت در حوزه طراحی سایت را پوشش می‌دهد و به شما کمک می‌کند که برای ورود به بازار کار این رشته آماده‌شوید.