Mô tả

This course is for anyone that knows basic HTML and a little CSS that wants to take their frontend website and UI creation to the next level using the Materialize CSS framework which is based off of Google's Material Design scheme. You will learn all of the CSS and JavaScript components, animations/transitions and build 5 beautiful and completely responsive, real world themes from absolute scratch.

Custom Materialize Sandbox

I have created a completely custom HTML learning environment for the first few sections of this course. Each lecture has an html page associated with it and has a start state. As we move along through the lectures, you code along with me learning all that Materialize offers including CSS components, utilities, JS widgets and more.

5 Real Projects/Themes

We will create the following projects from scratch..

  1. Travelville -  A travel agency website/theme  (Carousel slider, autocomplete, scrolling navigation)
  2. Quazzu - Cloud hosting theme (SideNav, cards, CSS overlays)
  3. Madmin - Interactive admin theme (Working todo list, charts, preloader, counter script)
  4. BizLand - Business consultation theme with a full screen landing page (Scrollfire, Google maps integration)
  5. Galappear - Graphic design portfolio (Uses Sass and scrollfire for scroll animations)

Bạn sẽ học được gì

Learn to correctly structure HTML 5 documents with semantic tags and attributes

Learn and create amazing high quality Materialize themes and UIs from scratch

Learn the Materialize utilities, classes, components & JS widgets using a custom sandbox environment

Learn some custom JavaScript/JQuery to make your themes more interactive

Yêu cầu

  • Basic HTML & CSS

Nội dung khoá học

10 sections

Intro & Getting Started

4 lectures
Welcome To The Course
06:05
What Is Materialize & Why Use It?
04:33
Environment Setup
09:17
Materialize Sandbox Setup
06:52

CSS Components - Part 1

7 lectures
Typography & Alignment
10:09
Text & Background Colors
08:20
Buttons & Icons
10:39
Floating & Fixed Action Buttons
13:04
Navbar
15:32
Collections & Badges
12:31
The Grid System
11:22

CSS Components - Part 2

7 lectures
Cards
21:29
Breadcrumb & Footer
08:57
Basic Form & Input Controls
14:40
Fancy Form & Input Controls
14:32
Tables & Media
05:42
Chips & Pagination
10:05
Preloaders
04:40

Interactive Components - Part 1

6 lectures
Carousel
08:04
Collapsible
05:32
Feature Discovery
06:52
Dialogs (Toasts & Tooltips)
09:01
Material Box & Slider
07:02
Modals
09:01

Interactive Components - Part 2

5 lectures
Parallax
02:58
Side Navigation
08:42
PushPin
08:55
ScrollSpy Nav Scrolling
04:32
Tabs
07:36

Project 1 - Travelville

6 lectures
Project Intro
02:15
Navbar & Sidenav
09:03
Image Slider
07:24
Search & Icon Boxes
11:14
Popular Places & Gallery
14:27
Contact Section & ScrollSpy
12:07

Project 2 - Quazzu

7 lectures
Project Intro
02:42
Navbar & Showcase
15:11
Boxes, About & Overlay
14:04
Podcast Section & Testimonials Carousel
14:24
Footer & Login Modal
08:06
Solutions Page
15:43
Signup Page
09:39

Project 3 - Madmin

9 lectures
Project Intro
03:38
Navbar & Sidenav
12:14
Stat Counters & Preloader
15:11
Display Chart & Recent Comments
12:39
Recent Posts & Todo List
15:44
Floating Button & Modals
12:19
Posts & Categories Pages
15:01
Comments & Users Pages
09:38
Login & Details Pages
12:59

Project 4 - BizLand

5 lectures
Project Intro
01:59
Full Screen Header
14:16
ScrollFire & Boxes
12:29
About, Testimonials & ScrollSpy
12:54
Contact & Google Map
13:45

Project 5 - Galappear (With Sass)

7 lectures
Project Intro
02:14
Koala Setup & Sass
11:45
Header & Navbar
08:55
Changing & Using Variables
04:16
Gallery Layout
11:04
Modals & ScrollFire
11:43
Inner Pages
07:45

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.