Interactive Writing & Design

Links from Monday

Using @font-face for embedding your own font:

Using @font-face

The great favicon generator:

http://realfavicongenerator.net/

All of your options regarding CSS backgrounds:

background

Posted in Uncategorized | Leave a comment

Flexbox resources

The flexbox ‘cheat sheet:’ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A flexbox product page (jackets): https://css-tricks.com/designing-a-product-page-layout-with-flexbox/

Intro to flexbox grids: https://css-tricks.com/dont-overthink-flexbox-grids/

Flexbugs: common flex errors and solutions: https://github.com/philipwalton/flexbugs

Solved by Flexbox, a site dedicated to showing examples of using flex for common layouts: https://philipwalton.github.io/solved-by-flexbox/

One of many flex-themed codepen pens: https://codepen.io/imohkay/pen/gpard

 

Posted in Uncategorized | Leave a comment

Resume Examples

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/

 

Posted in Uncategorized | Comments Off on Resume Examples

Resume Rubric

Our Resume project will be due on Friday, September 23. Here’s the rubric, some explanation, advice, etc. Honestly, I try to keep this rubric as flexible as possible, so y’all can exercise full creative control over your project. But here’s a few things you need to do :

  • This is really a layout assignment. Choose either to use Flex or Floats to create your layout. No frameworks allowed. You are strongly encouraged to mock up your layout ahead of time (you do not have to hand in your mockup).
  • Yes, it has to be responsive.
  • Try to make it look as little like your print resume as possible – same content, different presentation.
  • Emphasize the visual – use icons instead of text (when possible), progress bars instead of a list of skills. Consider adding a photo of yourself.
  • Use a favicon
  • Link everything that can be linked
  • Upload the project to a server (probably the student server) and send me a link
  • Use a specified font that fits your content well – using either Google Fonts, Font Kit, or @font-face (CSS)
  • Give your page a title!

Beyond that, some general ideas / suggestions:

  • Consider using a fixed header or sidebar (not required, though)
  • Consider using a JS-based ‘smooth scrolling’ plugin with named anchors (not required)
  • Use one (or both) of the Resume meetings / blitzes happening tomorrow and Wednesday of this week to clean up the content of your resume
  • Consider handing the project in early for some feedback (then re-submitting by the due date)
  • Lost? Look up some examples online (or examples from previous students)

What not to do:

  • Use deprecated HTML, such as <i>, <u>, <b>, <center>, or use a <table> for layout.
  • Make a super-wide page that adds a horizontal scrollbar in most desktop resolutions (max out any width declaration at about 960px)
  • Have your resume look exactly like one of the ones we looked at in class!
  • Create a design that only looks good at a certain screen resolution – think outside of your laptop monitor.

 

 

Posted in Uncategorized | Comments Off on Resume Rubric

Flexbox Resources

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

‘Solved by Flexbox,’ examples of layout solutions with flex:

https://philipwalton.github.io/solved-by-flexbox/

A cool Flex pen:

Posted in Uncategorized | Comments Off on Flexbox Resources

@font-face

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.  That’s what I did for that ‘Star Wars’ intro site.

Posted in Uncategorized | Comments Off on @font-face

Progress / Meter

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.

 

Posted in Uncategorized | Comments Off on Progress / Meter

Stretch Backgrounds, Smooth Scroll

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/

Posted in Uncategorized | Comments Off on Stretch Backgrounds, Smooth Scroll

Favicons

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.

Posted in Uncategorized | Comments Off on Favicons

Welcome to the Fall Semester!

I hope you folks are ready to get coding! After discussing the best approach to covering all of our Web-related content. Professor Moner and I have split topics up in a very logical way that we hope will benefit you all. 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’l 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.

Posted in Uncategorized | Comments Off on Welcome to the Fall Semester!