Create a project directory for your time capsule project. This should live in your projects folder. Please match the structure below:
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.
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)
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.
This is in the lower right hand corner of your document.
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.
You can see a filesize estimate in the lower left hand corner of the image preview
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.
Example
sky.jpg
sky-animated.gif
heart.png
Placing the Image on Your Website
For the following demo, you can use these two imgs, download here
File Structure
body { background-color: blue;}Notes About Images
Image Dimensions
Image File Sizes
Image File Types
Image File Names
Placing the Image on Your Website
The img tag
<img src="YOUR-PATH-GOES-HERE" alt="Description">