Week 2 – Time Capsule Code Refresher

File Structure

  1. Create a project directory for your time capsule project. This should live in your projects folder. Please match the structure below:

  1. Create an index.html file and place it in the time-capsule folder. Create a blank  main.css and save it in the css folder.
  1. Link to your CSS file in the head of your index, like this:
  •   <link rel="stylesheet" href="assets/css/main.css"> (this goes in your index.html’s head, after the </title> tag)
  1. Check to see that you linked it correctly by adding a background color to the body in your css.

body {
  background-color: blue;

This is where you will work on your time capsule project. HTML (layout) goes into the index.html file and the styling goes in the CSS. All of your imgs will get saved into the imgs folder


Notes About Images

Image Dimensions

You want your image to be 2x the size that it’ll be displayed. For example – if you want your image to be 600px wide in your design, you’ll export it at 1200px. This is to accommodate retina screens as well as to give you flexibility to change it around in the website. Sketch makes it easy to export assets @2x. 

Image File Sizes

You also want image file sizes that are as small as possible while retaining quality. Always aim for images that are smaller than 1MB. This is really important! Someone this semester will upload an enormous filesize to github and your github will stop working. The steps to fix it are a little annoying, so best try to avoid this situation!

If you’re working in Photoshop, save for web by pressing CMND + OPTION + SHIFT + S this helps you get a small file size that’s optimized for web.

Image File Types

These are acceptable file types for uploading your work:
  • jpg (smallest file size with best quality. most common)
  • gif (can be animated)
  • png (can have transparency)
  • svg (a scalable vector graphic that you can animate and adjust with code. We’ll talk about this more later)

Image File Names

all lower case, no spaces.



Placing the Image on Your Website

For the following demo, you can use these two imgs, download here

The img tag

<img src="YOUR-PATH-GOES-HERE" alt="Description">