Interactive Writing & Design

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, but the rules of inheritance, as well as overlapping rules and media queries for particular situations, means it can be very hard to predict. If diving deep into CSS sounds like a serious challenge to you (and yes, we’re diving as deep as the CSS ocean goes), please, please practice coding outside of class. One resource is Lynda, which has loads of task-specific CSS lessons (as well as general overviews of the language in synchronicity with HTML). There’s also CSS-tricks, which shows you how to do ‘cool’ things – and cool things are fine, as long as you’re getting practice working with CSS. Lastly, Codepen is a wonderful place to mess around with CSS experimentation.

We’ll be covering all of our topics in two modes: the ‘traditional’ model for the web (i.e. things you’ve seen online before, like setting up a 3-column website), and a more experimental one (what about creating a layout you’ve never seen before online?). To wit, our layout/nav assignment asks that you make two common layouts, and one wacky one.

Now, not all topics we’ll be covering fit this traditional/experimental model. When we cover ‘legacy’ coding – how to make things look decent in old versions of Internet Explorer – there won’t be much experimentation, beyond trying new approaches to fix things.On the opposite side of the spectrum, when we cover CSS animations, I have little or no interest in seeing a ‘traditional’ use of the technique (I’m not sure there is one). Instead, everything we make will be pretty experimental.

The two most complicated topics we’ll cover are also the last two, which is good, because you’ll feel overwhelmed by all the work you have to do in Professor Lackaff’s class. They are making a custom Google map, which is almost entirely a JavaScript project, and making mobile and responsive versions of a website, which will employ 3rd-party responsive frameworks that use a complicated grid system to display your content. In every case, I’ll show you examples of projects students did in previous years. We’ll also do much of the coding in class, and post the results on the server, which you can borrow from as much as you like. So while these assignments sound hard, and they’ll test your abilities, you’ll all be able to finish them.

Let’s take a step back from our assignments, though. the real aim of this class is two-fold: get you comfortable enough with the coding that you can crank out a basic website with minimal effort, which will put you in line to learn more complicated concepts; and increase your debugging skills, so you can find and fix any errors you’re having. After that, you can do anything you want on the Web.

Our syllabus is on this blog – there’s a link to the right – and there are a handful of resources on the other pages, but the real strength of this blog will be the posts – when we cover a topic in class, I’ll populate the blog with links, examples, code snippets, you name it. It should act as a supplement to our class, and if you miss class, it’s really invaluable.

But don’t miss class! Then you’ll have no trouble finishing all of the assignments and getting an ‘H’ for your grade.

I am available at any time via email, and if it’d make more sense to meet in person, set up a time with me, and we’ll meet. Bring your laptop, or make sure to share a link to your web coding so I can help as much as possible. No question is too big or small. We want all of you to succeed to the most of your potential.

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 else, bold, thin etc).

@font-face {
    font-family: DeliciousRoman;
    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
    font-weight:400;
}

Then just use it like any other font in any other style rule.

p {
    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

So, find a font you like (from dafont.com, fontsquirrel.com, Adobe, Google), download it, and give it a shot.

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 these bars cannot be totally controlled by CSS, as each browser/OS shows them slightly differently. Even whether the meter is animated depends largely on the browser.

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 walks you through the process from Step 1:

http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/