In this course, we will use our synchronous meeting time to work on lab assignments that dive deeper into the concepts introduced in the reading. Practice, experimentation, and failure are the name of the game here. Labs are an opportunity for you to try things out, see what works and what does, encounter roadblocks, overcome them, and ask for help when stuck. This last part is why most of our lab work will be done in pairs, usually through pair programming. One of the secrets to practical problem solving is to put a fresh pair of eyes on the issue, something that your partner will continually provide.
At a distance, it is markedly more difficult to work collaboratively. Technological hurdles aside, such as spotty Internet connections, we miss subtle social cues in an online setting such as eye contact that makes communication more effective. Nevertheless, we believe that the benefits of collaboration are still well worth it.
To help mitigate these issues, you will find our lab instructions more prescriptive than a traditional lab. In particular, each lab assignment will be composed of multiple parts that you are required to complete individually or collaboratively as well as the time you should spend on each activity when appropriate. These prompts are there to help focus your efforts and ensure that you make adequate progress through the lab; please make sure to follow them!
Finally, note that labs are primarily meant to be an effort-based deliverable. As a form of practice, we don’t want to penalize you for incorrect answers since you will naturally make them in your exploration of the material. However, don’t let this fact mean that you can simply blow off the labs! Instead, you should use this opportunity to deeply explore the material with your partner rather than sprint through the lab. More specifically, you completely understand the solution that you produce. As a goal, you should never write something and think to yourself, “how did that work?” You should always challenge yourself and your partner to develop the capacity to explain what you have created.
Individually, spend approximately 5 minutes setting up your environment for the lab.
csc151 work folder called sample-web that will house your work for this lab.
In general, get in the habit of creating a new sub-folder inside of your work folder so that you don’t make excessive clutter.Download the following zip archive that contains the starter code for this lab to your sample-web folder:
Navigate to this file in File Explorer (Windows)/Finder (Mac) and double-click it to extract its contents to the sample-web folder.
.html and .css in sample-web now.
These are the files we will modify for this lab.Let’s start by looking at the ThingymabobCoInc Web site from the reading. Spend about 10 minutes on this part of the lab.
File → Open File, navigate to the sample-web folder you created, and open thingy.html.
Note that Atom colors the different parts of the code, a useful feature called syntax highlighting.Individually, navigate to thingy.html in File Explorer/Finder and double-click it to open it in your default web browser similar to the reading.
In Atom, make some changes to the page.
You might, for example, add something like
<p>
We are proud to have acquired our long-term rival,
<strong class="company">Whatchamacallit</strong> and will
soon be disposing of their useless products.
</p>
When you are done, reload the page in your web browser to verify that the changes have taken effect.
<< button in the bottom-right corner of the screen that will open it up.)As we noted, the design of the page is particularly hideous.
You can read the details of the design in the file thingy.css.
Spend 5 minutes and do this exercise individually, and share your work with your partner via screen sharing when you are done.
thingy.css with Atom.
This file should also be in your sample-web directory.
Note that Atom also syntax highlights this file!gray or yellow or white.
You can find an extensive list of possible colors at https://www.w3schools.com/cssref/css_colors.asp.In our description of CSS, we noted that one advantage of CSS is that it lets you quickly change the appearance of a page; let’s try that out now. Spend 2–3 minutes doing the following *individually**.
mabob.css in Atom and spend a few minutes reading through it, taking note of the design decisions.
Sketch what you expect the page to look like with this style sheet.
Spend a few discussing with your partner what you believe the page will look like.thingy.html in Atom.thingy.html, there’s a line that specifies that the CSS comes from thingy.css.
Replace thingy.css with mabob.css.thingy.html and reload it in your web browser.
Did the new CSS file behave as you expect?In this next part, you will modify a new web page by building a new style sheet. Spend 15 minutes doing all of these parts individually.
excerpt.html and excerpt.css in Atom.excerpt.html, taking note of the tags and styles you see.excerpt.css, taking note of any styles that are defined. (You should find only one.)excerpt.html in your Web browser to see how it appears.excerpt.css to assign different colors to the various people who are quoted (the king, the white queen, and Alice).
I used red for the king, gray for the queen, and cornflowerblue for Alice, but you can use any colors you’d like.
Reload the page to view your updates.font-weight, font-style, font-variant, transform, text-shadow, or anything else you decide is appropriate.
Reload the page to view your updates.margin-left and margin-right to add some visual whitespace.
Update the style for the body tag to provide one-inch margins.
Reload the page to view your updates.margin-left on those lines. I’d suggest the value 1em, which is the width of the letter “m”.
Reload the page to view your updates.font-family: Helvetica, Sans; to the style for the body.
This tells the browser to try Helvetica if it’s available, and, if not, use some simple sans-serif font.
Reload the page to view your updates..line class to use 0 for the top and bottom margins.
Reload the page to view your updates.At present, the title of Jabberwocky does not stand out. Some versions of the poem format it in all caps. However, modern typographers would probably prefer small caps. Update the title to use the following.
font-variant: small-caps;
You can also make any other changes you’d like.
The source information is not strictly necessary.
Let’s hide it.
Update the style for p.source to use
display: none;
As before, save and reload.
Individually, using the tags and styles from the excerpt, spend 15 minutes create your own short story (with quotations) about Alice, the king, and the queen. (The goal of the exercise is primarily for you to get used to including tags and styles in the text you write.)
When you are done share your work with your partner via screen sharing!
Usually, when you turn in your lab work, you will do so with a single combined turn-in for your pair. However, since the work is primarily individual (environment setup and testing), you will turn in your work individually for this first couple of labs.
Once you are done writing your story, please do the following to submit your work:
excerpt.html and excerpt.css to turnin folder on OneDrive.
Please ensure that the two files have precisely these names to ensure that our grading scripts pick up your work.Grinnell’s visual identity guidelines suggest that we use Futura and Freight Text Pro as our primary fonts]. However, both are expensive commercial fonts, and the College has chosen not to purchase a site license. As alternatives, our Communications department suggests that we use Arial and Georgia. Unfortunately, neither of these fonts is universally available (in particular, on machines running Linux).
Fortunately, there are a wide variety of open-licensed fonts available to us. My preferred alternative to Freight Text Pro is Besley, and my preferred alternative to Futura is Jost.
Using other fonts can be a bit more difficult.
First, we have to tell the browser where to find information on those fonts.
Then we update the font-family tag as you did earlier.
Add the following line to the head of excerpt.html and save the file.
<link rel="stylesheet" href="https://indestructibletype.com/fonts/Besley.css" type="text/css" charset="utf-8" />
Reload the page. Do you see any differences? (You shouldn’t.)
In excerpt.css, update the style for the body to use the following entry for the font family.
Then save the CSS file.
font-family: Besley, Georgia, Serif;
You’ve now seen two style sheets for the same page and the significant effects a style sheet can have on the appearance of the page.
It’s now time to design your own style sheet.
The file company.css contains blank entries for the primary selectors you would use for the ThingymabobCoInc Web site.
Design this webpage by filling in the entries found in company.css.
Have fun experimenting with different styles and features!
One way to proceed is to think of a design, perhaps by drawing it on paper, and then challenging yourself to come up with the CSS that produces that design. We have only scratched the surface of what CSS has to offer, so if you can’t achieve what you want with the CSS we have discussed so far, feel free to search on the Internet for how you might proceed!