Are you ready?

To create your Liquid Syllabus, you will need a Google account or access to another website where you can create a web page such as wix, word press, or smore.

Step 1: Create Your Site

Go to the Google Sites or another website. You may need to sign in or create an account based on the site you choose. The steps below use Google site as the selected website. You may choose another site.
In the Template gallery, select the Blank option.
Your own shiny new Google Site will open before your eyes!
Change the name of your site. In the upper left corner, click on Untitled site and type in a name for your site. This is the name that will appear in your Google Drive (for example: Liquid Syllabus: History of Photo).

Check your progress - below is an image of what your site should look like after Step 1.

Your page title

Step 2: Customize the Header Section

The header is the first section of content on each page of your site. It includes the title of the page and provides the option to format the background with a color or image. The header text is formatted as Title text, which is the equivalent of Header Level 1 text in Canvas. As you develop your Google Site, only the text in your header should be formatted with Title text. The hierarchical text formats in Google Sites (Title, Heading, Subheading, Normal Text) are more than just aesthetic text sizes. Header text styles support screen readers (assistive devices used by people who are blind) to navigate the content on your page.

Follow this guideline throughout your site: Use Title text in the header of a page only. Use Heading text for the top-level sections of a page and Subheading text for the secondary sections. Use Normal Text for your paragraph or body text. Would you like to learn a bit more about this topic? View this terrific 2-minute video about header text (Links to an external site.) from Foothill College.

Customize the Title text. The title tells your students what the site is about. In most cases, this will be your course name.
- Click on the Title text, Your page title, in the header area.
- Type a new title for your Site.
- Adjust the width of the title text box as needed by selecting a blue dot and dragging it left or right.
Change the header background color or select an image.
- Click on the header image.
- Select Change image.
  - To choose from the Google image gallery, click on Select image.
  - Or to upload your own image, click on Upload.
Select your header type. Google Sites provides three header format options: Cover, Large banner, Banner (the default for a blank site template), and Title Only). You can toggle between the options to see which you prefer.
- Click on the header image.
- Choose Header type.
- Choose your preferred header option.
Check your progress. Below is a screenshot demonstrating how your site should look at this point.

Step 3: Add your Friendly Photo or Welcome Video (with accurate captions)

Can you think of a better way to be welcomed to an online course than to watch a brief, friendly video of your awesome instructor? We can't either. Insert your photo or video (it must be hosted on YouTube to embed in a Google Site) at the top of your site so your students are greeted by your friendly smile.

Add Your Friendly Photo

Double-click in the spot where you want your image to be inserted (below the header, on the left side of the page).
In the right column of your site's page, you will find the Insert, Pages, and Themes panels. Be sure Insert is selected.
From the Insert panel:
- Choose Images
- Choose Upload
Browse for the image on your computer and select it.
The image will appear on your page. And it may not appear where you wanted it to! If you need to relocate the image, simply click and hold your mouse and drag/drop the image into a different location.
To make the image smaller,
- Click on the image to make the blue dots appear around the edges.
- Click and drag a corner to make the image smaller without distorting its dimensions.
Great! You've got your image in place. Now let's make sure it is accessible. Remember, if you add an image that conveys meaning to a viewer, we must include alt-text to ensure it can be accessed by users who rely on screen readers to navigate your site. To do so, we add alt-text (short for alternative text) to the image.
- Click on the image
- Select the 3 dots at the top
- Select Add alt text
Add your alt-text. Here's a tip. Do not start your description with "Image of..." or "Photo off..." A screenreader includes that information so adding it is just redundant. Describe what you see as if you are describing it to a person who cannot see it. For example, "Your professor, Carlos, greeting you with a friendly smile while holding an adorable puppy"
- Note: If the image you are adding is decorative (which can be a tricky decision to make), you may select the box, "This is a decorative image." If that box is selected, a screen reader would skip right past the image.

Add Your Welcome Video

First, check to be sure your video has accurate captions. If the auto-captions play, you will need to edit them to include capital letters, commas, and correct spelling errors.
In the right column of your site's page, you will find the Insert, Pages, and Themes panels. Be sure Insert is selected.
From the Insert panel (in the right column), select YouTube.
From the Select a file window, click on the Uploaded tab.
This will show a list of all the videos you've uploaded into your YouTube channel (Please note: If your YouTube channel is associated with another Google account, you will need to use the Video search option and copy/paste your video URL). Scroll through the videos and select the one you'd like to add to your site.
Click the blue Select button at the bottom.
Your video is now embedded on your homepage in the section below your header. You can click and drag the video to reposition it. You want it to be located on the left side of the page.

Step 4: Add Your Welcome Note

In the section containing your photo or video video, double click in the blank space to the right. A circle will appear with shortcuts to insert different types of content.
Select the Tt at the center of the circle. That will insert a text box to the right of your video.
Click in the text box and write a brief note that begins "Dear student," explains the purpose and importance of your syllabus, welcomes them to the course, and is signed in the manner you would like your students to address you. If you have included a video, also prompt students to click to view the video and specify how many minutes it is.
Check your progress. Below is a screenshot showing what your site should look like now.

History of Still Photography

Step 5: Add Your Teaching Philosophy

In this step, you are going to add two new sections just below the section containing your picture/video and welcome note. The first section will contain header text that says, "My Teaching Philosophy." The second section will include your teaching philosophy written in normal (paragraph) text.

Double click in the white space below section two and select the Tt in the center of the circle.
Click on Normal text and toggle it to Heading.
In the text box, type "My Teaching Philosophy."
Select the Palette icon on the left side of the section, labeled Section background.
- To draw your students' eyes to the header section, change its background to a different color option. Alternatively, click Image and Select image to use a background image from the provided collection.
Double click in the white space below section two and select the Tt in the center of the circle.
Type your teaching philosophy using the Normal text style.
Check your progress. Here is a screenshot showing what your site should look like at this point.

Step 6: Add an "Our Pact" Section

Your learning pact communicates clear 2-way expectations about your course. Presenting a pact to your students ensures they are crystal clear about their role and your role in the course. It also cues your students that you will be a partner in their learning.

Please take a moment to view our sample learning pact, which you are welcome to adapt if desired.

To complete this step, please view the following 3-minute video.

Step 7: Add an About This Course Section

To complete your homepage, add additional sections titled "About This Course" by using the "Duplicate section" option or start from scratch.

This section should answer the following questions:

On what date does the course begin?
What date do students need to log in by?
Are there live (online or in-person) sessions? If so, when?
What are the due dates for week one?
Is there a required textbook?
What materials do students need to have in week one?

Step 8: Add a New "Support for You" Page with Descriptive Links

Please view the following video to learn how to add a new page for links to your college's student support resources. As noted in the video, be sure the links on this page (and all pages) are descriptive links.

What is a descriptive link?

😊 This is an example of a descriptive live. The link or URL is not visible to the user, it lies behind the text that describes the website that will open if the link is clicked: Online Academic Counseling
😔 These are examples of a non-descriptive links. These examples would be read to a student using a screenreader but they would not communicate what page would open if clicked on. type of link is not accessible to students who use a screenreader to navigate web content):
- https://www.msjc.edu/counseling/index.html
- Click here

To complete this step, please follow the steps in this 4-minute video.

Step 9: Add an Image with Attribution and Alt-Text

Adding images to your site is a wonderful way to spark your students' interest. Search for relevant images on Unsplash.com (Links to an external site.) or Pexels.com (Links to an external site.). The images you find on these sites may be downloaded and used without attribution but attributing the creator is always considered good etiquette. And it models the attribution of creative works to your students.

Download the image to your computer that you'd like to include on your site.
- Images that are in a horizontal (or landscape) layout will usually work better on your site. If the image is not shared with a Non-Derivative license, you may crop the image in a separate program (like Preview on a Mac) before you upload it.
Navigate to the page and section where you'd like to include the image.
Make a spot for the image by adjusting the width of the text box that is currently in that section.
- Click in the text box.
- Click and drag the blue dot on the left or right edge of the text box until there is ample room for your image.
Double-click in the blank spot where you want your image to be inserted.
In the right column, select the Insert panel.
- Choose Images
- Choose Upload
Browse for the image on your computer and select it.
The image will appear on your page. And it may not appear where you wanted it to!
If you need to relocate the image, simply click and hold your mouse and drag/drop the image into a different location.
To make the image smaller,
- Click on the image to make the blue dots appear around the edges.
- Click and drag a corner to make the image smaller without distorting its dimensions.
Great! You've got your image in place. Now let's make sure it is accessible. Remember, if you add an image that conveys meaning to a viewer, we must include alt-text to ensure it can be accessed by users who are blind. To do so, we add alt-text (short for alternative text) to the image.
- Click on the image
- Select the 3 dots at the top
- Select Add alt text
Add your alt-text. Here's a tip. Do not start your description with "Image of..." or "Photo of.." A screenreader includes that information so adding it is just redundant. Describe what you see as if you are describing it to a person who cannot see it. For example, "A Black student working on a written assignment near a laptop with headphones on."
1. Note: If the image you are adding is decorative (which can be a tricky decision to make), you may select the box, "This is a decorative image." If that box is selected, a screen reader would skip right past the image.
Add the attribution to the Caption line. Following the attribution guidance from the image site, add a caption below the image.
- Select the image
- Choose the 3 dots at the top
- Select Add caption
- Type the caption into the field that appears below the image.
- You may adjust the text to be centered or keep it left aligned -- your choice!
Repeat these steps to add another image to your site (if you'd like).
Alternatively, Canva.com is a great, free graphic design tool that will allow you to create graphics (non-photographic images) for your site. You might want to add that to your list to check out later.

Step 10: Select a Theme and Menu Style

If you are happy with the look and feel of your site, that's great! If you'd like to explore some different options, you can do so by applying a different theme. Google Sites has several built-in themes that you can apply to your site. Each theme changes the layout of the title header, the font, and the color.

Select a Theme

Click on your Home page. You want to preview the themes from your Home page because homepages contain more styling elements than other pages.
In the right column, select the Themes tab (to the right of Insert and Pages).
You will see a series of themes appear in the right column. The theme that you have currently selected is the one that has the palette of colors below it. Remember which theme you are using in case you want to toggle back to it.
Select a different theme and watch your site change!
You may wish to adjust the alignment of the text in your Title header to Center or Left-aligned. Try different formats to see what looks best.
Select a different color from the palette below the theme you have selected. You'll see that it adjusts different aspects of your site, like the buttons you added on your homepage. Also, that color becomes an option for a background color for each section.
- If you wish to select a custom color, click on the color at the far right end of the palette bar. It will allow you to use the color picker to choose a custom color.
When you have selected a theme that you like, you are done with this step.

Select a Menu Style

View this 1-1/2 minute video to learn how to choose between a top and side navigation menu.

Step 11: Preview Screen Size Outputs

Your Liquid Syllabus will be viewed on many different screen sizes. Google Sites has very handy way to preview your site on three screen types: phone, tablet, and large screen.

Watch this 1-minute video to learn how to use the Preview feature.

Step 12: Share Your Site

The Share step is an important one. It ensures that your site is set to a public view, which is critical to ensure your students can access it.

Watch the following 2-minute video to learn how to complete this step.

Step 13: Publish Your Site

Here it is! The moment you've waited for. Now, here's some advice. While it may seem like clicking publish is something only want to do when your site is really polished, don't fret. People are not going to flock to your site just because it is available. You can still continue to make changes to it as often as you'd like. In fact, every time you make a change to your site – any change at all – it will not appear to your viewers until you click Publish again. That is a very important lesson to learn.

Follow these steps to publish your site:

Click the blue Publish button
Web address: In the Web address box, you will see auto-generated derived from the title of your site. The letters in this box are the letters that will appear at the end of your site's URL (or address). This is referred to as your site's suffix or slug in web terms. You can leave this as is or you can change it to something different. Generally, shorter is better for URLs.
Who can view my site: Be sure this option is set to Anyone (refer to the Google support guide (Links to an external site.) for further help on sharing options).
Search settings: If you would prefer that your Liquid Syllabus not be retrievable through public web searches, select this box. Doing so will not prevent your students from getting to your site if they have the link. They will not, however, be able to find it through a web search.
Click the blue Publish button.

Step 14: View Your Published Site and Locate the Share Link

Your hard work has paid off! You now have a published Liquid Syllabus. Take a peek now at that blue Publish button again. You will notice that there is now a small arrow to the right of it. That's how you navigate to your published site.

Select the blue arrow next to Publish.
Select View published site.
You published Liquid Syllabus will open in a new tab. At the top of that screen, highlight the entire URL and copy it.
- That is the URL (web address) you will want to include in your welcome email to your students the week before class begins.

Content taken from @ONE Equity and Culturally Responsive Course