Contact for queries :
020 3900 4072

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)

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

4.8

4.8
8 ratings
  • 5 stars0
  • 4 stars0
  • 3 stars0
  • 2 stars0
  • 1 stars0

No Reviews found for this course.

TAKE THIS COURSE

Instructors

1 STUDENTS ENROLLED

    Our Students Say..

    [{"code":""
    [{"code":""
    "label":"A Free Course"
    "label":"A Free Course"
    "win":false}
    "win":false}
    {"code":"IS95SD"
    {"code":"IS95SD"
    "label":"95% Off"
    "label":"95% Off"
    "win":false}
    "win":false}
    {"code":"FREESHIPPING"
    {"code":"FREESHIPPING"
    "label":"A Free Certificate"
    "label":"A Free Certificate"
    "win":false}
    "win":false}
    {"code":"ISCAREER"
    {"code":"ISCAREER"
    "label":"Course At £9.99"
    "label":"Course At £9.99"
    "win":true}
    "win":true}
    {"code":""
    {"code":""
    "label":"Free E-book"
    "label":"Free E-book"
    "win":false}
    "win":false}
    {"code":"10OFF"
    {"code":"10OFF"
    "label":"2 Courses At £14.99"
    "label":"2 Courses At £14.99"
    "win":false}
    "win":false}
    {"code":""
    {"code":""
    "label":"A Free Transcript"
    "label":"A Free Transcript"
    "win":false}
    "win":false}
    {"code":"10OFF"
    {"code":"10OFF"
    "label":"Buy 1 Get 1 Free"
    "label":"Buy 1 Get 1 Free"
    "win":false}
    "win":false}
    {"code":"25OFF"
    {"code":"25OFF"
    "label":"Course At £5"
    "label":"Course At £5"
    "win":false}
    "win":false}
    {"code":"P10GIFT"
    {"code":"P10GIFT"
    "label":"£10 Money Voucher"
    "label":"£10 Money Voucher"
    "win":false}
    "win":false}
    {"code":""
    {"code":""
    "label":"Almost"
    "label":"Almost"
    "win":false}
    "win":false}
    {"code":"25OFF"
    {"code":"25OFF"
    "label":"£400 Money Voucher"
    "label":"£400 Money Voucher"
    "win":false}]
    "win":false}]