Booking options
Price:
BuyContact Us£86.99
Course Images
Materialize CSS From Scratch With 5 Projects
By Packt
- 30 Day Money Back Guarantee
- Completion Certificate
- 24/7 Technical Support
Highlights
On-Demand course
10 hours 25 minutes
All levels
Description
Master HTML 5 and the Materialize CSS Framework by Building 5 Real-World Responsive Material Design-Based ThemesThe 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 Content
- Materialize CSS From Scratch With 5 Projects
About The Provider
Packt
Birmingham
Founded in 2004 in Birmingham, UK, Packt’s mission is to help the world put software to work in new ways, through the delivery of effective learning and i...
Reviews
There are no reviews for Materialize CSS From Scratch With 5 Projects yet.Why not be the first one to review this course?