Lab 1: Intro to Git and AboutMe HTML Page

CSE 154

Agenda

  • Introduction to Git, GitLab, and GitGrade
  • Introduction to web development tools (Atom and your browser)
  • AboutMe HTML Page
  • Extra resources

Note about this Lab

The goal of this lab is to help you get everything you need for this quarter setup, while practicing a bit with HTML. For participation credit in this week's lab, you will need to submit the AboutMe repository by Friday at 11PM (you could end up finishing it by end-of-lab today).

We've provided a number of resources in these slides, but if you run into any questions:

  • Ask your TA/instructor
  • Come to the GitLab setup help 9/27 4:30-6:30 PM at MGH 241!
  • Ask on the Piazza board

Part I: Getting Git Set Up

In this part of the lab, you will walk through getting Git setup on your computer with your first CSE 154 GitLab repository: lab01-aboutme.

There are two options we recommend for you to use Git: using it via the command line, or with an IDE. We have a tutorial for either option you'd prefer.

  1. Git Walkthrough (Command Line)
  2. GitKraken Walkthrough

Part II: Your Web Programming Environment

To develop a web page, you need the following:

  1. A text editor to write your HTML and CSS files. We recommend Atom or Sublime which are both supported on Windows, Mac, and Linux operating systems). Your lab computer should have both Atom and Sublime aready installed. For work at home, follow the instructions on the editor's website.
  2. A browser to view your webpages. We recommend Chrome or FireFox, which both have useful web development features.Note that when browsing the web, you need Internet access. But when writing HTML and CSS webpages, you don't!

Part II (Cont.)

Writing HTML and CSS with an editor is similar to writing Java in an IDE like jGrasp or Eclipse, or writing Python on the command line or your Python IDE of choice. Conveniently, we don't need to compile HTML/CSS, and to "run" the code, we just open the HTML page on the browser.

If you prefer another text editor like VisualStudio, Vim, or Emacs, these all work as well (but we won't go into the details for each).

Part III: Writing your first HTML Page

Now that you have Git on your computer and a cloned repository for lab01-aboutme made just for you, you can use the provided starter code in that repository to write your first HTML page!

Since this is only day 2 of CSE 154, we have filled in most of the structure of the page (this takes time to remember) but you are to complete the page with information about your own answers.

Part III (Cont.)

Feel free to explore new HTML tags to add more creativity to your page, and if you have any experience with CSS (or want to try some before submitting) you are free to use this lab to explore more!

Reminder: Your participation grade for this lab will come from successfully completing and submitting your lab01-aboutme-studentname repository to GitGrade Friday at 11PM. Refer to the previous Git walkthrough for how to submit this!

Resource: Command Line Basics

New to the bash terminal? It's just like a text-based alternative to your computer's file-finder GUI, but with a ton of features to edit and run different programs in the same location. Here are some tips for getting around the command line! To learn more, use the handy "down" feature of these slides :)

Moving around the command line

list files & directories (linux/mac)

ls

list files & directories (windows)

dir

change directory current working directory

cd [folder-name]

Current Working Directory

Your current working directory is displayed here

By default, commands issued in the Command Line will apply to the current working directory

ls/dir

  • Lists files and folders directly inside the current working directory
  • Use in conjunction with cd to navigate filesystem in Command Line

cd

cd can be used with relative paths (assuming "folder-name" is a child of the current working directory)...

cd [folder-name]

...or with absolute paths

cd C:\windows\system32

Use cd to move up one directory

cd ..

Resource: Basic CSE 154 Git Workflow Summary

  1. Make a copy of the repository locally
  2. Edit code locally (e.g. writig HTML/CSS with Atom text editor)
  3. Publish your changes on the repository online (remote repository)
    1. Add
    2. Commit
    3. Push

Clone a repository

Copy the URL of the repository on GitLab

Clone a repository (continued)

Use ls and cd to navigate to the directory where you want to store your Git repositories, then type:

git clone [insert website url]

This creates a copy of the repository in your current working directory

Publishing changes

The following commands need to be executed inside the repository folder that you cloned every time you want to update the repository online.

  1. Add
  2. Commit
  3. Push

Click each link or press the down key to learn more about each step!

Add

git add [filename]

Proposes changes to be committed

Add (cont.)

Add everything

git add .

Add multiple files

git add [file1] [file2] [ect...]

Commit

git commit -m "write a descriptive message"

Commits your changes locally

Push

git push origin master

Updates the repository online with the changes you committed

Overview of Git Commands

Command Description
git clone [link to repository] make a local copy of a repository
git add [filename] Proposes changes to be committed
git commit -m "message" Commits changes locally
git push Pushes to remote repository

Additional Resources