Lab 5: Going Live

In this lab we will focus on:

• CSS for text and tables
• User-Centric Design
• Hosting Websites (for free but with limitations)

This lab will be due Tuesday, Apr. 17th, midnight eastern time.

Introduction

Welcome to the final Lab assignment!

In this lab we will be creating a website with multiple pages, each page showcasing different CSS techniques, and then hosting that site on the web (for free, so with limitations compared to a "real" website). The plan in this assignment is to cover the rest of the tools and techniques you may need to get your Case Study project to the finish line!

Hosting

There are two options you can choose to host your site for this lab and for your Case Study. You are free to choose whichever works best for you.

The first is Glitch. The benefit is that there are fewer steps to go from idea to live website, and if you run into problems you can always select the line of code that is giving your problems and click "ask for help" and someone from their very friendly community will be right there! The drawback is that it is more difficult to create your website on your desktop using Pingendo/Visual Studio Code. If you choose this option, you will find yourself copying and pasting the code for each of your files over one by one; or, you can create the website from scratch directly in Glitch the first time. This will not be the option that I focus on in this Lab. Glitch strives to be straightforward and self-explanatory, so if this is the route you choose and you have any questions, feel free to ask via Ask the Instructor.

The second option is Github Pages. The benefit of this is that, like Glitch, it is free; plus, you can edit your files however you want on your computer and upload them to Github. The drawback is that when you make changes to the site, the old version is cached, so it may take a few minutes to see the updates, so it is best to work locally and upload only when you've made significant changes. Also, setting things up requires exact naming of things to be correct. You can follow the instructions at the Github Pages page for how to get started, which will ask you to install Github Desktop. You can also follow these steps if you don't want to install anything:

1. Create a Github account. For consistency in our class, use your KCTCS username for your Github username. If you already have a Github account, feel free to use that one or create a new one. I suggest creating a new one to separate your school work from your personal work.
2. From the homepage of Github (after you've logged in), press the "plus" button in the top right and click "New Repository."
3. Name the repository like this: bknowles0003.github.io, except with your username and not mine. You must match this pattern exactly and use your username exactly or it does not work. This will also be the url for your website. For example, you can find mine from a previous time that I taught this course at http://bknowles0003.github.io/.
4. Give the repository a brief description, mark it as public, initialize it with a README, and add the MIT license. Then, click Create Repository at the bottom.
5. To upload files to your website, first visit the repo page for your site, like at https://github.com/bknowles0003/bknowles0003.github.io, but with your username instead of mine. Then, drag and drop your files/folders from your Desktop or File Explorer window onto the browser window into the middle of the repo page. I find it best to put Chrome and File Explorer side-by-side for this. When you do this, it will take you to a page to create a "commit" with those files. A commit is like a save point that you can always roll back to if things mess up. To create a commit, you must write a comment describing what your changes were; this is a practice that helps you and anyone working with you to review changes made to a large project or to find the right save point to roll back to. Commit directly to the master branch, and press the Commit Changes button at the bottom. Note: You must have a file named index.html at the top level of your code for your website. This will be the homepage that Github shows users when they view your page. Like we discussed in the previous lab, it is best to keep your HTML files at the top level next to each other, and your CSS, Javascript (if any), and images in their own folders.
6. Then view your website url (ending with "github.io" as described above) or refresh your tab! If the changes you made do not appear, wait a few minutes and refresh again.

User-Centric Design

Earlier in this course, I mentioned that my intentions were for you to be able to not only create a well-designed website with, say, a big red button, but to be able to describe the design process that led you from the needs of the business to the needs of the user to why you need that button in that location with that color in the first place.

In other words, I want the features of your website to be intentional.

There are many design patterns that have emerged in recent years that are common between sites. Although each brand goes about them in their own particular way, the general idea is the same. They are:

• Calls to Action (CTAs) are buttons that use an accent color to set it apart from the rest of the page. They contain only a simple word or phrase and represent the number one action we want our users to do. They usually are located around the top right of the page. There can only be one CTA button like this on a page. For example, when you visit a social media site for the first time, you may notice that the Sign Up button is accented, but the Sign In button is not. Although they look similar to each other, the Sign Up is more "flashy." It represents the Call to Action: we'd rather have more new users continue to join our site than make it quick for existing users to log in again. At least, that's what the color-coding means. So, when adding a CTA to your pages, think about what action is most important to your business's bottom line, and design accordinginly.
• Fixed-width bodies, or what I call "boards," are pages like Facebook, Twitter, and Github that center the content in the middle of the page in a container of a fixed width, usually allowing the background of each section to extend all the way to the edge of the browser. In this way, we keep the user's eyes from having to travel too far, while also striking a balance with the amount of room that their possibly wide screen monitor provides. By letting the section backgrounds extend to the browser edges, we visually fill in what would otherwise be blank space. This is what Dummies calls the jello layout.
• Tables. The default table style in HTML is pretty ugly and reminiscent of bad 90s sitcoms. More appealing styles involve removing borders or using faintly colored borders, putting an off-color background behind the headers (th tags), bolding the text of the headers, choosing a smaller font that the main body (something like 8pt arial is common), and appropriately aligning the text within each cell (th and td tags). Consider the way that Google suggests tables should look in their Material design spec. Most importantly, we stopped using tables several years ago for layout (preferring the jello layouts described above) and only use tables for displaying lots of data to the user.
• Fonts. In print media, like books, headings (h1 and so on) use sans-serif fonts and the paragraphs use serif-fonts. On the web, this is flipped generally. Regardless of what fonts you choose, it is common practice to make "labels" like headings, section labels, buttons, and so on have a different "look" than the primary "content" text. We do this by using a different font family, weight (boldness), color (usually making them lighter), size (usually larger), and occasionally backgrounds (either a mute/gray color or bright accent, depending on the importance we want to denote).

Grading and Submission Instructions

To submit, write your responses to the following questions in a Word document, then upload it to Blackboard under this week's folder in Current Assignments.

Labs are due two weeks from when they are assigned, on Sunday at 11:59pm eastern time.

Labs are each worth 5% of your final grade. Scoring on your submission will be based on the following rubric:

0% - Student does not submit on time or submits plagiarized or unacceptable work. Double check that you have attached the right file, as usually students get zeros because they upload a previous week's Lab by accident.

1% - Student answers less than half of the questions with sufficient or accurate responses. Make sure that you are leaving yourself enough time to complete the Lab each week, as usually students submit incomplete work because they were rushed at the last minute.

3% - Student answers almost all questions with sufficient and accurate responses. If you encounter a problem or have a question about one of the questions, be sure to post in Ask the Instructor well before 24 hours before the due date, then continue to attempt to resolve the issue on your own while you wait for a reply.

5% - Great job, maximum points! The student answers all questions accurately and sufficiently, demonstrating the best of their ability.

Note, because Labs span two weeks' worth of reading, it is recommended to go through the Lab twice, once after the first reading where you answer everything that you can, then again after the second reading where you answer everything else.

Part 1 - Kitchen Sink

First, we'll create a kitchen sink (contains a little bit of everything) website. If at any point you have questions about how to do something, reach out!

1. Create a website with multiple pages:
   • the homepage
   • a "text examples" page
   • a "table examples" page
   • and an "about me" page
2. In all pages, have the same horizontal nav bar at the top of the page with working links taking you to all four of the webpages.
3. In all pages, have the same footer at the bottom that subtly displays "(c) 2018 your name here"
4. In the homepage, have a large "splash" image between the header and the footer. Have a CTA that reads "Get Started" that takes the user to the "text examples" page.
5. In the text examples page, display your three favorite poems, one after the other. (It's national poetry month.) If you don't have favorite poems, any three will do. Be sure to display the poem broken into multiple lines appropriately. Label each poem with a h1 heading. Using CSS, format the headings with any serif font of your choice from Google Fonts, and format the text of the poems with any sans-serif font of your choice.
6. Why do you believe that those two fonts work well together visually?
7. In the table examples page, create a table to display the recent NCAA basketball scores. In the first column, display the Home team's name; in the second column, display the Home team's final score; in the third column, display the Away team's name; and in the last column, display the Away team's final score. Have a header row at the top with the labels "Home", "Score", "Away", and "Score". Format the table using CSS to not use borders, to have a light grey background behind the header row, to have bold font on the header row, and to use a smallish sans-serif font throughout.
8. In the about me page, using lists, tables, or h1-style headings, whichever you feel is best, display information about yourself, such as your hometown, your pets, what games you like to play, your family, and so on.
9. In general throughout your website design, strive for a consistent and appealing "look and feel."

Part 2 - Going Live

Next, we'll make it available to share. This will make sure that things are set up for sharing our sites later for the Case Study Project.

1. Host your website using either Glitch or Github, as described above.

Part 3 - Discussion Board

Finally, we'll share 'em!

1. Share your website on the Website Sharing Board located under Ask the Instructor. Include in your post a summary of the design decisions that you found yourself having to make (what colors to use, what fonts, etc.) and how you went about making them. A few days after the due date, take a look through everyone's designs. No need to comment, but congratulate yourselves for your first "live" site!