Now that we know a bit more about how to use CSS to, we will get started on styling our Slack About page project.

Objective

Your challenge in this part is to style all the text so that your page now looks like the following:

Here, we will pick up our old Slack About Page, and make it responsive so that it works on mobile, tablet, and desktop.

Here are the three versions:

Desktop

Tablet

This 29-part course consists of tutorials on ML concepts and algorithms, as well as end-to-end follow-along ML examples, quizzes, and hands-on projects.

Once done, you will have an excellent conceptual and practical understanding of machine learning and feel comfortable applying ML thinking and algorithms in your projects and work.

The primary objectives of this course are:

So far our app can display the notes given in the dashboard component’s state.

Let’s implement a UI for adding notes.

Material-UI also provides icons. Icons are present in the @material-ui/icons package. Install it via npm using this command.

npm install @material-ui/icons --save

Let’s implement the UI for adding notes.

../src/components/Dashboard.js

import React, { Component } from 'react';
import Container from './Container';
import Grid from '@material-ui/core/Grid';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
import AddIcon from '@material-ui/icons/Add';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';