Materialize CSS From Scratch With 5 Projects

Explore typography and alignment in Materialize CSS, focusing on container behavior, media queries, responsive rem-based headings and paragraphs, blockquotes, flow text, floats, and vertical centering.

Discover how to apply text and background colors in Materialize CSS using a wide color palette, including standard and less common hues, dark and light shades, with examples and padding.

Explore Materialize buttons with padding, waves effects, and color options, then enhance them with icons from Material Icons or Font Awesome, and align icons left or right.

Demonstrates creating materialize floating and fixed action buttons, with waves and pulse effects, icon options, and a fixed action button toolbar with horizontal and click-to-toggle behavior.

Learn to build a responsive Materialize navbar from scratch, including a full-width nav, logo positioning, mobile side menu, dropdowns, fixed nav option, and an integrated search bar.

Explore collections and badges in materialize css, learn to create collections, collection items, headers, secondary content, avatars, and badges, including dropdowns with badge elements.

Explore the Materialize grid system, building both nonresponsive and responsive layouts with row and column classes, 12-column grids, offsets, push/pull, and stacked behavior on small screens.

Explore building and styling cards in Materialize CSS from scratch, covering simple cards, image and title variations, card actions, reveals with activator, tabbed layouts, and grid arrangements.

Learn to implement full-width breadcrumbs and a footer using Materialize CSS, with responsive grid layouts, color theming, and accessible navigation elements.

Explore forms and inputs in Materialize CSS, including text fields, textareas, inline fields, prefixes, validation, radio buttons, checkboxes, and select lists with option groups and multiple options.

Explore Materialize CSS form controls, including switches, range sliders, and file inputs, and learn to initialize them with JavaScript and jQuery, add date and time pickers, character counters, and autocomplete.

Explore materialize css tables and media elements, using striped, board, and responsive tables, plus responsive images and videos with container wrapping.

Explore chips in Materialize CSS, including closable tags, image chips, and chips input with autocomplete and placeholders. Then learn simple pagination with active states and icons.

Explore how to implement preloaders and spinners using Materialize CSS, adjusting colors, sizes, and progress bar states (determinate and indeterminate) with practical markup examples.

Explore Materialize css carousels and sliders, building image carousels and content sliders with carousel, carousel-item, and carousel-slider classes, adding full width options, fixed items, indicators, and color variations.

Learn to implement the collapsible widget in Materialize CSS, creating accordion and expandable sections with headers, bodies, icons, and open and close events via JavaScript.

Learn to build the feature discovery widget in Materialize CSS from scratch, implementing open and close interactions, pulsating effects, and cyan floating action buttons with white text.

Learn to implement dialogs with materialize css, creating toasts and tooltips, controlling position, duration, automatic removal, and callbacks, via javascript or jquery.

Explore the material box lightbox and slider, implementing a lightbox with materialbox, a data-caption caption, and 100% width. Initialize the slider and adjust indicators, height, and transition.

Learn to implement modals in Materialize CSS, including triggers, content, and footers. Explore fixed footer and bottom sheet variants, and adjust dismissable behavior, durations, and ready callbacks.

Explore implementing a parallax scrolling effect in Materialize using a parallax container and parallax class around two images and content, then initialize with JavaScript for a smooth reveal.

Learn to build a responsive side navigation using Materialize CSS, featuring a user view with avatar, background image, and dashboard links, with configurable width, edge, and open/close callbacks.

Build a materialize css pushpin navigation with three colored blocks (blue, red, green), using data target attributes and javascript to achieve the pushpin scrolling effect.

Master scroll spy navigation for a multi-section page, linking to section ids, highlighting the active segment as you scroll, and initializing a fixed table of contents with JavaScript.

Explore building and styling tabs with Materialize CSS, including basic tabs and swappable tabs, tab content linked by IDs, and color-coded content panels within a 12-column grid.

Build a one-page travel landing page Travell with scroll spy navigation, image slider, autocomplete search, material box gallery, popular places cards, and a responsive mobile menu.

Set up a fixed navbar and a responsive side navigation using the Materialize css theme starter, copy project files, and initialize the components with a JavaScript snippet.

Create a responsive image slider in materialize css using three resort images from IMG folder, with centered captions and a javascript init: indicators false, height 500, transition 0.5s, interval 6s.

Build a teal, centered search area with a 12-column grid and autocomplete input, then create gray icon boxes using Materialize CSS.

Explore popular places with image cards and a light box gallery using Materialize CSS, including a contact for booking button and a follow section with social icons.

Develop a responsive contact section using Materialize CSS, featuring two card panels, a location collection, and a functional contact form, plus implementing smooth scroll spy navigation.

Design a cloud hosting landing page with Materialize CSS from scratch, featuring a transparent navigation bar, a login modal, iconography, purple overlays, and a testimonials carousel.

Build a responsive navbar and a featured showcase using Materialize CSS, integrating Font Awesome icons, a transparent navigation bar, brand logo, mobile menu, and a background hero image.

Build a responsive icon boxes section with Font Awesome icons and cards, then add an about us block, a developers area with a purple overlay, and a six-logo languages grid.

Build a podcast section with an overlayed background and responsive two-column layout using Materialize CSS. Create a testimonials carousel with carousel slider items and initialize it for full-width display.

Learn to build a footer and login modal in Materialize CSS from scratch, implement a login form with email and password, and initialize the modal with jQuery.

Build a Materialize CSS solutions page by duplicating the home page, adjusting the header, creating a two-column layout with cloud hosting, storage, and database tabs, and adding a sign-up link.

Copy the solutions page to build the sign up page, update the header active link, and create a two-column form with materialize inputs, a role select, and a full-width button.

Explore building an interactive admin panel with Materialize CSS from scratch, including preloaders, toasts, modals, a working to-do list, charts, and CRUD-like UI for posts, categories, and users.

Build a responsive Materialize CSS navbar and sidenav for the Madman theme, including a blue top nav, brand logo, collapse button, and a user panel with dashboard links and logout.

Implement stat counters on the dashboard with a count-up animation, display progress bars and material icons, and add a preloader with timed section reveal using setTimeout and fade-in.

Set up a dashboard section with a line chart using canvas js via cdn and display latest comments with avatars, truncation, and approve/deny actions that trigger materialize toasts.

Use materialize css to build a recent posts table and a to-dos card with a form, add to-dos, delete via event delegation, and provide details links.

Create a fixed floating action button that reveals post, category, and user modals, then build their forms with Materialize inputs, a select, CKEditor text area, and modal initialization.

Learn to build posts and categories pages with Materialize CSS by converting the dashboard into inner pages, adding tables, modals, pagination, and a reusable post model.

Duplicate and adapt the posts and categories pages to build comments and users pages in Materialize CSS, updating classes, images, and table rows, and add a user model.

Build a login page and a details page with Materialize CSS, featuring a blue nav bar, a responsive login form, and post editing with save and delete actions.

Build a full screen landing page with materialize css from scratch, implementing scroll fire effects, a transparent-to-solid nav, image overlays, scroll spy links, cards, testimonials, and a responsive layout.

Learn to create a full-screen header with a background image, a fixed transparent navigation bar, and a layered overlay, plus a responsive side nav and a download button.

Learn how to implement materialize scrollFire to fade in header text and toggle a solid nav bar on scroll, and build responsive feature boxes with icons and a grid layout.

Build a responsive about section with a services collection and multiple card testimonials, plus a blue footer, and enable scroll spy navigation for home, about, and testimonials.

Create a contact section with a Materialize CSS form featuring name, email, phone, and message fields, paired with an embedded Google Map and a responsive layout.

Build a graphic design portfolio using Sass with Materialize, customizing background and card shadows. Enable scroll fire fade-in for project cards with star ratings and modals in a responsive layout.

Learn to set up sass with materialize, using variables, nesting, mixins, imports, and operators; compile with the Kohala GUI and configure output to the success folder for live preview.

Design and implement the header and navigation using materialize, including a transparent header, branding logo, a responsive collapse button, and a mobile side nav with the same links.

Modify Materialize CSS by editing the variables file to set the primary and secondary colors, navigation bar background, and font colors, and apply these variables to the page body.

Build a gallery section with three rows of image cards, each showing a title, star ratings, a modal trigger, and dynamic text color using the primary color variable.

Learn how to add modals and scroll fire in a Materialize CSS project, building modal content with images, titles, star ratings, and a footer styled with the secondary color.

Create inner pages for logos and gaming, update IDs and content, and prepare the five-project Materialize CSS course for development, noting Sass files are for development only.