Terminal, Git, npm, Framework with Materialize + SASS Tutorial

Framework tut using the terminal, npm, github, materialize, all while implementing a design with material design components.

80s Nerd


Why Terminal

Deep knowledge and understanding of the system will come from using this. It's super user level ish yo!



GitHub tools to improve your workflow. Set up a repo to improve the way you store your projects.



Utilize a rad framework that will speed up your development time.

This is for mac
Lets learn how to fire up the terminal and navigate around that. Cmd + spacebar type in terminal and hit enter

Where do you keep your projects?

File structure - you start out at x location and you need to navigate to where you want to create your project folder.

When you launch terminal it starts you in macintosh HD > Users > YourName So we need to navigate to where you would like to put your project folder. There’s some basic terminal commands that we should discuss.

ls shows a list of what is in the directory
mkdir creates a new directory
cd changes the directory so you can move around the computer
mv is for moving a file around
rm deletes
ctrl + c exits the process

So now we wanna move up to the Applications(there are two so make sure you go up two folders) folder. Type in cd .. and hit enter(push enter to execute the commands) to move jump up a folder. Type in ls it should list

Creative Cloud Files

type cd .. again to go up to the location you want to put your project.

It's gonna need to go into the spot with your local host projects. If you need to get a local server on your laptop so download and install this one. MAMP Then install it. Now navigate to the Mamp folder inside of the applications folder. Do this by hitting cd mamp/htdocs

Let's create the location for the project. Type mkdir frameworkStarter

Git initializing and cloning:

In that folder you just created type git init

Now we are cloning the the github repo!!! Type into the terminal

git clone https://github.com/mushel/materialize101.git

There's gonna be all the files from that repo that will appear in the directory

Start mamp double click on the icon or start it by hitting command spacebar and typing in mamp and enter then hit start servers button. Now you can navigate to the page with the repo we just cloned in your browser.

Navigate to your localhost localhost:8888/frameworkstarter

Here is the npm page that we are gonna snag off github

npmjs materialize

Install a CSS preposessor (Sass) with npm

terminal code

SASS Watch and Compile Tut

Install Sass to really get saucy with yah css preposing.

Run the command

npm init

You will be prompted to answer several questions about your project, after which npm will generate a package.json file in your folder.

Then run this to install the npm for sass

npm install node-sass

Pop that file open and insert this code to the "scripts section". * Add a comma at the end of the test line too.

"scss": "node-sass --watch sass -o css"

Then just run this code and change a sass file to see things happen

npm run scss

Contact Us

Warning: Undefined variable $thankYou in /home/claycreat1ons/public_html/m.currier/materialize101/index.php on line 216

I hope this tutorial shed light on some basics.

you did it