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

Course Images

Materialize CSS From Scratch With 5 Projects

By iStudy UK

Booking options

Highlights

Description

About The Provider

Tags

Reviews