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
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...
