This class is front-end loaded. Most of the assignments happen in the first nine weeks, but 40% of the final grade is determined by what you accomplish between Week 9 and week 15, your final portfolio, your HELLO WORLD moment. You need to get started right away and stay focused. You can't do all this in the last week of class. I will start grading each week's work Saturday morning. There are 28 students in this class, so it may take me to Monday to finish.

In what follows, when I offer examples, I use technical writing as the context because I am a rhetoric prof, this class is in the Rhetcomp division of English, and the most practical application of Rhetcomp is technical writing. Regardless of what field you are pursuing, you should create your own AI-assisted information. My examples are just examples no matter how relevant they might be to you.

It is a good idea to read each week's assignment before you do anything else. Just read. Don't click. Just read. Then start doing. You might want to keep a todo list for each week. Weeks 5, 6, 7 and 8 will likely require the greatest discipline and concentration. But week 9 gives you a chance to catch up and then if worse comes to worse, you sill have spring break to fix whatever is broken. DON'T PUT ANYTHING OFF. Seriously, you will hate yourself (and me).

Week 08 - Tying it all together DUE 5 pm, 03/01

Websites are supposed to look, act, and feel like a unified place. Imagine you are decorating your dream home. You want every room to look and feel like you even though each has a different function. The kitchen is YOUR kitchen. The family room is YOUR family room, and so on. Each space is different but they all look and feel like YOUR spaces. If a person went from one room into one that looked like someone else lived there, that would be weird. A website needs to be similarly unified.

Websites should also flow like the great room / kitchen of a modern home design. Although each space has a different purpose, they are all accessible from any one of the spaces. If a person walked into one room and then had to back out to move on, that would be awkward.

A website needs to flow from file to file while maintaining a consistent look and feel.

Website unity is created by having the same banner and navigation and dimensions from "page" to "page". We are talking about files not "pages", but old language-ways linger.

To make your website look uniform, you need to put the same header and the same navigation bar on every file except index.html, which is your front door. The file portfolio.html already has a banner and a navigation bar, so an easy choice is to replicate it, add it to resume.html and about.html. So that's what we will do. The results won't be perfect for reasons I will explain later, but close enough.

To unify your website, you need to copy and paste the following into the <style> </style> tags of resume.html and about.html -- leave everything that's already in the style tags as it is.

.navbar {  overflow: hidden;  background-color: #333;  margin-bottom:30px;}/* Style the navigation bar links */
.navbar a {  float: left;  display: block;  color: white;  text-align: center;  padding: 14px 20px;  text-decoration: none;}/* Right-aligned link */
.navbar a.right {  float: right;}/* Change color on hover */
.navbar a:hover {  background-color: #ddd;  color: black;}/* Header/logo Title */
.header {  padding: 80px;  text-align: center;  background: #006679;  color: white;}

Then you need to add the following directly under the <body> tag of resume.html and under the <body> tag of about.html.

<div class="header">  <h1>Your Name </h1>  <p>Your tag line.</p></div><div class="navbar">  <a href="index.html">Home</a>  <a href="portfolio.html">Portfolio</a>  <a href="resume.html">Resume</a> 
<a href="about.html" class="right">About</a></div>

Use your browser to check your work -- the W3spaces' preview panel doesn't tell you everything you need to know. From your w3spaces URL, a user should see your entry page with a button that takes them to portfolio.html which will have links to the other files and all of them will have the same banner and navigation system.

This is technically imperfect in several ways. The page dimensions are not identical. Resume.html is centered on the screen with nice wide margins that neither about.html nor portfolio.html have. The struggle here is that we haven't built these files ourselves and don't really quite know what controls what, so heavy editing will be very time-consuming and given what we are trying to do, maybe not worth it. Still, attention to detail is a trait all employers want so we should make an effort to minimize the differences. Since resume.html is the outlier, efficiency suggests we make it conform. Look at line 51.

<div class="w3-content w3-margin-top" style="max-width:1400px;">

There is a class statement and then a style statement, which means that there are two different elements controlling the layout here. The class belongs to a collection of style declarations that w3schools provides to make pretty layouts quick and easy, as long as you don't change anything but text. We want to tinker a little bit. The style max width statement is something more local and perhaps we can mess with it to change the dimensions. So, let's comment out their line 51 and put in our own.


<div style = 'width:100%;'>

Save. View. You will need to view this in a separate browser window rather than w3's preview pane. When you do, you should see that resume.html now fills the screen the way all the others do.

Your website should now look like this, but with your content, of course.

Better, but still not perfect. When you move from portfolio.html to about.html you will notice the banner and nav bar bouncing. They are not identical. Closer, but not identical. Good enough? Good enough for me for now. Good enough for you too, unless you are going for an A+ in this class. Great content will forgive a minor technical imperfection.

Remember that the content I've got is only just slightly better than place-holder text. My picture is repeated. Why? Lazy? Maybe a few other images would be better. Images shouldn't be purely decorative. They should communicate something useful or at least create a relevant feeling. And of course you need your own words and your own information. So, edit, edit, edit.

GRADE: - 10% if it all works, looks 99% uniform, and has your information and personality on display.

Assignments

Week 08 - Tying it all together DUE 5 pm, 03/01