I hope you folks are ready to get coding! This class will deal with three major topics: ‘desktop’ coding, mobile/responsive techniques, and compatibility considerations (old browsers, browser inconsistencies, accessibility). Nearly all of this will center around CSS in some way, including when we cover JavaScript. As we all saw during Bootcamp, CSS can be a tricky animal. It’s pre-written, of course, … Continue Reading →

My pens on Codepen: www.codepen.io/bwalsh5/ Solved By Flexbox: Solved By Flexbox Flexbox Frogy! http://flexboxfroggy.com/ Flexy Boxes: http://the-echoplex.net/flexyboxes/ Flexplorer: http://bennettfeely.com/flexplorer/ Putting Flexbox into practice: http://zomigi.com/downloads/Putting-Flexbox-Into-Practice_Blend-Conf_130907.pdf S’mores: http://www.smoresday.us/builder.html

This is a great website for learning and reviewing all of our options for controlling layout in HTML and CSS. Note that we have not covered all of these techniques yet: http://learnlayout.com/ And here’s a similar primer on the basics fo Flexbox: https://bocoup.com/blog/dive-into-flexbox  

Some links: Why Ems? https://alistapart.com/article/howtosizetextincss https://snook.ca/archives/html_and_css/font-size-with-rem    

  What is the Holy Grail? How to code the Holy Grail (old way) Holy grail using Flexbox A Complete Guide to Flexbox  

http://student.elon.edu/tholland/hollandresume/index.html http://student.elon.edu/cdonick/resume/ http://student.elon.edu/tanderson6/resume/ http://student.elon.edu/aveara/aveararesume/ http://student.elon.edu/kdunville/Resume/ http://student.elon.edu/ajones99/jonesresume/ http://student.elon.edu/bsheffler/split/ http://student.elon.edu/kwagner3/KWResume/ http://student.elon.edu/mboulton/OnlineResume/index.html http://student.elon.edu/krivera3/kristenResume/ http://student.elon.edu/kaustin4/resume/index.html http://student.elon.edu/ddimos/Resume/ http://student.elon.edu/egaskin/gaskinresume/gaskinresume http://student.elon.edu/nbuntain/resume/  

The CSS-Tricks ‘cheat sheet’ on Flex is here: A Complete Guide to Flexbox …and here’s a great tutorial on how to set up a ‘real’ (responsive) page using flexbox: Designing A Product Page Layout with Flexbox Some common issues with Flex, and how to solve them: https://github.com/philipwalton/flexbugs A cool Flex pen:

To embed a local version of a font onto your site (that is, a file you’ve downloaded and put into the root directory of your site): (taken from http://www.font-face.com/) Initially you define the rule, “font-family” is what you want to call the font, “src” is where it can be found, include a “font-weight” (not needed for normal, but required by everything … Continue Reading →

Class, the <progress> and <meter> tags work well enough now in browsers that I encourage you to use them. The syntax is pretty easy: both require parameters for ‘min,’ ‘max’ and ‘value,’ and the meter will be assembled for you: <progress min=”1″ max=”10″ value=’8′></progress> To see the meter tag do the same thing, replace <progress> with <meter>. The appearance of … Continue Reading →

Class, I’ve put an example of a stretchable background image on the server, in a folder called ‘background-stretch.’ Additionally, you may find this link useful in how to code a stretching background, and what the different options do: http://alistapart.com/article/supersize-that-background-please The server also has an example of using Smooth Scroll. Here’s the URL I referenced when setting up that example, which … Continue Reading →