Skip to content

Instantly share code, notes, and snippets.

@blackslate

blackslate/webDevEnv.md

Last active April 11, 2021 04:00
Show Gist options
  • Save blackslate/060d0d61e5e6f0c44c5a9292d8d4ed3b to your computer and use it in GitHub Desktop.
Save blackslate/060d0d61e5e6f0c44c5a9292d8d4ed3b to your computer and use it in GitHub Desktop.
Download ZIP
Setting up a web development environment on Ubuntu
Raw
webDevEnv.md

Setting up your laptop for web development

Nautilus

Guided Tour

Open a Terminal window

  • Ctrl-Alt-T
  • Right click in desktop window; choose Open In Terminal
  • Tap the Super key (Windows | ⌘) to open Dash; type Terminal
$ whoami
<username>
$ sudo whoami
root

Install Google Chrome

Instructions

Method 1: using the command line

What the instructions do:

  1. Update the information about all packages that are installed on your computer
  2. Download an installer file
  3. Install the Chrome package
  4. Run google-chrome

Details

Method 2: download through Firefox

  1. Visit the download page
  2. Click Download
  3. Ensure 64 bit .deb (For Debian/Ubuntu) is selected
  4. Click Accept and Install
  5. The Software app will open; click Install
  6. Tap the Super key and type "chrome"

Install Zoom

  1. Visit the download page
  2. Choose Ubuntu as the Linux Type
  3. Check that the default values for OS Architecture and Version look good
  4. Click Download
  5. Locate the downloaded zoom_amd64.deb file; double-click on it
  6. Click Install

Install Slack

Instructions

About the snap package manager

Join the class's Slack Workspace

Ask me for an invitation link

Install VS Code and Live Share

Instructions for VS Code

Instructions for Live Share

  1. Launch VS Code
  2. Launch VS Quick Open (Ctrl+P)
  3. Paste this:  ext install MS-vsliveshare.vsliveshare-pack
  4. Press Enter

Create a GitHub account

  1. Visit the registration page
  2. Follow the steps to create an account
  3. Send me your GitHub username
  4. Wait for me to add you to the organization
  5. Visit the class's Organization page

Play with your new tools

Play with Markdown in VS Code

GitHub uses a simple syntax for styling text: Markdown. You can read about it here.

  • With VS Code, create a file with the extension .md (E.g.: sandbox.md)
  • In VS Code, with your MD file open in the editor, press the keys Ctrl-K and then press V. (You should see a second panel open named Preview <your_file_name>.md)
  • Practice using the Markdown syntax in the left panel, and observe how it is styled in the right panel.

Play with GitHub

  • Imagine a web project that would be fun to build
  • Create a personal (public) Repository on GitHub for this project
  • Create a README.md file in the project
  • Use Markdown to edit the README file to describe what you plan to make
  • Use Markdown to edit the repository's Wiki to start mapping out the details of the project

Slack

  • Send a message to the team's Slack Workspace, to introduce yourself
  • Send everyone a link to your GitHub repository

Team

  • Check out the projects that your team members have imagined
  • Send Direct Messages (DMs) to the 2 people whose ideas interest you the most, telling them what you like about the project
  • Suggest a Team Name (or more than one)
  • Suggest a logo for the team * Discuss and vote on the suggestions

Learning How to Learn

The Importance of Effort

Carol Dweck's experiment
The results

Teach in Order To Learn

The Feynman Learning Method

Take on Challenges

Solving Unsolved Problems

Organize Your Ideas

Evernote
Trello
OmniOutliner (for Mac)
Balsamiq Wireframes
Mural (Mind maps)
Or choose your own favourite app for visualizing and sharing your ideas.

Videos

Reading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment