Our Courses

Course Library View the full range of courses

No products in the basket.
Log in

Empower Yourself!!

Join our community of 70k+ learners, upskill with CPD accredited courses, explore career development tools and psychometrics.

Having trouble Logging in? Get in Touch

Don’t have an account yet? Sign Up

Already have an account? Log In

[wplms_lost_password_form]

Remember your password? Back to Login

Home
Course
Employability
Design
Materialize CSS From Scratch With 5 Projects

Materialize CSS From Scratch With 5 Projects

(8 Reviews)

Students

GET THIS COURSE AND 3000+ OTHERS FOR ONLY £49 PER YEAR. FIND OUT MORE

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 content

11 Sections 64 lectures 10 hours 32 mins in total

Intro & Getting Started

4 lectures • 27 m: 0 s

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

7 lectures • 1 hour 22 mins

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

7 lectures • 1 hour 22 mins

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

6 lectures • 46 m: 0 s

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

5 lectures • 34 m: 0 s

Parallax

00:03:00
Side Nav

00:09:00
Pushpin

00:09:00
Scrollspy

00:05:00
Tabs

00:08:00

Project 1 - Travelville

6 lectures • 58 m: 0 s

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

7 lectures • 1 hour 20 mins

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

9 lectures • 1 hour 50 mins

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

5 lectures • 55 m: 0 s

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)

7 lectures • 58 m: 0 s

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

Order Your Certificate & Transcripts

1 lecture • 0 m: 0 s

Order Your Certificate & Transcripts

Certification

After successfully completing the course, you will be able to get the and internationally accepted certificate to share your achievement with potential employers or include it in your CV.

Student Reviews

Excellent

4.8 Average 8 Reviews

Reviews

Great learning experience with iStudy. Clear lessons and easy to follow. Really impressed.

Loved the flexibility. Studied at my own pace and finished quickly.

Excellent course quality. I feel more confident in my skills now.

iStudy delivered exactly what I needed. Very smooth process.

Customer support was fast and helpful. Got answers straight away.

Great platform. Well-structured lessons and simple navigation.

Really happy with the experience. The certificate arrived quickly.

Clear teaching style and easy to understand. Highly recommend.

Self-paced learning was a huge benefit. Finished around my schedule.

Great value for money. Quality courses and helpful support.

I enjoyed learning with iStudy. Everything was straightforward.

Quick, simple and informative. Made studying stress-free.

Fantastic support team. They resolved my issue in minutes.

Course material was clear and engaging. Very happy overall.

Loved the layout and simple step-by-step lessons.

Prompt certificate delivery. Really impressed with the service.

Good quality courses and easy platform to use.

Very convenient. Learned at my own pace without pressure.

Great experience from start to finish. Worth every penny.

Clear content, supportive team and fast responses. Highly recommend iStudy.

Frequently Asked Question

Are there any prerequisites for taking the course?

There are no specific prerequisites for this course, nor are there any formal entry requirements. All you need is an internet connection, a good understanding of English and a passion for learning for this course.

Can I access the course at any time, or is there a set schedule?

You have the flexibility to access the course at any time that suits your schedule. Our courses are self-paced, allowing you to study at your own pace and convenience.

How long will I have access to the course?

For this course, you will have access to the course materials for 1 year only. This means you can review the content as often as you like within the year, even after you've completed the course. However, if you buy Lifetime Access for the course, you will be able to access the course for a lifetime.

Is there a certificate of completion provided after completing the course?

Yes, upon successfully completing the course, you will receive a certificate of completion. This certificate can be a valuable addition to your professional portfolio and can be shared on your various social networks.

Can I switch courses or get a refund if I'm not satisfied with the course?

We want you to have a positive learning experience. If you're not satisfied with the course, you can request a course transfer or refund within 14 days of the initial purchase.

How do I track my progress in the course?

Our platform provides tracking tools and progress indicators for each course. You can monitor your progress, completed lessons, and assessments through your learner dashboard for the course.

What if I have technical issues or difficulties with the course?

If you encounter technical issues or content-related difficulties with the course, our support team is available to assist you. You can reach out to them for prompt resolution.