Course 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..
- 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)
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
Requirements
- Basic HTML & CSS
Who is the target audience?
- Anyone that wants to learn & master Materialize CSS and build real world themes
-
Welcome To The Course
00:06:00 -
What is Materialize & Why Use It
00:05:00 -
Environment Setup
00:09:00 -
Materialize Sandbox Setup
00:07:00
-
Typography & Alignment
00:10:00 -
Text & Background Colors
00:08:00 -
Buttons and Icons
00:11:00 -
Floating & Fixed Action Buttons
00:13:00 -
Navbar
00:16:00 -
Collections & Badges
00:13:00 -
The Grid System
00:11:00
-
Cards
00:22:00 -
Breadcrumbs & Footer
00:09:00 -
Basic Form & Input
00:15:00 -
Fancy Form & Input
00:15:00 -
Tables & Media
00:06:00 -
Chips & Pagination
00:10:00 -
Preloaders
00:05:00
-
Carousel
00:08:00 -
Collapsible Accordions
00:06:00 -
Feature Discovery
00:07:00 -
Dialogs
00:09:00 -
Material Box and Slider
00:07:00 -
Modals
00:09:00
-
Parallax
00:03:00 -
Side Nav
00:09:00 -
Pushpin
00:09:00 -
Scrollspy
00:05:00 -
Tabs
00:08:00
-
Project 1 Intro
00:02:00 -
Navbar & Sidenav
00:12:00 -
Image Slider
00:07:00 -
Search & Icon Boxes
00:11:00 -
Popular Places & Gallery
00:14:00 -
Contact Section & Scrollspy
00:12:00
-
Project 2 Intro
00:03:00 -
Navbar & Showcase
00:15:00 -
Icon Boxes, About and Overlay
00:14:00 -
Podcast Section & Testimonial Carousel
00:14:00 -
Footer & Login Modal
00:08:00 -
Solutions Page
00:16:00 -
Signup Page
00:10:00
-
Project 3 Intro
00:04:00 -
Navbar & Sidenav
00:12:00 -
Stat Counters & Preloader
00:15:00 -
Display Chart & Recent Comments
00:13:00 -
Recent Posts & Todo List
00:16:00 -
Floating Button & Modals
00:12:00 -
Posts & Categories Pages
00:15:00 -
Comments & Users Pages
00:10:00 -
Login & Details Pages
00:13:00
-
Project 4 Intro
00:02:00 -
Full Screen Header
00:14:00 -
ScrollFire & Boxes
00:12:00 -
About, Testimonials & ScrollSpy
00:13:00 -
Contact & Google Map
00:14:00
-
Project 5 Intro
00:02:00 -
Koala Setup & Sass
00:12:00 -
Header and Nav
00:09:00 -
Changing & Using Variables
00:04:00 -
Gallery Layout
00:11:00 -
Modals & ScrollFire
00:12:00 -
Inner Pages
00:08:00
Course Reviews
No Reviews found for this course.