Materialize CSS From Scratch With 5 Projects
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 | 00:06:00 | ||
| What is Materialize & Why Use It | 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:00: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 | ||
Course Reviews
No Reviews found for this course.
Related Courses
FULL SOLAR ENERGY Design Course(With SketchUp & PVSYST)
1£321.00£19.00
Improve Your Vision Naturally with Simple Eye Gymnastics
2£319.00£19.00
Inkscape Training - Vector Graphics Design
2£321.00£19.00
Instructors
Our Students Say..
Course content are awesome! Greatest course I had this time.
Ginny
StudentAn extremely helpful and informative course, especially in conjunction with quiz and video tutorial.
Mike
Student, FinanceGreat Course Content! Learn from anywhere using personal devices and Video is a good way to learn.
Kiara
Student