Materialize CSS From Scratch With 5 Projects

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:53
  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