1. Home
  2. Showcase
  3. Tutorial Pages
  4. Tutorial Template

Tutorial Template

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph/Body Text. This will always display 18px text, gray-colored, in Roboto font, no matter what. 

Writing for the web should be direct and concise. Write minimal text, and write it at an 8th grade reading level.

Text that has been written for print or email does not always translate well to the web.

Visitors are task-oriented; they skim and scan, getting just enough information to get to their next destination. They are impatient, do not waste time by thanking them for visiting your webpage.

Chunk content into categories, and display the different content chunks on separate pages or clearly separate them on one page. Make text scannable by breaking text out into bulleted lists, bolding important terms and using headings.

Do not create sections that are “under construction" or “coming soon”. Every page should appear complete while published. If upcoming content is not ready, don’t mention it.

Highlight the copy below (ctrl/cmd+C) to your clipboard. Then delete the text. Then paste it back (ctrl/cmd+V). Notice the results. 

Poor sleep quality has been linked with the following symptoms:

  • higher levels of negative mood
  • physical symptoms such as insomnia
  • stress
  • use of medications
  • persistent psychological distress

 

goat yogaAdd an image to the left or right of this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

**a note about images**

Tables

  No Yes
Should tables be used to create page layouts, with photos and/or creating multiple columns for text? X  
Should tables display data that cannot be understood easily withouth tabular form?   X
Is this a good use of a web table?  X  

 

Table Snippet

Type whatever you want here

and here

and here

 

 

 

 

 

 

Using Links

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, Click here to go to the Marketing & Communications website.sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. For more information about FAFSA, click here. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, Click here to register in culpa qui officia deserunt mollit anim id est laborum. 

 

Two Column Content

student doing goat yoga

Heading Here

Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat.

minim occaecat.

Buttons

Register for Classes Now

Accordion Links

Accordion Example

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.