Command Line for Creatives

Command Line for Creatives

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 92 Lessons (8h 08m) | 1.93 GB

Use the command line to integrate design and development tools such as Sass, PostCSS, Gulp, Jekyll and Webpack into your workflow.

One of the most important tools to master in digital design today doesn’t use a graphical user interface. When we’re making complex and custom digital work, we’ll need to use a command line to use the tools we need.

In this beginner’s course, we’ll discover how to use the command line which will let us use design and development tools such as Sass, PostCSS, Gulp, Jekyll and Webpack.

We’ll dive into adding version control and collaboration to our projects with Git and GitHub, plus get websites online using services like GitHub Pages, Netlify and Siteleaf.

What you’ll learn

  • How to use and alter the latest development tools like Hyper and VS Code
  • Learn how to get the most out of your command line terminal
  • How to fix (and avoid) the main problems coders get into with Git and GitHub
  • How to use cutting edge tools like Sass, PostCSS and Webpack in your own projects
  • Automate your workflow using NPM packages, BrowserSync + Gulp
  • Get websites online with GitHub Pages, Netlify and Siteleaf
Table of Contents

1 Welcome to Command Line For Creatives
2 What we’ll be covering
3 Installing Hyper
4 Adding a theme to Hyper
5 Installing VS Code
6 VS Code Settings
7 cd, ls and dir
8 Our sites folder and touch command
9 Atom and Code shell commands
10 Adding oh-my-zsh (Mac)
11 Editing our project
12 Hyper plugins
13 Introduction to Git
14 Git setup on a project
15 What is a git commit?
16 What are command line flags?
17 Setting up GitHub
18 SSH key setup with GitHub
19 GitHub Pages and git pull
20 Getting a site online with Netlify
21 Adding a new file and commiting
22 Introduction to our project
23 Git branching
24 Merging a git branch
25 How to solve a git merge conflict
26 Adding our assets
27 What is ngrok?
28 Installing Sass
29 Running Sass and using Sass variables
30 Importing stylesheets
31 Nesting styles in Sass
32 What are Sass mixins?
33 Cleaning up our code
34 Making a pull request in GitHub
35 Intro to Lesson 4
36 Creating a development branch on git
37 Using npm init and setting up Gulp
38 What is a .gitignore file?
39 How to work with Gulp and Sass
40 Tasks in Gulp
41 Watching for changes with Gulp
42 Minifying CSS with Gulp
43 Gulp options and Sourcemaps
44 Updating our browser with Browsersync
45 Adding src and dist folders, and fixing our HTML
46 Adding a fonts and images task
47 Making Gulp minify our images
48 Deploying to Netlify and GitHub Pages
49 What is PostCSS?
50 Setting up PostCSS with Gulp
51 Joining our files together with Gulp concat
52 PostCSS :root variables
53 Setting up HTML
54 Typography with media queries
55 Adding default typography
56 Adding in header styles
57 Hero sections on Tropicali
58 Making our gridded sections
59 Centering sections with PostCSS
60 Media queries on mobile
61 Deploying our live site
62 Introduction to A Night In Japan
63 Setting up Jekyll
64 Jekyll configuration
65 Default layouts in Jekyll
66 Page site variables
67 Making an about page
68 Looping in Jekyll with Liquid tags
69 Content for homepage
70 What is front matter?
71 Jekyll includes
72 Setting up an assets folder
73 Live reloading with Jekyll
74 Styling up our site
75 Extending our default layout
76 Adding our project to GitHub
77 Setting up Siteleaf
78 Adding content to Siteleaf
79 What is Markdown formatting, and adding images
80 Git pull and push for Siteleaf
81 Tweaks for Siteleaf
82 Introduction to Webpack
83 Setting up our project
84 Adding our gulpfile.js
85 Setting up Webpack
86 Importing Javascript from our folder
87 Setting up a ‘cone’
88 Adding our code from Three.js
89 Cleaning up our code
90 How Webpack can work with Vue, React and React Native
91 Webpack extra settings
92 Thank you!

Homepage