Interactive Writing & Design

Favicons are the little icons that show up in your browser tabs, and that save when you bookmark a site. They also indicate the difference between an amateur site and a professional site.

While it’s relatively easy to create these little images, getting them to consistently show up on your site in various browsers can be a struggle. Here’s a few links that will help:

A great video walk-through (screencast) of how to create and add a favicon to your site:

http://css-tricks.com/video-screencasts/122-the-state-of-favicons/

A more in-depth explanation of the (now) complicated world of favicons:

http://www.jonathantneal.com/blog/understand-the-favicon/

An app that does the heavy lifting for you:

https://itunes.apple.com/app/icon-slate/id439697913?mt=12

And here’s the code I used in class to add a favicon to my site:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Keep in mind, your ‘favicon.ico’ fie needs to be in the root directory of your site – the same location as your ‘index.html’ file – and that it may not show up in all browsers, so try a different one if you cannot see it.

Here’s a great tutorial on using Flexbox to make a (fake) messaging app – very interesting, as it’s done only for mobile:

http://www.creativebloq.com/netmag/create-slick-css-layouts-flexbox-41411325

If you’re having trouble predicting what your flexbox setting will do, here are two sites that let you doodle until you figure it out:

http://the-echoplex.net/flexyboxes/

http://bennettfeely.com/flexplorer/

Great post on the ‘viewport’ <meta> tag:

http://webdesign.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag–webdesign-5972

Also, the articles that ‘invented’ responsive Web design (thanks a lot, Ethan Marcotte!):

http://alistapart.com/article/fluidgrids

http://alistapart.com/article/responsive-web-design

http://alistapart.com/article/fluid-images

The ‘Ultimate’ Flexbox Cheatsheet:

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

http://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/

MDN Tutorial:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

-prefix-free: a JS plugin that lets you write prefix-free CSS: http://leaverou.github.io/prefixfree/

Web Developer: http://chrispederick.com/work/web-developer/

Some Flexbox terms – default CSS values are in bold. E=Remember that these flexbox rules are applied to the container, and the elements inside should ‘listen’ to the layout rules.

display: flex; makes your content use the flexible box layout module (flexbox!)

flex-direction: row, row-reverse, column, column-reverse; control layout and order

• flex-grow: how much a flex element will grow relative to other items
• flex-shrink: how much an item will shrink relative to others
• flex-basis: initial size before adjusting

So, flex: 1 0 200px means ‘distribute extra space evenly between items, don’t let the items shrink at all, and start them at a width of 200px (kind of like a ‘min-width’)

https://bensmann.no/cv/

This is old, but it’s still the most effective summary of CSS positioning rules:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

http://student.elon.edu/apugh6/APResume/

http://student.elon.edu/hkean/Resume%20Project/

http://student.elon.edu/lbourne/ResumeLaurenFinal/

http://student.elon.edu/nmargherita/resume/

http://student.elon.edu/bthigpen2/BrandonThigpenResume/

http://student.elon.edu/tmackins/resume/index.html

http://student.elon.edu/jbucec/Resume/

http://student.elon.edu/mallen33/resume/

http://student.elon.edu/bbooker3/bookerresume/

http://student.elon.edu/bwashington4/resume/

http://student.elon.edu/akim6/resume/

http://student.elon.edu/cmcswain/McSwainResume/

http://jennyandherstories.com/resume/

@font-face {

font-family: ‘Graublau Web’;

src: url(‘GraublauWeb.eot?’) format(‘eot’),

url(‘GraublauWeb.woff’) format(‘woff’),

url(‘GraublauWeb.ttf’) format(‘truetype’);

}

display: flex;   /* as opposed to ‘display: block;’ or ‘display: inline;’ – makes your container flexible! */

flex-direction: row; (column;)  /*adjust the main axis to be vertical or horizontal */

flex-wrap: wrap / no-wrap  /*allow content to wrap inside a fixed-width container */

flex-flow: row wrap /*combines the above two rules! */

flex-shrink: 0/1   /*allow or disallow content to shrink beneath the default value */

flex-grow: 0/1    /*allow or disallow content to grow beneath the default value */

min-height: 100vh;    /* ‘vh’ equals 1/100th of the browser’s overall height */

min-wifth: 100vw;   /* ‘vh’ equals 1/100th of the browser’s overall height */

align-items: center;  /* ‘vertically center content */

justify-content: center; /* ‘horizontally center content */