Skip to content

1. Principles & Practices: Building a Website

This Week’s Scope

Final project ideation, building out a website, and gettin’ started with git.

AKA: How to get oriented in the dark.

cats typing

  • Reminder to self: there is more than one way to do everything; this is one of those ways
  • Install: Git; VS Code; GitHub
  • Get setup on GitLab, the remote repository we’re using (linked in Fab Academy onboarding emails)
  • Go through this interactive Markdown tutorial
  • Find the Terminal on your computer (hint: it’s the thing that makes you feel like a 90s hacker; also, it’s under Utilities on a Mac and it’s the text based interface that synchronizes all the things local (your computer) < > remote (GitLab). Pin to Dock to feel cool.)
  • Create an SSH key in Terminal (to allow your device to communicate with the server aka GitLab. It’s cool, we’re friends.)
  • Clone your repo from the GitLab FabCloud site by copying the SSH url into Terminal using a Clone command
  • Make pictures smaller and Neil happier with this link and add the reduced pics to the images folder (inside the root directory janet-hollingsworth) which is where the Cloned repo is located
  • 50k foot view (below is a picture I drew, I don’t know if it’s exactly right, but it’s where I’m at. Also, I don’t know how to embed this more elegantly yet).

drawing of git process

Code Commentary

Favorite commands (so far) in Terminal:

  • Command C when you mess up, will often pull you out
  • git add . adds all the changes made in the last save in VS Code
  • git commit -m ‘comment on the version change here and don’t forget this part or you’ll be launched into hell’ commits your edits to a staging area locally
  • git status reassures you of what’s happening along the way to make sure commands ‘take’
  • git push pushes the commited and staged changes to the remote repository-aka GitLab, at least… I think that’s what happens because it executes your modifications to the published website
  • git reset - -mixed HEAD~1 unstages the last commit; after this you can go into the root directory and remove the file with the issue

Favorite commands (so far) in VS Code:

  • . takes you up a level
  • / takes you down a level
  • ex: ../images/pics/Named.jpg would be up two directory levels, then into images folder, into pics folder, and finally pointing to Named.jpg

The weird and interesting:

  • No news is good news: in Terminal you don’t get affirmations, only refutations if there are issues with commands (this takes a while to get used to)
  • If you get launched into Vim by executing a command too soon, or some other godforsaken mistake the ritual to get back into Terminal is: ESC then i then :q!
  • Remember to save and push updates for each subdirectory (again, not sure about the language, but in VS Code I think you need to push changes within each sub directory before going to another subdirectory)
  • Bring cookies to next cohort meet up for all their help and patience

Under the Hood

Copy Pasta:

Some good ol’ fashion copy paste to get started (thanks to the guidance of great colleagues!) screenshot of coding with cohort virtually

The workflow:

  • VS Code: make modifications
  • Terminal: ‘git add .‘ adds all changes (or selected changes to local repo); ‘git commit -m ‘notes’‘ commits changes to a staging area; ‘git push‘ pushes the changes to the remote repo, GitHub screenshot of three windows: VS code, Terminal, and the published website through git hub

And a World of Memes is Unlocked:

git waiting skeleton meme

documentation gandhi meme thanks Justin ;)

Last update: March 17, 2022