Materialize CSS From Scratch With 5 Projects

Materialize CSS From Scratch With 5 Projects

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 10.5 Hours | 1.62 GB

Master HTML 5 & the Materialize CSS framework by building 5 real world responsive material design based themes

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)

What Will I 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
Table of Contents

Intro Getting Started
1 Welcome To The Course
2 What Is Materialize Why Use It
3 Environment Setup
4 Materialize Sandbox Setup

CSS Components – Part 1
5 Typography Alignment
6 Text Background Colors
7 Buttons Icons
8 Floating Fixed Action Buttons
9 Navbar
10 Collections Badges
11 The Grid System

CSS Components – Part 2
12 Cards
13 Breadcrumb Footer
14 Basic Form Input Controls
15 Fancy Form Input Controls
16 Tables Media
17 Chips Pagination
18 Preloaders

Interactive Components – Part 1
19 Carousel
20 Collapsible
21 Feature Discovery
22 Dialogs (Toasts Tooltips)
23 Material Box Slider
24 Modals

Interactive Components – Part 2
25 Parallax
26 Side Navigation
27 PushPin
28 ScrollSpy Nav Scrolling
29 Tabs

Project 1 – Travelville
30 Project Intro
31 Navbar Sidenav
32 Image Slider
33 Search Icon Boxes
34 Popular Places Gallery
35 Contact Section ScrollSpy

Project 2 – Quazzu
36 Project Intro
37 Navbar Showcase
38 Boxes About Overlay
39 Podcast Section Testimonials Carousel
40 Footer Login Modal
41 Solutions Page
42 Signup Page

Project 3 – Madmin
43 Project Intro
44 Navbar Sidenav
45 Stat Counters Preloader
46 Display Chart Recent Comments
47 Recent Posts Todo List
48 Floating Button Modals
49 Posts Categories Pages
50 Comments Users Pages
51 Login Details Pages

Project 4 – BizLand
52 Project Intro
53 Full Screen Header
54 ScrollFire Boxes
55 About Testimonials ScrollSpy
56 Contact Google Map

Project 5 – Galappear (With Sass)
57 Project Intro
58 Koala Setup Sass
59 Header Navbar
60 Changing Using Variables
61 Gallery Layout
62 Modals ScrollFire
63 Inner Pages