CUNY Academic Commons

Posting this note on behalf of Robin Davis, who sent this information to workshop attendees after our HTML+CSS for Librarians workshop on Friday, October 10, 2014. —Allie

Dear colleagues,

Thanks for coming out to last week’s HTML & CSS workshop, offered by the LACUNY Emerging Tech Committee  We hope you learned a lot — or at least a little! — and that you’ll use the skills & code in your library.

There were a few things we didn’t cover, and a few resources I promised I’d send out.

Teach yourself more HTML & CSS

• Codecademy — hands-on, in-browser course that walks through the basics (free)
• Skillcrush — beginner-friendly resources and a free 10-day “bootcamp”, in addition to paid classes (plus the newsletter is pretty good) (free or paid)
• W3Schools — easy walk-throughs of the many facets of HTML and CSS; a good resource (free)
• Lynda for HTML or CSS — in-depth video classes on web design and other things (paid, but free access through METRO)
• Cheatsheets I handed out: HTML (PDF), CSS

OneSearch resources

• Copy/paste code for plain search box
• Collections in Primo Central Index (requires an OLS login, easy to set up)
• Video walkthrough for users
• Code/widget generator Allie demo’d

Workflow

Today we used CodePen  which is useful for testing and sharing bits of code. But usually, if you’re editing or revising full documents, you’ll be using a code editor (like oXygen or Coda  to write your HTML & CSS files. You’ll test them locally (e.g., opening a .html file from My Documents into a browser) or in a development environment on a full test site, hosted on a server (example workflow). For some of us, though, the most web design we’ll do is editing the source code of a WordPress post — and that’s fine!

As you saw in the workshop, most web design & development involves very quick trial & error, trying new things and refreshing the page over and over again to see what changed.

Learning from other sites

See something you like from another site? In your browser, right-click to View Source and look at the code in full. Or, in browsers like Chrome or Firefox, you can right-click on the specific thing that caught your interest, and Inspect Element. A new frame will open in your browser and show you where exactly in the source code that interesting thing is! It also brings in the appropriate CSS attributes from the stylesheet, giving you an opportunity to test-edit both the HTML and CSS right in your browser (!!) to see how a change would affect the display. Developers do this all the time.

Moreover, you can  copy & paste bits of code to use yourself. Copying content is problematic; copying an entire website’s code is rude; copying an interesting chunk of CSS is totally fine. Developers do this all the time, too.

Troubleshooting

Most tech problems you’ll run into have also troubled others. Try googling the issue you’re having. Many results will come from W3C and StackOverflow, which are both great resources for troubleshooting web design issues.

Reply to me and/or Allie if you have any questions. See you at the next Em Tech workshop!

Best,
Robin

P.S. Here’s what happens when you don’t close your HTML tags properly…