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
Course Curriculum
| Intro & Getting Started | |||
| Welcome To The Course | FREE | 00:06:00 | |
| What is Materialize & Why Use It | FREE | 00:05:00 | |
| Environment Setup | 00:09:00 | ||
| Materialize Sandbox Setup | 00:07:00 | ||
| CSS Components - Part 1 | |||
| 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 | ||
| CSS Components - Part 2 | |||
| 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 | ||
| Interactive Components - Part 1 | |||
| 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 | ||
| Interactive Components - Part 2 | |||
| Parallax | 00:03:00 | ||
| Side Nav | 00:09:00 | ||
| Pushpin | 00:09:00 | ||
| Scrollspy | 00:05:00 | ||
| Tabs | 00:08:00 | ||
| Project 1 - Travelville | |||
| 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 - Quazzu | |||
| 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 - Madmin | |||
| 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 - BizLand | |||
| 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 - Galappear (With Sass) | |||
| 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 | ||
FAQs
This course is for anyone who's interested in this topic and wants to learn more about it. This course will also help you gain potential professional skills.
No prior qualifications are needed to take this course.
You can study this course from wherever and whenever you want. You can study at your own pace and from any device. Just log in to your account from any device and start learning!
Yes, there is a test at the end of the course. Once you’ve completed all the modules of the course, you will have to give a multiple-choice test. The questions will be based on the topics of the modules you studied. And of course, you can take the test at any time, from any device and from anywhere you want.
Don’t worry if you fail the test, you can retake it as many times as you want.
You don’t have to wait a minute after your payment has been received, you can begin immediately. You will create your login details during the checkout process and we will also send you an email confirming your login details.
We make the payment process easy for you. You can either use your Visa, MasterCard, American Express, Solo cards or PayPal account to pay for the online course. We use the latest SSL encryption for all transactions, so your order is safe and secure.
After you complete the course, you’ll immediately receive a free printable PDF certificate. Hard Copy certificate is also available, and you can get one for just £9! You may have to wait for 3 to 9 days to get the hard copy certificate.
Related Courses
Course Reviews
