Workshop: Working with HTML/CSS, 3/23/11

Last night between 5:30 and 7, we did another HTML/CSS workshop at the J-School. Twelve people showed up, which was much better than the six or so we expected. The participants were mostly from Interactive 2 although there were a few from other programs who had never touched CSS. Overall, I think the workshop went quite well even though I don’t feel we hit our stated goals and deviated a lot from the written agenda. I’ll review the process and the session notes are at the bottom.

We started planning the workshop a few weeks ago, before I went off on vacation. Originally it was scheduled for March 16th, but was moved back after we realized it conflicted with the Interactive 2 Flash assignment. The 23rd was less than ideal because it’s right in the middle of midterms. As such, the showing was quite good.

Rosaleen put together the agenda, scheduled the room, and created the pre- and post-workshop surveys. I thought all of this came together well, and the exercises she established seemed useful. We only started on one during the workshop however.

The most significant issue was that the conceptual and practical review of HTML and CSS took a lot longer than I expected. All of the Interactive 2 students have had an introduction to this by now, but most were unable to explain back to me what they learned. I ended up spending 40 minutes on this review, at the end of which I felt most understood what they needed.

After the review, we started on the first example. It tangented into how to use Firebug, find attributes, and apply those changes with the Edit CSS functionality. This took 20 minutes or so.

We finished the workshop with Q&A with some of their sites.

Quality of note taking on the Google Doc was as expected during the review, but really dropped off afterwards.

To retain the concepts they’ve learned, I really think they need practical experience as soon as possible.  The suggestion I gave them was to do a custom design for their resume page so that it stands alone from the rest of their website. Using CSS specific to the resume page, they can have the rest of the website continue to look as it does but have a completely custom design for their resume. We could sponsor a design competition to see how far they take it.

Lastly, I wish I’ve had each student list off their three actionable takeaways at the very end to see whether we had achieved the stated goal. This would be useful data to capture and reference at a later date.

Including this blog post, the tech team spent about four hours planning and executing the workshop. Our next step is most likely to hold an open work session next Wednesday evening

Notes

Introduction (5 minutes)

Photo of the attendees

Announcement:

  • You should write all over the Google Doc. It will help you in the future when you’re trying to remember what we covered

Questions:

  • How many people know what HTML or CSS?
  • How many people have used Firebug?
    • 4 or 5 have not
  • How many people have used the Edit CSS plugin?
  • How many people have written an h3 before?
  • How many people have changed the color of links or written other CSS?

Announcement:

  • If you’ve never used Firebug or the Edit CSS plugin before, you should sit next to someone who has.

Goals:

  • Everyone should have three actionable takeaways from this workshop. If you aren’t there at the end, you should ask questions in the Q&A

How to: HTML/CSS and Firebug Review (10 minutes)

What are HTML/CSS?

  • HTML
    • Stands for: hypertext markup language
    • Definition: structure to the page
    • Examples:
      • <a> (hyperlink)
      • <h1> <h2> (headline 1 – headline 6: largest to smallest in font)
      • <i> (italics) or <b> (bold) ——> OLD SCHOOL
      • <em> (emphasis) + <strong> (bold/strong) — New School
        • unordered list – for navigation w/ bullets (use CSS to remove the bullets)
    • Attributes: href, class, id
  • CSS
    • Stands for: cascading style sheets
    • Definition: Style and design of the website
    • Examples:
      • Rules
      • Properties:
        • padding (moving around) ex -> padding: 2px 7px;
        • text align (justified, center, etc.) ex -> text-align: center
        • font weight: ex -> font-weight: normal
        • letter-spacing (1.1px, 2px, -0.5px)
        • text-decoration: underline
        • display: none (to hide a CSS rule)
      • Value

Install & Open Firebug

How to search for HTML elements on a page with Firebug

  • “id” vs. “class”, and how those are represented in CSS

How to add changes to your site with Custom CSS WordPress plugin

HTML/CSS Exercises (20 minutes)

http://testing.journalism.cuny.edu/
LINKS

  • Identify the CSS properties for links on this page
  • Change the links color to GREEN
  • Remove/Add an UNDERLINE to the links on this page
  • Make links BOLD
  • Change the HOVER state color to YELLOW

HEADLINES

  • Identify the CSS properties for the posts headlines
  • Make all the letters on the post/page headline UPPERCASE
  • Increase the FONT SIZE of the post/page headline
  • Change the FONT FAMILY of the post/page headline to “Garamond, serif”

TEXT (paragraph)

  • Identify the CSS properties for the post text
  • Increase the LINE HEIGHT by 5 pixels

BACKGROUND

  • Identify the CSS properties for the BODY’s background
  • Change background COLOR to the same background color as the J-School’s site

IMAGES

  • Identify the CSS properties for the posts’ images
  • Style the images as those in http://gigaom.com/

CREATE TEXT BOX INSIDE A POST

  • Log into a website and create a new post (add text using http://www.lipsum.com/feed/html)
  • Working on the HTML editor add a box with a 3-item unordered list
  • Assign a class to the box
  • Style the box
  • Add 1 pixel BORDER in #cccccc
  • Change background of the box to #f2f1f1
  • Add 5-pixel PADDING and 10-pixel MARGIN on the LEFT, TOP & BOTTOM
  • Make the BULLETS of the list items SQUARES
  • FLOAT the entire box to the RIGHT

BREAK (5 minutes)

Making CSS changes to YOUR site (30 minutes)

Cesar Bustamante: How to use CSS

Patrick Clark: “resizing elements in my wordpress frame”

Kevin Sheehan: How to make a portfolio website better

Vincent Trivett: “how to find the classes and id’s for stuff that we constructed out of wordpress themes so we can tweak the style in css, customizing the theme a little more”

Kirsti Itameri: “how to customize wordpress themes/create your own theme

Q&A (10 minutes)

Author: Daniel Bachhuber

Proud father x2. Principal, Hand Built. Maintainer, WP-CLI.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s