در این آموزش تصویری با نحوه ساخت وب سایت با استفاده از Google’s Material Design Lite آشنا می شوید. این دوره کار با HTML ، CSS و Bootstrap ، نحوه ایجاد وب سایت ، کار با ویرایشگر متنی و چگونگی توسعه سایت را آموزش می دهد.
این دوره آموزشی محصول موسسه Udemy است.

سرفصل های دوره:

  • کار با تنظیمات برنامه
  • نحوه ساخت وب سایت
  • نحوه اضافه کردن CSS و JS
  • کار با عناصر MDL
  • کار با CodePen
  • کار با جزئیات برنامه
  • کار با متن
  • کار با دکمه های مسطح و بزرگ
  • طراحی نوار پیشرفت CodePen
  • کار با منوها
  • دکمه های رادیویی
  • نحوه اضافه کردن برچسب
  • کار با ابزارهای برنامه
  • نحوه طراحی جدول
  • کار با سربرگ ها
  • کار با پاورقی
  • و…

عنوان دوره: Udemy Learn to make websites with Google’s Material Design Lite

مدت زمان: 6 ساعت
نویسنده: Adrian Henry

توضیحات:

A complete guide to Google's Front End Web Framework Material Design Lite.
Google's Material Design philosophy has been making waves in the design world and has now unified all interfaces used by Google. Including all of their websites and the apps they have available within the Android space.
The opportunity for developers to incorporate this Material Design philosophy into their own arsenal for front end development is now here. Google'e released the official framework for front end implementation of Material Design called Material Design Lite.
This course will take you through all the ins and outs of this framework. Including all Material Elements and Layouts as well as explaining some of the design and semantic coding considerations behind these elements.
If you are interested in responsive material layouts for the websites you build, then you should certainly learn the Material Design Lite framework, and what better time to start than right NOW?
What are the requirements?
Basic understanding of HTML and CSS
A Text editor
What am I going to get from this course?
Over 84 lectures and 5.5 hours of content!
Create a beautiful website using elements from Google's Material Design Lite Framework
Understand how to navigate some of the pitfalls that developers fall into when creating Material Design Websites
What is the target audience?
This course is intended for people who have a basic knowledge of HTML and CSS and are wanting to expand their abilities. Knowledge of any other HTML and CSS framework such as Bootstrap or Foundation is NOT required. This course is great for those interested in Google's Material Design philosophy or just developers wanting to integrate some material design elements into their workflow. This course will also suit beginners looking to improve their skills.
You should not take this course if you are not interested in developing sites with the Material Design look and feel. The course strictly focused on how to implement this look and feel into your sites using Google's new framework

Section 1: Start Here
Lecture 1	
Pre Welcome. An Unusual Start....
02:43
Quiz 1	
Intro Quiz
5 questions
Section 2: Welcome
Lecture 2	
Welcome
08:03
Lecture 3	
Material Design Spec
Text
Lecture 4	
Some Examples
05:16
Lecture 5	
Website Examples
Preview
02:31
Lecture 6	
What Will Be Covered?
12:10
Section 3: Getting Started
Lecture 7	
Adding the Required CSS and JS
01:35
Lecture 8	
A Bit About Color
06:41
Lecture 9	
Your First MDL Element
Preview
02:32
Lecture 10	
Material Icons
04:15
Lecture 11	
BEM Methodology
07:38
Lecture 12	
CodePen
06:38
Lecture 13	
Blank MDL Code Pen
Text
Section 4: Components
Lecture 14	
Material Badges
02:06
Lecture 15	
Badge Code
07:57
Lecture 16	
Badge Pitfalls
05:07
Lecture 17	
Badge CodePen
Text
Lecture 18	
Material Button Styles
03:51
Lecture 19	
Code for Flat and Raised Buttons
04:47
Lecture 20	
Code for Fab and Icon Buttons
06:54
Lecture 21	
Button CodePen
Text
Lecture 22	
Material Cards
03:30
Lecture 23	
Examples of Material Cards
02:29
Lecture 24	
Code for Card 1
Preview
05:12
Lecture 25	
Code for Card 2
09:41
Lecture 26	
Card CodePen
Text
Lecture 27	
Progress Bars
02:07
Lecture 28	
Code for Progress Bar
08:47
Lecture 29	
Progress Bar CodePen
Text
Lecture 30	
Spinners
01:26
Lecture 31	
Code for Spinner
03:09
Lecture 32	
Quirky Spinner
01:29
Lecture 33	
Spinner CodePen
Text
Lecture 34	
Material Menus
00:55
Lecture 35	
Code for Menus
08:26
Lecture 36	
Menu CodePen
Text
Lecture 37	
Material Slider
00:47
Lecture 38	
Code for Slider
03:49
Lecture 39	
Slider CodePen
Text
Lecture 40	
Toggle Inputs
Preview
01:45
Lecture 41	
Checkbox Code
05:13
Lecture 42	
Code for Radio Buttons
04:19
Lecture 43	
Code for Toggle Switch
02:24
Lecture 44	
Toggle Icon Code
03:04
Lecture 45	
Toggles CodePen
Text
Lecture 46	
Text Field Intro
02:36
Lecture 47	
Code for Basic Text Input
02:50
Lecture 48	
Code for Numerical Input
03:34
Lecture 49	
Code for Adding a Floating Label
01:40
Lecture 50	
Code for Multiline Text Input
02:10
Lecture 51	
Code for Expandable Input
08:08
Lecture 52	
Textfields CodePen
Text
Lecture 53	
Tooltips
01:16
Lecture 54	
Code for Tooltips
03:29
Lecture 55	
Tooltips Extras
00:34
Lecture 56	
ToolTips CodePen
Text
Lecture 57	
Material Tables
01:50
Lecture 58	
Code for Tables
09:44
Lecture 59	
Tables CodePen
Text
Section 5: Layouts
Lecture 60	
Material Design Layouts
Preview
03:56
Lecture 61	
Transparent Layout
10:39
Lecture 62	
Fixed Drawer Layout
04:51
Lecture 63	
Fixed Header Layout
06:44
Lecture 64	
Fixed Header and Drawer Layout
09:19
Lecture 65	
Scrolling Header Layout
02:47
Lecture 66	
Tabbed Layout
10:34
Lecture 67	
Waterfall Layout
06:06
Lecture 68	
Various CodePen's for all the Layout's
Text
Section 6: The MDL Responsive Grid
Lecture 69	
Intro to MDL Responsive Grid
06:15
Lecture 70	
Responsive Grid Code
10:52
Lecture 71	
Vertically Aligning Cells
03:59
Lecture 72	
Responsive Grid CodePen
Text
Section 7: Other MDL Elements
Lecture 73	
Tabbed Content Sections
Preview
01:28
Lecture 74	
Code for Tabbed Content Section
09:07
Lecture 75	
Tabbed Content CodePen
Text
Lecture 76	
Mini Footer
01:14
Lecture 77	
Code for Mini Footer
05:28
Lecture 78	
Mega Footer
02:29
Lecture 79	
Code for Mega Footer
10:39
Lecture 80	
Footer CodePens
Text
Section 8: Closing
Lecture 81	
Disabling Elements on the Page
02:45
Lecture 82	
Dynamically Creating Elements with JavaScript
06:10
Lecture 83	
Thank You
03:54
Lecture 84	
Feedback
02:20

حجم فایل: 510MB