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:

For this project, we'll assume you have already installed Meteor on your system. If not, you should follow the instructions here: Creating your first Meteor app

Using React and Meteor together

React and Meteor are two different JavaScript libraries but when used together, they work really well. Since this course is about Meteor with React, let’s talk about the purpose of each in the applications. Meteor keeps track of data in our application while React takes data and produces HTML and handles user events. For example, assuming Twitter as a Meteor application, Meteor keeps track of all the tweets and profiles while the purpose of React is to display this data using appropriate HTML.

To install React as a dependency in any project, you can simply type npm install –-save react if you have npm installed.

In case you don’t have Node or npm installed, don’t ...

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

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';

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: