MCOM 5321: Production of Digital Media Content

Learning Resources

1. Read McFedries (introductory, less technical) Ch. 1: Getting to Know HTML and CSS

2. Watch Svekis Chapter 1 "Introduction to web development and "How to use this course" (est. 9 min)

3. Watch Svekis Chapter 2 starting with "Introduction to HTML" through "More HTML text formatting" (est. 60 min)

4. Read through the W3 Schools from HTML Home through (and including) HTML Lists.

Tasks for the Week

1. Use the Blackboard link to join Microsoft Teams by Wednesday (1/15) evening.
2. Complete the W3 Schools HTML exercises from "Attributes" through (and including) "Lists" by Monday (1/20 at 11:59pm)
3. Post at least one question to Teams asking for clarification on one of the HTML topics covered so far by Monday (1/20 at 11:59pm).

Learning Resources

1. Begin by practicing your HTML formatting from last week. (est. 5 min)
2. Learn about divs and spans as organizing tags (est. 4 min.)
3. Read about "semantic elements" in HTML (est. 5 min) and practice using it.
4. • (Supplementary "Semantic HTML" reading from Robbins)
5. Continue working toward building a page by watching the videos from "place holder content" through "HTML tables".

Supplemental Resources

W3Schools

Semantic HTML quick guide

Understanding HTML file paths

Videos

Setting up new projects in Brackets

HOT TIP: Files and folder names should always be lowercase without spaces.

Notice that all files and folder names are lowercase and contain no spaces. This is a convention of web development that you should always stick to. Web browsers are case sensitive. The browser rendering your code interprets things literally. As far as it is concerned, the files mywebsite.html and MyWebSite.html are two different things. And mywebsite.html and mywebsite.HTML are also two different things. Using all lowercase will make your life easier becuase you don't have to remember if you've used uppercase. The browser also does not understand spaces in filenames. When it sees a space it thinks, "this is a whole new thing!" and stops parsing the thing you gave it.

Tasks for the Week

1. Create a folder on your computer called 5321web and then, inside this folder, create another folder called week02
2. Open Brackets and, in the menu, go to File ---> New
3. Save this file as index.html in your "web5321\week02" folder
4. Create another new file and save it as thirteen-one.html

Your assignment this week comes from "a client" that asks you to format two pages from a U.S. history textbook for use on the web. It's good practice for using the HTML tags you've learned during the first two weeks and also thinking about how a web document should be structured.

1. Download the week two file and unzip it (instructions). You'll see it has multiple files inside and is disorganized (on purpose). Start by opening README.txt and look at the "client's request".
2. Copy the image folder into your own week02 folder and copy/paste the text from the two documents into the HTML files you made.
3. Read through the text and look for any comments {{inside of braces like this}} for specific instructions. The Table of Contents will be oyur index.html page.
4. Markup the pages with HTML!
   • Make sure to include html, head, title, and body tags in your documents.
   • Format the document using the tags you learned. You will need to use all of the following: paragraph, first and second level headers, unordered and ordered lists, a table, links, image, strong and emphasis.
5. When you're finished, zip up your new week02 folder (instructions) and upload the .zip file to the Microsoft Teams dropbox (due Mon. Jan. 27th by 11:59pm)

Learning Resources

• Understanding your Week 02 Feedback (20 min)
• Preparing for Week 03 (25 min)

Due: Exercise #1

You will be expanding on the textbook formatting with additional page that give you more practice at formatting.

Read all of the instructions before starting!

1. Duplicate your Week 02 folder and rename it Week 03. This way you have a backup.
2. In your new Week 03 folder, go through my feedback and update your code [this video will help you stay organized]
3. Download this week's files and copy them into your new folder alongside last week. Make sure your table of contents file is named index.html
4. Watch this week's assignment example/explanation video.
5. Look at the example.html page you downloaded and follow any directions you see in the comments.
6. Using your page for Chapter "13.1 An Awakening of Religion and Individualism", structure the content of that page based on the "example.html" file you downloaded. (Don't worry about bolding key words this time.)
7. Then do this for each of the textbook chapters. It will seem tedious but it's good practice.
   Every page should contain the following semantic elements:
   • <header>
   • <nav>
   • <main>
   • <article>
   • <section>
   • <footer>
8. When you're finished all five chapter, you should then fill in the URLs for the links that go between pages.
9. Open your index page in your browser and make sure you can navigate back and forth between all of the chapters with the navigation links!
10. ZIP your new week03 folder for submission.

Exercise #1 is due to the Teams dropbox Monday Feb. 3rd by 11:59pm

Learning Resources

• Svekis
  1. Ch 3: Start with "Introduction to CSS" and stop after "CSS Float Elements"
  2. Pay particular attention to "CSS Selection and Classes" to see how a webpage interprets styles based on priority and order.
• Robbins
  1. Ch 11.3 Inline, Internal/Embedded, and External Styles (and knowing their use)
• McFedries
  1. Ch 1: Basic properties Introducting CSS Properties
  2. Ch 7: Learning CSS (and don't forget you can practice right alongside McFedries on his website!)
• Bookmark the W3Schools CSS guide. (You're not expected to memorize CSS properties, but you do need to know where to look them up!)

Tasks for the Week

You should be able to complete the CSS practices exercises from "Selectors" through "Tables". Make sure to ask at least one question in Microsoft Teams.

Project Process

1. Decide on the product or service
2. Go steal content from that product's site (or anywhere it may be available)
3. • Use existing copy when available, write new if needed
   • Collect images for later use
4. Organize your content into four pages: index, product details, customer reviews, and purchase.
5. Build your home page first and worry about the other pages after
6. Format these pages properly using HTML
7. Apply styles using an external CSS file
8. Run your code through the W3 validation service to catch any errors [video explanation]
9. Zip up your folder and submit it to Teams

Project Requirements

• Four HTML pages linked together with a menu.
  • All the pages should use the same HTML structure
  • All images in an images folder
  • Documents must use at least: <main>, <header>, <footer>, <article>, <section>, <nav>
• Required HTML elements:
  • paragraph
  • headings (at least h1, h2, h3)
  • table
  • ordered list
  • unordered list
  • <nav> block
  • links out to other websites that open in a new tab
  • links within your website
  • five images including one figure with caption
  • one YouTube video embed (if there isn't one avaiable, just choose a similar product as a placeholder)
  • strong/emphasis where appropriate
  • at least one use of <span>
• Use an external stylesheet
  • create a css/styles.css
  • copy/paste in these basic element selectors
  • Do not use any inline/embedded styles
• Create four custom classes as you deem necessary

The ultimate goal is to show me that you understand document structure and visual styling and are ready to move onto page layout. I'm not particularly interested in the content you choose, just your code!

Submit to Teams by Feb 17th at 11:59pm.

Learning Resources

Read Krug: Preface, Introduction, Chapter 1–7, Chapter 10-13.

Then read this article from Smashing Magazine (sponsored by Adobe) about using grid layouts on the web.

A number of y'all asked about colors, so I recommend reading "A Simple Web Developer's Color Guide" by Laura Elizabeth on Smashing Magazine. We'll use it more in future weeks.

Due: Exercise #2

Seek out two websites—one that does navigation and user experience well and one that does it poorly—and write 300 words a piece about them using Krug's principles. Paste the link to the site and your commentary into the #help with design channel in Teams by Sunday at 11:59pm. Then reply to one other person's link in Teams by Monday at 11:59pm.

Note: Please do not use Amazon, Apple, TTU.edu, or social networks (including Pinterest) as your examples. Also, don't use web interfaces for applications like Spotify, Netflix, or similar services.

Learning Resources

The core of this week's instruction comes from McFedries who has a great chapter on layouts. We will be using this book for the next two weeks. We will be using the "float" method (as opposed to flexbox or grid).

Svekis, unfortunately, doesn't have a great demo for page layouts. The following videos will be helpful to see learn some of the code behind McFedries, though.

1. Measures and Properties
2. CSS Spans and DIVs
3. CSS Float Images
4. CSS Float Elements
5. CSS Box Model

Starting next week, we'll be looking at how these methods for doing layout will allow you to adapt your website for different sized screens.

Additional Resources

• Float layouts (w3 schools)
• Building nice navigation (w3 schools)
• "A Simple Web Developer's Color Guide" by Laura Elizabeth on Smashing Magazine
• Choosing and applying colors (video: 14 min.)
• "The Length of CSS" guide to sizing
• W3Schools on Website Layout

Due: Exercise #3

The goal of the week is to take your Product site from week 5, revise it with the feedback you received, and employ the "holy grail" CSS layout to make it function and look more like a modern website.

(Note: we will use another )

1. Duplicate your Product site into a new week07 folder.
2. Make revisions based on the feedback you received.
3. Make revisions to content organization based on the Krug book
4. Apply the "holy grail" layout to your site using CSS
5. Choose a color palette for your site based on the Color Workflow and include those colors in your css
6. Make sure everything looks nice and functions properly!

When you are finished, zip the week07 folder up as usual and submit it to the Assignment dropbox on Teams.

Learning Resources

1. Watch Kevin Powell on Floats, Flexbox and Grid (26 min)
2. Read the Interneting is Hard tutorial on using flexbox
3. Website not working? Download this PDF and the image files.

"How To"

• W3 Schools on Responsive Design, Using Flexbox and layout examples
• Using the Chrome Developer "Inspect" Tool (video)
• McFedries Ch 13: Designing Responsive Web Pages (if you're interested in additional details)

What's Due?

Follow the instructions on the Interneting is Hard tutorial and complete the example. Make sure to test how it looks on different devices using the inspect tool. This is an ungraded activity but will demonstrate that you're prepared to work on project #2.

When you are finished, zip the completed responsive-design folder and submit it to the Assignment dropbox on Teams.

Your website will consist of three pages:

1. Biographical sketch (index.html)
2. Neatly formatted resume or curriculum vitae
3. Photo gallery (with captions) page featuring your six greatest accomplishments

Requirements:

• Responsive design for phones, tablets, and web browsers
• A flexbox structure that expands to the Holy Grail on wider screens
• Horizontal navigation that collapses to vertical (or "hamburger icon") on narrower screens
• one external CSS file for all HTML elements used
• A resume/cv formatting using definition lists
• Images and video that support your fictional accomplishments

By the end of these weeks, you should be able to:

• Build a full mobile-responsive website using flexbox and @media queries
• Understand the value of paper sketching
• Use the inspector to test your site's responsiveness
• Recognize the importance of asking your peers for help to solve problems

Let's Get Started

1. Watch the paper sketching video How to wireframe a website | CharliMarieTV (YouTube 04m50s)
2. Explore flexbox starter templates (so that you can use one!)
3. Using definition lists

Tasks for Week 9/10

1. Determine your fictional dream job and outline your accomplishments
2. Paper sketch your site
   • Begin by imagining the mobile version first
   • Which elements are consistent across all pages?
   • What will need to change on the different pages?
3. Begin to color block-out (placeholder content only) your index page using a similar method to the Interneting is Hard flexbox exercise
4. I highly suggest you paste your color-blocked index.html and style.css into a codepen and submit this work-in-progress to the #sharing your work channel in Teams by Monday March 30 at 11:59pm. Submissions received before the deadline will be reviewed more quickly to give you more days to work on the final version.

Tasks for Week 11

1. Finalize your layout
2. Collect content and write copy that will go on the site
3. Determine your color palette
4. Complete the build of your site
5. Submit zip file named "lastname-portfolio.zip" to Teams Assignment by April 3rd at 11:59pm.