Description

Master HTML 5 and the Materialize CSS Framework by Building 5 Real-World Responsive Material Design-Based Themes

The author has 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 him 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 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 and JS widgets using a custom sandbox environment.
- Learn some custom JavaScript/JQuery to make your themes more interactive.

Audience

Anyone that wants to learn and master Materialize CSS and build real world themes

Approach

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.

Key Features

- You will learn: - CSS and JavaScript components, Animations/transitions. * - Build 5 beautiful and completely responsive, real-world themes from absolute scratch.

Github Repo

https://github.com/packtpublishing/materialize-css-from-scratch-with-5-projects

About the Author

Brad Traversy

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad's courses.

Course Outline

1. Intro & Getting Started

1. Welcome To the Course

Intro & Getting Started: Welcome To the Course

2. What Is Materialize & Why Use It?

Intro & Getting Started: What Is Materialize & Why Use It?

3. Environment Setup

Intro & Getting Started: Environment Setup

4. Materialize Sandbox Setup

Intro & Getting Started: Materialize Sandbox Setup

2. CSS Components - Part 1

1. Typography & Alignment

CSS Components - Part 1: Typography & Alignment

2. Text & Background Colors

CSS Components - Part 1: Text & Background Colors

3. Buttons & Icons

CSS Components - Part 1: Buttons & Icons

4. Floating & Fixed Action Buttons

CSS Components - Part 1: Floating & Fixed Action Buttons

5. Navbar

CSS Components - Part 1: Navbar

6. Collections & Badges

CSS Components - Part 1: Collections & Badges

7. The Grid System

CSS Components - Part 1: The Grid System

3. CSS Components - Part 2

1. Cards

CSS Components - Part 2: Cards

2. Breadcrumb & Footer

CSS Components - Part 2: Breadcrumb & Footer

3. Basic Form & Input Controls

CSS Components - Part 2: Basic Form & Input Controls

4. Fancy Form & Input Controls

CSS Components - Part 2: Fancy Form & Input Controls

5. Tables & Media

CSS Components - Part 2: Tables & Media

6. Chips & Pagination

CSS Components - Part 2: Chips & Pagination

7. Preloaders

CSS Components - Part 2: Preloaders

4. Interactive Components - Part 1

1. Carousel

Interactive Components - Part 1: Carousel

2. Collapsible

Interactive Components - Part 1: Collapsible

3. Feature Discovery

Interactive Components - Part 1: Feature Discovery

4. Dialogs (Toasts & Tooltips)

Interactive Components - Part 1: Dialogs (Toasts & Tooltips)

5. Material Box & Slider

Interactive Components - Part 1: Material Box & Slider

6. Modals

Interactive Components - Part 1: Modals

5. Interactive Components - Part 2

1. Parallax

Interactive Components - Part 2: Parallax

2. Side Navigation

Interactive Components - Part 2: Side Navigation

3. PushPin

Interactive Components - Part 2: PushPin

4. ScrollSpy Nav Scrolling

Interactive Components - Part 2: ScrollSpy Nav Scrolling

5. Tabs

Interactive Components - Part 2: Tabs

6. Project 1 - Travelville

1. Project Intro

Project 1 - Travelville: Project Intro

2. Navbar & Sidenav

Project 1 - Travelville: Navbar & Sidenav

3. Image Slider

Project 1 - Travelville: Image Slider

4. Search & Icon Boxes

Project 1 - Travelville: Search & Icon Boxes

5. Popular Places & Gallery

Project 1 - Travelville: Popular Places & Gallery

6. Contact Section & ScrollSpy

Project 1 - Travelville: Contact Section & ScrollSpy

7. Project 2 - Quazzu

1. Project Intro

Project 2 - Quazzu: Project Intro

2. Navbar & Showcase

Project 2 - Quazzu: Navbar & Showcase

3. Boxes, About & Overlay

Project 2 - Quazzu: Boxes, About & Overlay

4. Podcast Section & Testimonials Carousel

Project 2 - Quazzu: Podcast Section & Testimonials Carousel

5. Footer & Login Modal

Project 2 - Quazzu: Footer & Login Modal

6. Solutions Page

Project 2 - Quazzu: Solutions Page

7. Signup Page

Project 2 - Quazzu: Signup Page

8. Project 3 - Madmin

1. Project Intro

Project 3 - Madmin: Project Intro

2. Navbar & Sidenav

Project 3 - Madmin: Navbar & Sidenav

3. Stat Counters & Preloader

Project 3 - Madmin: Stat Counters & Preloader

4. Display Chart & Recent Comments

Project 3 - Madmin: Display Chart & Recent Comments

5. Recent Posts & Todo List

Project 3 - Madmin: Recent Posts & Todo List

6. Floating Button & Modals

Project 3 - Madmin: Floating Button & Modals

7. Posts & Categories Pages

Project 3 - Madmin: Posts & Categories Pages

8. Comments & Users Pages

Project 3 - Madmin: Comments & Users Pages

9. Login & Details Pages

Project 3 - Madmin: Login & Details Pages

9. Project 4 - BizLand

1. Project Intro

Project 4 - BizLand: Project Intro

2. Full Screen Header

Project 4 - BizLand: Full Screen Header

3. ScrollFire & Boxes

Project 4 - BizLand: ScrollFire & Boxes

4. About, Testimonials & ScrollSpy

Project 4 - BizLand: About, Testimonials & ScrollSpy

5. Contact & Google Map

Project 4 - BizLand: Contact & Google Map

10. Project 5 - Galappear (With Sass)

1. Project Intro

Project 5 - Galappear (With Sass): Project Intro

2. Koala Setup & Sass

Project 5 - Galappear (With Sass): Koala Setup & Sass

3. Header & Navbar

Project 5 - Galappear (With Sass): Header & Navbar

4. Changing & Using Variables

Project 5 - Galappear (With Sass): Changing & Using Variables

5. Gallery Layout

Project 5 - Galappear (With Sass): Gallery Layout

6. Modals & ScrollFire

Project 5 - Galappear (With Sass): Modals & ScrollFire

7. Inner Pages

Project 5 - Galappear (With Sass): Inner Pages

Course Images

Materialize CSS From Scratch With 5 Projects

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews