Materialize CSS From Scratch With 5 Projects

Master HTML 5 & the Materialize CSS framework by building 5 real world responsive material design based themes

4.55 (1757 reviews)
Udemy
platform
English
language
Web Development
category
instructor
11,388
students
10.5 hours
content
Feb 2018
last update
$79.99
regular price

What you will 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

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..

  1. Travelville -  A travel agency website/theme  (Carousel slider, autocomplete, scrolling navigation)
  2. Quazzu - Cloud hosting theme (SideNav, cards, CSS overlays)
  3. Madmin - Interactive admin theme (Working todo list, charts, preloader, counter script)
  4. BizLand - Business consultation theme with a full screen landing page (Scrollfire, Google maps integration)
  5. Galappear - Graphic design portfolio (Uses Sass and scrollfire for scroll animations)

Content

Intro & Getting Started

Welcome To The Course
What Is Materialize & Why Use It?
Environment Setup
Materialize Sandbox Setup

CSS Components - Part 1

Typography & Alignment
Text & Background Colors
Buttons & Icons
Floating & Fixed Action Buttons
Navbar
Collections & Badges
The Grid System

CSS Components - Part 2

Cards
Breadcrumb & Footer
Basic Form & Input Controls
Fancy Form & Input Controls
Tables & Media
Chips & Pagination
Preloaders

Interactive Components - Part 1

Carousel
Collapsible
Feature Discovery
Dialogs (Toasts & Tooltips)
Material Box & Slider
Modals

Interactive Components - Part 2

Parallax
Side Navigation
PushPin
ScrollSpy Nav Scrolling
Tabs

Project 1 - Travelville

Project Intro
Navbar & Sidenav
Image Slider
Search & Icon Boxes
Popular Places & Gallery
Contact Section & ScrollSpy

Project 2 - Quazzu

Project Intro
Navbar & Showcase
Boxes, About & Overlay
Podcast Section & Testimonials Carousel
Footer & Login Modal
Solutions Page
Signup Page

Project 3 - Madmin

Project Intro
Navbar & Sidenav
Stat Counters & Preloader
Display Chart & Recent Comments
Recent Posts & Todo List
Floating Button & Modals
Posts & Categories Pages
Comments & Users Pages
Login & Details Pages

Project 4 - BizLand

Project Intro
Full Screen Header
ScrollFire & Boxes
About, Testimonials & ScrollSpy
Contact & Google Map

Project 5 - Galappear (With Sass)

Project Intro
Koala Setup & Sass
Header & Navbar
Changing & Using Variables
Gallery Layout
Modals & ScrollFire
Inner Pages

Screenshots

Materialize CSS From Scratch With 5 Projects - Screenshot_01Materialize CSS From Scratch With 5 Projects - Screenshot_02Materialize CSS From Scratch With 5 Projects - Screenshot_03Materialize CSS From Scratch With 5 Projects - Screenshot_04

Reviews

Fabian
July 6, 2022
Another outstanding course by Brad! Nice projects, and as always his style of teaching is just great! Keeps you engaged and interested to the very end. You can apply what you learn in each section of this course almost immediately.
Ramakant
June 30, 2022
Instructor is teaching himself at a pace which suits him. Student has to wasting time pausing videos going back and forth all the time. Saying its not course of Sass, Instructor completely ignored talking Sass or giving even a brief intro of essentials about Sass. Although Sass is very much related to css in turn Materialize css which this course is all about. Student who new to Sass find unable to understand the very last project of this course. I will suggest instructor to increase his pace while designing his new courses so that students have to rewind videos over and over again to waste their precious time to understand things bit by bit.
Patrick
July 26, 2021
Great course, great teacher! Learnt all the basics, then applied in 5 different projects which were very practical for real world situations. The inclusion of sass in the last project was a great addition. Highly recommend!
Kevin
June 23, 2021
Brilliant Course - Thanks! I learn more and more until I repead it and also in combination with bootstrap, html, css and the js course it comes closer and connect the concepts to each other step by step for me - great value these course! Thank you really.
Charles
April 19, 2021
Overall Brad does a great job of explaining Materialize and as usual his project-based approach is a great way to learn. The downside is that Google has changed the way you interact with the Google Maps API since the course was published and Materialize 1.00 has been release that eliminates the dependency on JQuery so the course needs to be updated. Having said that, the course does provide a good grounding in understanding how Materialize works and can be used to design web sites.
Aytaç
March 28, 2021
Brad Traversy is a great instructor, I like his way of teaching and in almost all course that I took from Brad, I learned many things about the subjects of the course.
Oliver
March 1, 2021
Learning web development skills with online university but find Brad's tutorials easier to follow and more relevant to what I want from my learning. Thanks Brad.
Kyle
January 18, 2021
Brad is a good teacher and I feel very comfortable using Materialize now. Course does seem slightly outdated however everything still works the same.
Stephen
January 14, 2021
My fourth Brad Traversy Udemy course and each one just gets better. Thank you Brad for all your time and effort.
Abdulrahman
January 2, 2021
I think it's a great knowledge for a css framework ,but in my opinion when you use framework alot you will lose creativity on html css so.. i think my advice not useing framework in all projects .
Murugappan
December 26, 2020
The lecturer is very good. I had reduce the ratings because the course has not been update for so long and many things have changed. The author should either upgrade or delete. Lots of missing explanations too. I struggled to find what "data-activates" is all about.
Yyyen93
December 10, 2020
I learned how to deploy sass and the features of materialize css. I hope to have more updated version.
Carlos
May 2, 2019
Amazing course. This is the third course I participate. The teacher has very deep knowledge about each part of this. Each project has a professional appearance and through these is possible to assimilate and get very useful tips for work day. Thanks and Congrats for the high quality of the course! I really recommend that!
Matt
April 28, 2019
I'm not a designer, so this is awesome. This will make it much easier for me to build more professional-looking projects full stack.
Tibi
April 24, 2019
This course is outdated! The course covers an older alpha version of Materialize! Version 1.0.0 of Materialize has been out for some time and has changed a couple of things. Going through some of sections of this course cost me some nerves and patience, because I wasn't sure if I was doing something wrong or the instructor forgot to update the course video. Most of the changes are not trivial to fix and they can take 10-15 min. each to solve. At this point, one might as well use the materialize documentation instead of going through these videos. I'm willing to give this course a 5 Star, once it's been overhauled. Update: So, I've gone through the whole course and posted my solutions to each section and project. I decided to solve many of the problems of the outdated code. One thing I couldn't test if it worked was the Google Maps API, which Google decided to lock behind a billing system. Others such as the fade in animation for two of the last projects took me some time to adjust, but I managed to get it to work. Other than that, this course will definitely be perfect for anyone who wants to create front-end solutions for websites and web apps, once it gets updated.

Coupons

DateDiscountStatus
7/13/202089% OFF
expired
8/2/202092% OFF
expired
10/9/202089% OFF
expired
1/15/202189% OFF
expired

Charts

Price

Materialize CSS From Scratch With 5 Projects - Price chart

Rating

Materialize CSS From Scratch With 5 Projects - Ratings chart

Enrollment distribution

Materialize CSS From Scratch With 5 Projects - Distribution chart
1554318
udemy ID
2/14/2018
course created date
6/2/2019
course indexed date
Bot
course submited by