Materialize CSS From Scratch With 5 Projects
4.8 (1,374 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,694 students enrolled

Materialize CSS From Scratch With 5 Projects

Master HTML 5 & the Materialize CSS framework by building 5 real world responsive material design based themes
Bestseller
4.8 (1,374 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,694 students enrolled
Created by Brad Traversy
Last updated 2/2018
English
English [Auto-generated], Portuguese [Auto-generated]
Current price: $83.99 Original price: $119.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10.5 hours on-demand video
  • 31 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 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
Course content
Expand all 63 lectures 10:25:31
+ CSS Components - Part 1
7 lectures 01:21:37
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 01:20:05
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 45:32
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 32:43
Parallax
02:58
Side Navigation
08:42
PushPin
08:55
ScrollSpy Nav Scrolling
04:32
Tabs
07:36
+ Project 1 - Travelville
6 lectures 56:30
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 01:19:49
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 01:49:23
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 55:23
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 57:42
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
Requirements
  • Basic HTML & CSS
Description

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)

Who this course is for:
  • Anyone that wants to learn & master Materialize CSS and build real world themes