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