Info Card Assignments

Summary

Info Card weekly assignments progressively build a short one-page content page about any topic, fiction or nonfiction:  basic car maintenance, the basal ganglia, an alien invasion, anything. For content, you can use Wikipedia content, Google searches, or any AI tools. Please source your content that is not yours and provide links at the bottom of the page. Small weekly tasks on your Info Card will demonstrate the application of techniques discussed in the weekly modules. Follow along with the weekly videos for how to complete these assignments.

Info Card HTML:

  1. In the text-editor, save your own file and call it “index.html.” Save it inside a folder called “info-card”.
  2. Copy the HTML source code of this page: starter-page.html This page has the basic HTML code to start a web page.  Sublime Text has a new feature to get this start code. On your newly saved index.html,type <html> and then Tab, and you will see all the essentials to start making your site.
  3. Grab the code for HTML table and form elements from the source code of this page (this template has some CSS to make the table visible – we will do this next week).
  4. Find or create a topic for your Info Card. Use wikipedia or any public domain resource. Have fun! You will need to fill up the tagged content blocks below.
  5. In plain HTML add the following HTML tags for your content inside the <body>. 
    1 heading (h1)
    1 paragraph (p)
    1 image (img)
    1 table (table)
    1 set of bullet points (ul/ol)
    a short form to collect information from the reader (only the HTML “form”, not the functionality – you would need JavaScript to send the info to a database). You can create a multiple choice question with radio buttons, text fields for user input, etc.
  6. Fill the tags with the appropriate content
  7. Upload to the server the folder “infocard” containing the index.html file and the one image file
  8. Check to see that your file structure works using this url path – https://dtc-wsuv.org/”your folder”/info-card
    DTC355-01 InfoCard list
    DTC355-02 InfoCard list

Info Card CSS:

  1. Open the folder “infocard” folder from Sublime Text – you will see all the files in the left sidebar
  2. Create your stylesheet – either linked as a CSS file or embedded in the <style></style> tags 
  3. Apply at least 10 CSS property styles to the HTML elements in the <body> – h1, figure, img, p, table, ol/ul, body, font styles, etc.
  4. Upload to the server the folder “info-card” (replacing what is there). The folder should contain the index.html file (with its internal CSS) and the one image file
  5. Check to see that your file structure works using this url path – https://dtc-wsuv.org/”your folder”/info-card
    DTC355-01 InfoCard list
    DTC355-02 InfoCard list

Info Card Visual Hierarchy:

  1. Open the folder “infocard” from Sublime Text – you will see all the files in the left sidebar
  2. Find a color scheme for your info card using Adobe Kuler
  3. In the stylesheet apply the color scheme to the various elements
  4. In the stylesheet add typography styles and fonts for the text
  5. Check that you are following the basics of Visual Hierarchy to make your content pleasing and accessible – create difference and repetition
  6. Does your font color have enough contrast with the background?
  7. Are boxed elements aligned?
  8. Does the applied color scheme highlight the content?
  9. Do you have padding to give your text some space instead of being crammed?
  10. Upload to the server the folder “infocard” containing the index.html file (with its internal CSS) and the one image file
  11.  Check to see that your file structure works using this url path – https://dtc-wsuv.org/”your folder”/infocard
    DTC355-01 InfoCard list
    DTC355-02 InfoCard list

Info Card Responsive Design:

  1. Open the folder “infocard” in your text editor – you will see all the files in the left sidebar
  2. In the <body> element add a least one CSS Grid container div (id it as “grid-container”) to surround the various content boxes (not the h1)
  3. In the <style> element add CSS Grid styles for your “grid-container” so that the child content divs go into two or three columns
  4. In the <style> element add at least one media query for your “grid-container” so that the two or three column reverts to one column under 600px device width
  5. Upload to the server the folder “info-card” containing the index.html file (with its internal CSS) and the one image file
  6. Check to see that your file structure works using this url path – https://dtc-wsuv.org/”your folder”/info-card
    DTC355-01 InfoCard list
    DTC355-02 InfoCard list