Assignments > Lab 1. HTML & CSS Practice

Due on Fri, 04/01 @ 11:59PM. 5 Points.

Readings

If you are relatively new to git and GitHub, please complete the GitHub tutorial before coming to lab this week:

• GitHub Tutorial and Git Cheat Sheet

Introduction

The goal of today’s lab is to help you get you started using GitHub (if you’re new to using it). Specifically, you will:

1. Install VS Code
2. Configure a new repository (on GitHub.com)
3. Configure git locally (on your laptop)
4. Review some git basics (add, commit, push, and branch)
5. Practice branching
6. Optional: HTML Practice

Your Tasks

1. Install Visual Studio Code

We recommend that you use Visual Studio Code as your code editor:

1. Download and install Visual Studio Code: https://code.visualstudio.com/
2. Also install the Live Server” extension (click the green “Install” button).

2. Configure your GitHub repository

1. If you haven’t already, register for GitHub: https://github.com/join.
2. Then, create a new public repository called webdev-labs (see tutorial above if you don’t know how). Please make sure that you mark your repo “public.”
   • Leave the following options UNCHECKED:
     • Add a README file
     • Add .gitignore
     • Choose a license
3. Finally, create a personal access token as follows:
   • Navigate to “Settings” in the top, right-hand menu
   • In the left-hand navigation panel, scroll down to the bottom until you see the “Developer settings” link. Click it.
   • Then click the “Personal access tokens” link in the left-hand navigation panel.
   • Generate a new token:
     • Name the token webdev
     • Make it so that it “never expires”
     • Check the “repo” checkbox (which should check all of the child settings as well).
   • Save the token somewhere safe (you’ll need it later, and you won’t be able to view it again after you first create it).

3. Configure git on your computer

1. Install git on your computer: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
2. On your computer, create a folder called webdev-labs (create it somewhere that you can find it later). Next, download lab01.zip (below), unzip it, and move your lab01 folder inside of your webdev-labs folder.

lab01.zip

Your directory structure should look like this:

webdev-labs
└──lab01
    ├── exercise01
    └── exercise02

Next, navigate into your webdev-labs directory from the command line, and issue the following commands (one at a time, in the order shown):

git init
git add .
git commit -m "first commit"
git branch -M main

# IMPORTANT: Replace <USERNAME> and <REPOSITORY> with YOUR github username and
# YOUR repository (webdev-labs). For example, Sarah's remote address would be: 
#   https://github.com/vanwars/webdev-labs.git
git remote add origin https://github.com/<USERNAME>/<REPOSITORY>.git  
git push -u origin main

When you’re done, navigate back to the GitHub repository you just made and verify that your files have been uploaded.

4. Git Basics

What did I just do? Well, please read the cheatsheet summary below to see an annotated explanation of each command used. It is tempting to not read and skip over this section, but please do (and ask your peer mentor some questions if you have them)!

To continue saving and tracking your changes using git / GitHub, repeat steps 2, 3, 4, and 7 as needed.

5. Practice branching

Now that you’ve set up git / GitHub, let’s try to understand how “branching” works.

Create a new “lab01” branch

Make a new branch called “lab01” from your command line as follows:

git checkout -b lab01   # creates the branch
git branch              # lists all of your branches

After issuing these commands, you should see something like this…

* lab01
  main

…where there is an asterik before lab01 (which may also be green). The asterik indicates that lab01 is now your “working branch.”

Edit Your Code

Now, let’s make some changes to some of the files in the lab01 folder (on your lab01 branch):

1. Open the lab01/exercise01 folder in Visual Studio code.
2. Open index.html and uncomment the stylesheet link.
   • Note that in order for a stylesheet to be applied to an HTML file, you have to explicitly link to it in the <head></head> section.
3. Change out the photo to another photo that you find on the Internet.
   • Hint: image reference
4. Make your card look like the one shown below by using various selectors:
   • Hint: box model reference

Commit and push your “lab01” branch

Commit and push your changes as follows:

git add .
git commit -m 'Lab01 updates' # use any message you like
git push -u origin lab01

Go to GitHub and verify that you have two branches: main and lab01

Switch back to your “main” branch

Switch back to your main branch as follows:

git checkout main

Note that your code reverted back to the version of the files you originally downloaded. Now switch back to lab01:

git checkout lab01

Note that your changes are back! Amazing! Finally, if you want to “merge your changes from the lab01 branch into your main branch, please do the following:

git checkout main
git merge lab01
git push origin main

Now, both of your branches will be identical. Typically, branches are used for experimental code / new features, and then once those features have been finalized, they are incorporated into (or “merged”) into to the main branch (which represents the primary codebase).

Extra Practice (Optional)

Not required, just to get you thinking about layouts in preparation for next week’s assignment.

Using any approach you want, please create the following screens for desktop, tablet, and mobile (pictured below). To do this:

1. Open the lab01/exercise02 folder.
2. You will need to use media queries, which have been set up for you in the exercise02/style.css file.
   • Hint: media queries reference
3. You will also need to uncomment the viewport meta tag in the <head></head> section of your HTML file.
   • Read more about the viewport meta tag on MDN. In the context of mobile web design, this tag tells the browser to honor the dimensions of the device (versus assuming that the website was designed for a desktop screen).

Desktop

Tablet

Mobile

Jazz it Up

If you have time, please experiment with one or more of the following enhancements:

1. Try changing the font of the Card header (H2 tag) to use a Google Font.
   • Hint: Give this tutorial a shot (or find one you like better)
2. Change out one of the images for an embedded video (from YouTube of Vimeo).
   • Hint: Embedding media
3. Try modifying your HTML and CSS files however you want.

What to Turn In

1. Paste a link to your repo on Canvas

Paste a link to your webdev-labs GitHub repository into the Canvas textbox for Lab 1.

2. Answer the following questions:

1. What is a branch?
2. What is the difference between the “commit” command and the “push” command?