Material-UI 5 and React | Learn by building projects

Learn to apply inline styles in Material UI by using double curly brackets to set an orange background and white text on a button.

Create a custom button component using a styles object to apply background color and text color, and pass text through children to render inside the styled button.

Explore how to use the material ui 5 button component, including variants, colors, sizes, icons, and button groups, with theme customization and onClick interactions.

Explore the typography component in Material UI, import typography, apply variants like h1, h2, subtitle, body, caption, and overline, and override default styles in the theme.

Explore the Material-UI box component and its system properties, using theme colors, spacing (8px baseline, scalable by factor), padding, margins, and flexbox to build flexible layouts.

Learn to use the Material UI divider component with color, margins, and thickness. Explore horizontal and vertical layouts, text alignment, indentation, and light variants.

Explore styling typography as a link with Material UI 5's link component, including underline, color, and variant options. Integrate it with React Router to navigate to about, contact, and board.

Preview the creative agency landing page project, showcasing hero, design solutions, professional experience, and a footer with social links and a subscribe form; includes Figma assets.

Set up a React app named agency lending, install material UI and SVG icons, and add fonts and assets. Test a simple Material UI button to verify it works.

Explore how to create and customize a Material-UI 5 theme in React, override palette colors like primary and slate blue, and apply a theme provider for consistent styling.

Overwrite typography styles in the theme using a mobile-first approach, then add breakpoints to tailor h2 and body text for desktop with Montserrat. Test responsive font sizes and line heights.

Create a reusable button component in React with Material UI, organize a component folder, implement props and children, and apply custom styles and hover colors through theming.

Build a left side drawer in a React app using Material UI, triggered by a burger button, with navigation links, a close icon, and a styled box layout.

Build a responsive header component with Material UI 5 and React. Use app bar, box, toolbar, container, desktop and mobile logos, and a burger menu with a drawer open state.

Build a responsive navbar component with Material-UI elements, mapping a pages array to render links with optional chevron arrows, and apply inline styles and a shared styles object.

Style the hero section with a theme and breakpoints, and set responsive padding. Use a centered flex layout, max width 1240px, and margins to align the hero image and text.

Build cart component for creative design solution by creating a cart folder and functional card, importing Material UI card and SVGs, adding a title, list items, and read more action.

Style the card component using a theme palette with border, shadow, and border radius, and set h3 typography with 24px font size and 29px line height.

Build a creative design section by renaming components, using a stack-based card layout, and mapping cards with titles such as strategy, product design, and development with corresponding SVGs.

Style the creative design section with responsive padding, center text, and a flex layout at breakpoints, using max width 1240px, align items center, and 44px gaps to match the design.

Refactor the creative design page by removing the switch and restructuring image handling with svg imports and rc item svg, showcasing a new approach while preserving functionality.

Builds a professional experience section using material-ui components like Box, Typography, Link, and Grid, mapping navigation links and SVG assets into a styled, responsive layout.

Build a contact us section in a Material-UI 5 and React project using text fields, a text area, icons, and a submit button with styling.

Build a responsive footer in Material-UI 5 with React, using typography, links, icons, a paper card, and an email input base with a button in a grid layout.

Style the footer component with a slate blue theme, responsive padding and borders, and a subscribe section featuring an input and icons for a mobile-friendly layout.

Learn to install and integrate react router, wrap the app with browser router, and configure routes for home, demos, services, pages, and contact, while placing header and footer outside routes.

Add a material ui dropdown and finish navigation refactoring with updated styles and active link states, including a chevron arrow and disable ripple for routing to the contact page.

Introduce Leng Dojo, a responsive three-page website for a fictional online language school, with home, subscribe, and lesson detail pages, plus design assets in Figma.

Set up a React app with Material UI, install dependencies, and prepare Montserrat font and assets; copy starter files, adjust index.html, and start building the site.

Wrap the app with ThemeProvider in a Material-UI 5 React project, define a colors palette and typography, and initialize breakpoints for a cohesive theme.

Build a material-ui 5 navigation bar in react by creating a navbar component, rendering links from an array with conditional arrows, and styling for responsive layouts.

Build a drawer component in a React app with Material UI, wiring an icon button, an SVG from assets, to anchor the drawer to the left and control open behavior.

Build a search input component with Material UI 5 and React, using paper, input base, icon button with a search icon, and set placeholder and area label to search.

Build a responsive header with Material-UI 5 and React, featuring app bar, toolbar, desktop and mobile logos, search input, nav bar, a drawer controlled by useState and css baseline.

Build a hero section in a React app with Material UI 5, using a wrapper, box, typography, and button, plus SVG assets.

Style the hero section in a material-ui 5 and react project by applying relative and absolute positioning, banner background images for mobile and large screens, and responsive typography.

Overwrite default material button styles with theme overrides, configuring background, border radius, padding, typography, and hover and disabled states, while aligning the button in the hero section.

Build a featured courses section using Material UI 5 and React, incorporating divider, typography, and a view all button with inline styles and an SVG asset.

Build a featured courses card component in a Material UI 5 and React project, mapping six cards with a responsive grid, images, language text, and a footer price link.

Style the featured cards section by applying borders, shadows, padding, and border radii. Implement a language badge, divider styles, and responsive adjustments for mobile to ensure a polished user interface.

Learn to build a dynamic benefits section in React using Material-UI 5, including box and typography components, SVGs, images, and mapping data to render titles and descriptions.

Style the benefits section with svg background and responsive breakpoints, and precise margins and padding. Align text using white color, centered typography, and flex gaps to ensure readability across devices.

Build the become an instructor section in a React app using Material-UI 5, adding styled boxes, typography, SVGs, and an apply now button to craft the UI.

Style the instructor section with padding and a bold 700 font title. Use themed text with responsive margins, 70px flex gaps, and a 44px button.

Build a subscribe section in a React app using Material-UI 5, wiring up typography, paper, input base, and styled boxes to collect an email with a submit button.

Learn to style a subscribe section in Material-UI 5 and React by importing an image from assets, and applying responsive padding, color, border radius, and typography across breakpoints.

Build a footer section in a Material-UI 5 and React project by mapping navigation link arrays, adding icons for social media, and organizing content with a grid, typography, and logo.

Style the footer with a theme, padding, and background, applying breakpoints for responsive padding. Align and color icons, links, and typography to white for a cohesive, responsive footer.

Create a reusable layout with header, subscribe form, and footer using Material-UI Box, wrap the app, and set up React Router routes for the home screen with hero.

Build a breadcrumbs component in React by importing breadcrumbs and link, wiring styles, and styling three links (home, course, lorem ipsum) with font size 24 and capitalize text.

Build the current status component using material UI by composing typography, box, button, divider, and link, and apply styles for title, price, and login-related elements.

Refactor course details screen by integrating typography box, current status, breadcrumbs, and an image from the assets folder, then apply responsive styles for the upper left block and card layout.

Develop a course details component in Material-UI 5 for React, using typography, box, divider, radio and collapse with expand icons to present lessons, topics, and quizzes.

Style the course details card in a Material-UI 5 and React project by applying margins, padding, borders, border radius, and box shadow, then refine title and topic layouts with flex.

Build a reusable courses component in Material-UI 5 and React by wiring typography, box, and list items, mapping an array to styled list items and applying responsive styling.

Build a learn courses component in a Material UI 5 and React project by mapping an array to styled list items with typography and icons, with responsive styling.

Build a course content component with Material-UI elements (Typography, Box, Button, Radio, Collapse), manage open state, and handle clicks to reveal topics and dividers.

This lesson guides building a styles object for the content section in a Material-UI 5 and React project, detailing flex layouts, spacing, typography, color, and integrating the component.

Build the future courses screen in a Material-UI 5 and React project, using typography, box wrappers, breadcrumbs, inline styles, and centered text with a responsive flex layout.

Builds a featured course component with Material UI 5 and React, presenting packs (basic, standard, premium) in a grid with typography, dividers, icons, prices, and a purchase button.

Build a material-ui 5 select order component in a React project, composing typography, box, card, rating, and icons to render six product cards with price and images.

Style a select order component in Material-UI 5 and React with a responsive card layout, including wrapper cards, borders, shadows, titles, prices, images, and icons across mobile and desktop breakpoints.