Booking options
Price:
BuyContact Us£25
Course Images
Materialize CSS From Scratch With 5 Projects
By iStudy UK
- 30 Day Money Back Guarantee
- Completion Certificate
- 24/7 Technical Support
Highlights
On-Demand course
10 hours 32 minutes
All levels
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
| 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 | ||
About The Provider
We understand more than anyone how important it is for yo...
Reviews
There are no reviews for Materialize CSS From Scratch With 5 Projects yet.Why not be the first one to review this course?