Mar 1

Project 2: Interactive Storytelling

Start applying additional CSS using your custom.css file. Also be referencing and using the skeleton.css file. This should be similar process to the Skeleton exercise we did.

Project Specs Reminder

Click to see specs:

  1. single-page (unless your concept promotes multiple pages then I am open)
  2. html / css / Skeleton css framework
  3. responsive (desktop + mobile breakpoints)
  4. works on Chrome
  5. at least 1 css animation or transition
  6. Google Fonts and/or Typekit Web Fonts
  7. 1,000 words approx.
  8. original or copyright-free assets
  9. optimized images 
  10. organized files / folders / code (utilize comments and indention in the code)

Cool CSS Stuff

Spreadsheet of Advanced CSS

Reminder: Image Optimization

Figma – PNGs, JPGs, SVGs

  • YouTube Tutorial
  • Select the images throughout your Frames and click “Export” on the bottom right panel.
  • Choose the file format – PNG, JPG, SVG
  • Click on “Export” button
  • Files go to your Downloads folder

Adobe XD

PNGs and JPGs:

  1. Select your images throughout your Artboards and click on “Mark For Export” on the bottom right panel.
  2. Go to File > Export > Batch
  3. Choose your file format and “Design” and save to an “images” folder in your “project-2” folder

SVGs from XD (vectors):

This format is widely used for icons or other vector assets which need to scale on different screen sizes without losing quality, for example in responsive websites.

When exporting as SVG, you have two options to choose from:

  • Embed: the bitmap image you are saving is placed into the SVG file itself.
  • Link: the bitmap image you are saving is stored separately, and a reference to it is added in the SVG file.

In doubt, just choose the Embed option.

You can also tick the “Optimize asset” checkbox if you want lighter assets in terms of file sizes (the code within the SVG file will be minified, resulting in smaller file).

In Photoshop - PNGs and JPGs:

Go to Export > Save For Web (Legacy) > Choose File Format > Save. If you want something transparent – choose PNG-24 or PNG-8.

Reminder: Accessibility

Reminder: How to Start File Organization and HTML Structure

Click to see:

File Organization/Setup:

  1. Save a file called project2.html in your project2 folder. Then link to it from your Sandbox. <a href="project2/project2.html">Project 2</a>
  2. If you haven’t yet, save an images folder and a css folder in the project2 folder.
  3. In this css folder, save the skeleton.css and normalize.css file from when you download Skeleton . Then also save a custom.css file.
  4. In this images folder, save all your exported/optimized images.

HTML Structure:

In the <head> of the project2.html, include at least the following:

  1. change the <title></title>
  2. links to the 3 css documents:
  3. links to your Google or Typekit fonts
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">

In the <body>,

  1. Structure: start to write out divs including containers, rows, and columns, h1 – h6 and p. You can refer to the Skeleton Exercise for help. Base your columns and amounts off the 12-column grid system.
  2. Text: Copy and paste your text into the corresponding locations on the page.
  3. Images: Start to link your images in corresponding locations on the page. If the image is going to be included as a background-image in the css, you can save it for the next step.

Due Next Class

Project 2: Interactive Storytelling

Start applying CSS using custom.css and skeleton.css.