Create Websites and Hybrid APPs with Google Material Design

Set up a portfolio website project by creating a folder, an index file with the main code, and a folder for the custom index.js; prepare to include material design.

Learn to integrate the material design lite framework via the hosted version for fast loading, or download and bundle it, then customize primary and accent colors and include icons.

Add a header by including the header component within the layout, using an array of components to hold content and footer, and apply semantic elements for structure in your website.

Add content to a Google Material Design layout by configuring the content component within the MDL layout, aligning the header and main elements for a clean material website.

Add a footer to the website design, define two footer types for the portfolio project, and place the footer below the main content as you complete the page layout.

Define a header with a title using an indigo primary color and layout rules, then render two header rows with a left-aligned title and right-side menu components in material design.

Add a right-side menu button with an icon using material design lite, place a spacer to align it, and assign an id to link to the next menu list.

Learn to add a menu list linked to a button in a Google Material Design app, define minimal classes, position bottom right, and enable ripple effects for items.

Add a tab bar to the header using material design components, define tabs with anchor elements that switch panels, enable an initial active tab and ripple effect for interactions.

Add tab bar panels that link each tab to its corresponding content panel using section ids and panel classes, making the default active panel and tab synchronize with user clicks.

Learn to add a badge to a tab item by inserting a span next to the tab text, defining a badge class, and setting its value with data-badge.

Set up a waterfall header by applying the fix-it header class and the header waterfall class within the dash layout, so the waterfall effect appears as the scrollbar becomes visible.

Learn to add a drawer icon and a left side menu to a portfolio site using Google Material Design, including an email icon and a toggleable menu revealed on click.

Add a drawer as a child of the layout and a menu button to reveal it. The drawer shows with a backdrop and closes when you click outside.

Add a nav component containing anchor links inside the component, applying the mdc/navigation class to define navigation links and include a badge for the survey page.

Bind a pure JavaScript navigation function to links, prevent default, derive the target from data attributes, update the active panel, and close the menu for seamless page transitions.

Compare mega and mini footers: the mega footer supports large sites with navigation and three sections, while the mini footer fits small sites with a single content area and logo.

Add multiple sections to the mini footer by defining left and right areas with the correct footer class, then prepare to insert the logo, links, and social buttons.

Add a logo and copyright information to the footer, create a footer navigation with links for health, privacy, terms, and user agreements, and preview the updated page.

Add a Facebook social button in the right side of the mini footer using a dedicated social button class and a Facebook icon image from the images folder.

Build a responsive grid with material design light, defining tiles and cells for desktop, tablet, and phone, using classes to control visibility and width.

Discover how to build Google material design cards with title, image, text, and actions, and add drop shadow elevation to convey depth.

Learn how to add a card title and optional subtitle inside a card component, using title and subtitle elements and classes, and see the updates after refresh.

Add a card image to the card component in module design, placing media below the title so it fits neatly in the card container.

Add supporting text beneath the media in the card component, create a descriptive text, and apply a custom full-width class to ensure responsive centering on mobile, tablet, and desktop.

Add a grid to the work page with three cards, and position the footer with the main content; switch from horizontal on desktop to vertical on phone and tablet.

Add three cards to the work page by styling the card component with full-width and shadow, producing a horizontal layout on larger screens and a vertical stack on smaller devices.

Add titles and subtitles to cards on the web page, copy them to other cards, and save to view results in the browser, including tutorials as card titles.

Add images to three card components on the work page using folder images, standardize width, and preview results in the browser as you prepare to add text and buttons.

Add text to cards on the work page by including a title, subtitle, and media; display a description and add action buttons below.

Add actions to cards using anchor buttons with flat styles and ripple effects, color them primary or accent, and optionally add a border above the actions for clear separation.

Add a responsive three-cell grid to the skills page, with middle cell containing data table and full width on tablets and phones; first and third cells appear on large screens.

Add a data table using the material design lite framework, applying the required classes to define the table, mark non-numeric columns, and preview results in the browser.

Design a responsive grid using material design to host a contact form, hiding the first and third cells on tablet and phone while the second cell displays the form.

Add a name field using Material Design text fields by wrapping input and label in a div with the textfield classes, and enable the floating label to move on focus.

Add an email field to the contact page using input type email with id email, mark it as required, update the label, and show an error message for invalid input.

Add a subject field to the contact page by setting the textfield type to text and id to subject, then fix layout with a custom textfield class for stacked inputs.

Add a Material Design send button to a contact form by applying flat button styles, ripple effects, and icon content using specific classes.

Add a tooltip to the send button by linking the tooltip element to the button’s id, show it on hover, and adjust its size with a margin.

Introduce an indeterminate progress bar with the material design framework, define the required classes, and implement a sendmail function that shows the bar for three seconds to simulate sending progress.