CS 318 Lab 1 – GitHub, Brackets, and Hellos
Welcome to CS 318. In this class we learn to make web pages. We’ll learn some technologies like HTML5 and CSS, which are the primary tools of the web design trade. But more importantly, we’ll also grow our brains to think about how to structure information, separate style from content, and communicate through technology to audiences with diverse abilities and devices.
This class will always meet in a computer lab because we will be doing things. At the start of each lab, I will lead a 20-30 minute discussion, during which time I ask you to leave your computer monitors turned off. For the remainder of the lab you can have them on, because you will work with a partner to complete hands-on exercises spelled out below my notes here.
Let’s break some ice. Find a neighbor that you do not know and interview them with a couple of questions:
- If this class was prison, you’d ask, “What are you in for?” I hope this class is not prison. Ask them why they are taking the class and what they hope to do with the knowledge and skills they gain from it.
- Ask them about their pets or former Halloween costumes or their favorite family vacation. Find something that’s human about them.
We will spend a few minutes getting to know each other.
Now let’s get into the meat of the class. Suppose you are rummaging through a box in a grandparent’s attic, and you encounter a yellowed piece of paper, which we’ll call Exhibit A:
ingredients112cupswhitesugar1egg212cupssourcream4cupsallpurposeflour 2teaspoonsbakingsoda14teaspoonsaltdirectionspreheatovento350degreesf 175degreesclightlygreaseorlinebakingsheetswithparchmentpapercombinet hesugarbeateneggandsourcreamtogethermixintheflourbakingsodaandsaltbl endthoroughlydividedoughinhalfandformeachhalfintoalongrollnoteifyour kitcheniswarmkeepthehalfofdoughyourenotworkingwithintherefrigeratorc utoffanarrowsliceofdoughrolllightlywithhandsonlightlyflouredboardint opencillikestripabout7incheslongformintoafigure8andpinchendstogether placeoncookiesheetrepeatwithremainingdoughbakeat350degreesf175degree scfor12to15minutes
What is it? Does it communicate information effectively?
A lot of our communication is “one-dimensional”. We broadcast a line or sequence of information. To group chunks of information into words, phrases, and sentences, we just add a little punctuation.
But some of our information is far more complicated. It’s a hierarchy. We usually show hierarchies in pictures, but when we get to a computer, all that information has to get funneled into a one-dimensional channel of bits. That leads us to an exercise.
Devise a scheme for communicating to your partner your family tree. Include three generations: your grandparents’ generation, your parents’ generation, and your generation. But use only words, not pictures nor gestures, and use as few words as possible. The fewer, the better!
After the time is up, communicate your trees to each other, and draw your partner’s tree. No questions are allowed, nor feedback, until both partners have shared.
We’ll share some of our strategies.
Communicating hierarchies of information and content is what the web is designed to do. The solution that Tim Berners-Lee invented for doing so in 1989 and which has stuck with us is called HTML: hypertext markup language. In HTML we sandwich are information in elements, which have an opening tag and a closing tag:
<bun> patty </bun>
HTML is a lot like our family tree problem, with the advantage that the information has a single root element from which all other elements descend.
We’ll dive into HTML in more detail next lab. For the rest of the time today, we’re going to get our tools for writing and publishing HTML set up.
We have a few goals for today’s lab:
- Acquaint ourselves with two pieces of software we will use in this course: GitHub Desktop and Brackets.
- Create and submit our first web pages.
Please find a partner and work together on the steps below. Use only one machine and do a lot of talking to each other. Only one of you should be at the “helm,” running the keyboard and mouse. The other should be contributing with ideas, questions, and encouragement. Periodically, you will be asked to trade places.
Feel free to ask questions of your instructor or teaching assistant.
All your work this semester will be stored on and submitted for grading via GitHub, a web service that’s like a USB drive on steroids. We’re using it for a few reasons:
- GitHub will save all versions of your files, not just the most recent version. Accidentally deleting all your work is very difficult with GitHub.
- GitHub will act as your portfolio, serving out your webpages to the general public and to your instructor.
- Submitting files on D2L is annoying. One must create a file archive, login to D2L, and upload the archive. Your submitted work is separate from the files you edit. In contrast, the GitHub Desktop software monitors your working directory on your computer and lets you submit your work with just a few mouse clicks. You are unlikely to accidentally omit files.
- GitHub is accessible from any computer and is generally easier to access than your H: drive.
Create a GitHub account by doing the following:
- Visit GitHub.
- Enter a username, email address, and a password of your choosing. Click Sign Up.
- Choose the free plan. Click Continue.
- Respond as you wish to the optional survey. Click Submit.
- Check your email and verify your email address.
Now create your repository, which we can think of as a folder that resides on the internet. You’ll use a single repository for all your work this semester. Follow these steps to make your repository:
- On the main page of your GitHub account, click Start a project.
cs318for your Repository name.
- Click Create repository.
cs318 folder that you just made resides on the internet, but we need it on our own computer in order to add and edit its files. If you are using a lab computer, click on the Start Menu and search for GitHub_Install. Click Install. If you are using your own computer, download and install it.
Sadly, GitHub did not make this software easy for system adminitrators to install in a lab setting. It installs into a temporary location that only you can access—and only on your current computer. This temporary location will be cleared periodically, and it won’t be available if you switch machines. Likely you will need to install it several times throughout the semester. But let’s not worry about that right now. Minimize the hassle by using the same machine all semester. Pick a good one! (They’re all the same.) Or bring a laptop.
Now, let’s pull down our
cs318 repository using GitHub Desktop:
- Open GitHub Desktop.
- Log in with your GitHub account.
- On the Repositories step, click Skip.
- Right-click on Tutorial in the left panel and click Remove. The tutorial covers more than we need.
- Click on + and the Clone tab. Choose the
- The software wants to know where to place the repository on your local computer. On a lab machine, choose Documents, or some other directory on your H: drive. On your personal machine, choose some directory that you can find easily.
- You should see a view of your repository that says you have no changes. Right-click on the
cs318repository in the left panel, and click Open in Explorer or Open in Finder.
GitHub Desktop doesn’t help us author webpages. It just helps us share them. To author webpages, we will use Brackets, a free editor started by Adobe but now in the hands of the people. It is already installed on the lab machines. If you’re using a personal machine, download and install it.
Open Brackets via the Start Menu. Click Getting Started / Open Folder… and navigate to the
cs318 directory that you pulled down with GitHub Desktop.
Now we are ready to make some web pages!
We will start by making the simplest of web pages.
Let’s create a directory for this first lab:
- Right-click in Brackets’ left panel and choose New Folder.
- Name it
lab01. Be exact, as your instructor uses tools for grading that are very picky. Notice the leading 0 and the lowercase letters. For files on the web, you want to avoid uppercase and space characters.
Now let’s create a web page:
- Right-click on
lab01and choose New File.
- Name the file
hello.html. Be exact.
- Enter the following text in the editor. I encourage you to type it rather than copy and paste. Feel the rhythm of HTML run through your fingertips. The whitespace is not terribly important.
<!DOCTYPE html> <html> <body> Goodbye, Pluto! </body> </html>
- Believe it or not, but files like this are what make the web. But we don’t normally see the raw HTML. We must render the HTML. Click on the Live Preview button on the top-right of the Brackets window. It looks like a lightning bolt. Your web browser should pop open and display the rendered HTML.
- Arrange the Brackets editor and browser so that you can see both side-by-side. Edit the text, and watch it update live in the browser.
Let’s get this page up on GitHub now because the world needs to see it.
- Save your edits in Brackets.
- Switch to GitHub Desktop. You should see that your local repository has a new change. Enter a short summary that describes the changes. Convention says to use second person singular, with an implied subject. Like
Add first page. If it helps, pretend that you are giving a command to the changes.
- Click Commit to Master. This saves the edits into a chunk of changes called a commit, but the commit is still only on the local machine. Click Publish to send it up to GitHub.
At the end of every work session, you are expected to commit your changes. If your computer falls in the river, at least your latest changes will still be on GitHub, but only if you commit regularly.
Now it’s time to let GitHub serve out our web pages:
- In GitHub Desktop, right-click on the
cs318repository and click View on GitHub. The browser will display your remote repository, which should now contain your
- Open the Settings tab and scroll down to the GitHub Pages section.
- Click on Source and select master branch.
- Click Save.
- Now visit
https://YOURUSERNAME.github.io/cs318/lab01/hello.htmlin your browser, replacing
YOURUSERNAMEwith your real GitHub username.
We only need to do these steps once in the semester.
Now switch places with your partner.
Let’s revisit the process of creating and committing a file:
- Create a new file named
- Insert the same HTML elements as you did in
hello.html. But instead of the planetary salutation in the
bodyelement, insert your first names and last initials—on separate lines. View the page in the live preview.
- What do you notice about the formatting in the live preview? Fix the problem by embedding each of your names in a paragraph element, which is opened by a
<p>tag. What is it closed by?
- Commit your new file and publish it to GitHub. Make sure it displays in your browser.
Once you have completed all these steps, check in with your instructor or teaching assistant to get your work checked off. You are free to leave when you have completed the steps or when lab ends, whichever comes first.
- Read every single word of the syllabus.
- If you are the partner that did not create a GitHub account and repository above, do so before Wednesday.
- Help me get to know you. On a quarter sheet of paper, briefly tell me the following:
- Your GitHub username
- The last book you read that wasn’t assigned
- About something you’ve made, designed, or written that you are proud of
- Install GitHub Desktop and Brackets on your personal machines, if you wish. Report on Piazza any troubles you encounter.
- Find a job listing for a web designer. Share a link to the job ad on Piazza, under folder
jobs. Besides the link, briefly summarize in your own words what the job entails and what qualifications are expected. Look for positions in a location where you could picture yourself living.