ENGH 375/507: __Web Authorship & Design

Overview

For this third module I would like you to take all of the materials that you have developed for your portfolio and use them to fill in a template from HTML5UP. You will have your choice from 6 of their templates. Once you have chosen your template, you will download it and modify the HTML files so that they include your information and the CSS files so that you can alter the template.

Step One

Your first step will be to choose which template you are most interested in working with and download the relevant files for that template.

If you are interested in a simpler, single page site, your options are Prologue and Read Only.

If you are interested in a more sophisticated looking and multi-page site, you can choose from the following four options: Strongly Typed, TXT, Solid State, and Spectral.

Step Two

Once you have downloaded all of the files for your site, you will want to browse them without making any changes to familiarize yourself with them. There will be more files than you know what to do with. You really only need to be aware of the .html files, the main.css file, and the image files in the images folder.

The CSS for these templates will be massive. They are programmed to work on many different browsers and devices. You will have to scroll through a lot of unrecognizable code to get to the CSS that you are more used to. Do not panic.

I will show you how to navigate the CSS in class. At home, scrolling is your friend. As is the search feature in Notepad++ or TextWrangler, which will let you jump right to points in the code that reference the element or property you are looking for.

Step Three

Familiarize yourself with the elements that are styled up in the site. Most of the templates will have specific page called elements that will show you how each different element looks on the site.

These are your building blocks for the template. They are already styled up and ready to be plugged in anywhere in the site. Return to this page whenever you are trying to evaluate your options for what content to plug in and how.

Step Four

You want to incorporate the various methods of emphasizing text wherever it may be relevant (or just for fun). These tags include <em> <strong> <b> and <i>. Try to find a consistent way to use these tags across your site.

Step Five

Begin modifying the index page. You will want to make each change one at a time, saving the document after each change and checking it in the browser to see if you broke the template. You WILL break the template. And the easiest way to figure out HOW you broke the template is to check how it responds to each change that you make one at a time.

The first changes that you will want to make are adding in a title for your site, adding your name to the copyright in the footer, heading each section, and filling out the site navigation.

If you are working on a multi-page site, you will need to make duplicates of the generic.html pages of your choosing, rename them to whatever pages you want them to be, title them, and similarly fill out their headings, navigation and footers.

This phase is all about adding your text to the spaces that already exist in the site, and particularly to the headings, navigation, and footers.

Step Six

One at a time, delete the sections of the site that you do not plan to use. Begin by deleting the furthest descended elements, like individual <p> elements. Save and refresh the file in your browser after each deletion. And move upwards, deleting the parent elements that contained the elements you previously deleted, each time saving and refreshing, until you've gotten rid of the sections of the site that you won't be using.

This is a long process. Please don't expect it to take only a minute or two. You will at some point break the template. The key is to figure out when that occurs so that you can then try to figure out WHY it occurred. Once you've done that, you can figure out a solution. I will help you with this process.

Step Seven

Similar to the previous step, in this step you will be duplicating any content that you need more of. For instance, you might need more section, heading, or image elements to accommodate all of your content.

Your first step will always be to copy the furthest descended element and paste a second one underneath it within the same parent element (for instance, copy a <p> and paste a second one beneath it in the same parent <section>).

Stop, save, and refresh. If it did not work how you wanted, try undoing it and then moving up a level, copy/pasting the parent element within its parent (so the grandparent of the original element).

Your end goal is to make sure you have enough placeholder content to matche all of your own content.

Step Eight

Plug in all of your own content to the site in lieu of the placeholder content.

If there is content that doesn't fit any of the placeholders, return to the elements page for examples of how you might input it into the template so that it matches the other content.

Keep in mind that sometimes images will not be the correct size and will display incorrectly. Your best option is to find images that are high resolution and of a similar aspect ratio to the originals. Quickly modifying the size of your images in photo editing software is one work around, and another is altering the dimensions of images in the css for the site.

Step Nine

I would like you to make some changes to the CSS file just so you get a feel for navigating such a long string of CSS code. These changes to the code are really simple. The most challenging part will just be trying to locate the part of the CSS code that you need to change.

The first changes that I would like you to make are to the colors of the website. I would like you to change the colors for the backgrounds, the text, the headings, and the links.

These color designations often appear multiple times in the code and it is sometimes difficult to know which you need to change. Two helpful rules of thumb are to stop, save, and refresh after each change and to use the "find" feature to locate other instances of a color once you've discovered its code.

Step Ten

I would like you to browse Google Fonts for at least one new font that you would like to use on the site.

Once you have selected it, click the plus button on the Google Fonts site. Expand the box that appears and click the @import link. Copy/paste the string that reads "@import url('https://fonts.googleapis.com/css?family=Family+Name')" into the top of your CSS file.

Once you've done that, you can now input that new font as the value for the property "font-family" anywhere that it appears in the CSS document. Try changing the font-family of some of your text to your newly imported Google Font.

Step Eleven

Once you have a functional and filled out template-based portfolio site, change the name of the folder you donwloaded to "module3" and upload it to the server.