Materialize CSS From Scratch With 5 Projects

Materialize CSS From Scratch With 5 Projects

by Brad Traversy
Released May 2018
Publisher(s): Packt Publishing
ISBN: 9781789538724

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

Master HTML 5 and the Materialize CSS Framework by Building 5 Real-World Responsive Material Design-Based Themes

About This Video

  • CSS and JavaScript components, Animations/transitions.
  • Build 5 beautiful and completely responsive, real-world themes from absolute scratch.

In Detail

The author has 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 him 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..Travelville - A travel agency website/theme (Carousel slider, autocomplete, scrolling navigation)Quazzu - Cloud hosting theme (SideNav, cards, CSS overlays)Madmin - Interactive admin theme (Working todo list, charts, preloader, counter script)BizLand - Business consultation theme with a full screen landing page (Scrollfire, Google maps integration)Galappear - Graphic design portfolio (Uses Sass and scrollfire for scroll animations)

Downloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Intro & Getting Started
    1. Welcome To the Course 00:06:05
    2. What Is Materialize & Why Use It? 00:04:33
    3. Environment Setup 00:09:17
    4. Materialize Sandbox Setup 00:06:52
  2. Chapter 2 : CSS Components - Part 1
    1. Typography & Alignment 00:10:10
    2. Text & Background Colors 00:08:20
    3. Buttons & Icons 00:10:39
    4. Floating & Fixed Action Buttons 00:13:04
    5. Navbar 00:15:33
    6. Collections & Badges 00:12:31
    7. The Grid System 00:11:22
  3. Chapter 3 : CSS Components - Part 2
    1. Cards 00:21:30
    2. Breadcrumb & Footer 00:08:58
    3. Basic Form & Input Controls 00:14:40
    4. Fancy Form & Input Controls 00:14:32
    5. Tables & Media 00:05:43
    6. Chips & Pagination 00:10:05
    7. Preloaders 00:04:40
  4. Chapter 4 : Interactive Components - Part 1
    1. Carousel 00:08:04
    2. Collapsible 00:05:32
    3. Feature Discovery 00:06:52
    4. Dialogs (Toasts & Tooltips) 00:09:01
    5. Material Box & Slider 00:07:02
    6. Modals 00:09:01
  5. Chapter 5 : Interactive Components - Part 2
    1. Parallax 00:02:58
    2. Side Navigation 00:08:42
    3. PushPin 00:08:56
    4. ScrollSpy Nav Scrolling 00:04:32
    5. Tabs 00:07:37
  6. Chapter 6 : Project 1 – Travelville
    1. Project Intro 00:02:15
    2. Navbar & Sidenav 00:09:04
    3. Image Slider 00:07:25
    4. Search & Icon Boxes 00:11:15
    5. Popular Places & Gallery 00:14:27
    6. Contact Section & ScrollSpy 00:12:07
  7. Chapter 7 : Project 2 – Quazzu
    1. Project Intro 00:02:43
    2. Navbar & Showcase 00:15:11
    3. Boxes, About & Overlay 00:14:05
    4. Podcast Section & Testimonials Carousel 00:14:25
    5. Footer & Login Modal 00:08:06
    6. Solutions Page 00:15:44
    7. Signup Page 00:09:40
  8. Chapter 8 : Project 3 – Madmin
    1. Project Intro 00:03:39
    2. Navbar & Sidenav 00:12:15
    3. Stat Counters & Preloader 00:15:11
    4. Display Chart & Recent Comments 00:12:40
    5. Recent Posts & Todo List 00:15:44
    6. Floating Button & Modals 00:12:20
    7. Posts & Categories Pages 00:15:02
    8. Comments & Users Pages 00:09:39
    9. Login & Details Pages 00:12:59
  9. Chapter 9 : Project 4 – BizLand
    1. Project Intro 00:02:00
    2. Full Screen Header 00:14:17
    3. ScrollFire & Boxes 00:12:29
    4. About, Testimonials & ScrollSpy 00:12:55
    5. Contact & Google Map 00:13:45
  10. Chapter 10 : Project 5 - Galappear (With Sass)
    1. Project Intro 00:02:15
    2. Koala Setup & Sass 00:11:46
    3. Header & Navbar 00:08:55
    4. Changing & Using Variables 00:04:17
    5. Gallery Layout 00:11:05
    6. Modals & ScrollFire 00:11:43
    7. Inner Pages 00:07:45

Product information

  • Title: Materialize CSS From Scratch With 5 Projects
  • Author(s): Brad Traversy
  • Release date: May 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789538724