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 … Continue Reading →

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 Main axis: the primary axis on which you are working; … Continue Reading →

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 … Continue Reading →