Materialize

Materialize

Test your Materialize knowledge with free quizzes on MyCodeSkills covering core concepts.


  1. What is Materialize CSS?

    • A JavaScript framework
    • A CSS preprocessor
    • A responsive front-end framework based on Material Design
    • A backend tool
  2. How can you include Materialize via CDN?

    • <style src="materialize.css">
    • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    • <script src="materialize.js">
    • <import href="material.css">
  3. Which layout system does Materialize use?

    • Flexbox Grid
    • Float Grid
    • CSS Grid
    • Table Layout
  4. Which class is used to create a button?

    • .btn-primary
    • .material-btn
    • .btn
    • .button-style
  5. How do you initialize a tooltip in Materialize?

    • Automatically enabled
    • new Tooltip()
    • M.Tooltip.init()
    • <tooltip>
  6. How do you customize colors in Materialize?

    • Edit materialize.min.css
    • Use JavaScript
    • Use Sass variables
    • Use inline styles
  7. Which class is used to make a fixed navigation bar?

    • .nav-fixed
    • .fixed-navbar
    • .navbar-fixed
    • .top-fixed
  8. How do you initialize a dropdown in JavaScript?

    • Dropdown.start()
    • M.Dropdown.init()
    • dropdown.activate()
    • M.Init.dropdown()
  9. What is the correct class for adding offset in grid layout?

    • .offset-col-*
    • .offset-s*
    • .col-offset-*
    • .offset-*
  10. Which component helps with scroll-based navigation highlighting?

    • Tabs
    • ScrollSpy
    • Sidenav
    • Parallax
  11. How can you customize Materialize’s theme colors?

    • Using JavaScript
    • Editing compiled CSS
    • Overriding classes
    • Using SCSS variables before compiling
  12. What preprocessor does Materialize use for customization?

    • LESS
    • PostCSS
    • SCSS (Sass)
    • Stylus
  13. How do you optimize Materialize for production use?

    • Enable debug mode
    • Use Materialize CDN
    • Tree-shake unused SCSS components
    • Remove .min files
  14. Which command compiles SCSS files when using Materialize via npm?

    • npm run build-css
    • node compile.js
    • sass materialize.scss materialize.css
    • scss-build
  15. Which feature makes Materialize a good fit for PWA development?

    • Heavy JS dependence
    • CSS-only utilities
    • Lightweight and responsive design
    • Offline caching support