Building an HTML/CSS Workshop


(Benjamin Kampmann) #1

Hey everyone,

so after last weeks HTML/CSS workshop with the railsgirls I think we have a pretty good idea now, what we could/should/would do for an HTML/CSS-Workshop for OTS, no? How about we get started here discussing the structure, content and maybe reference material?

I would suggest going the usual way of having highly explanatory material that everyone can work through on their own instead of the talk at the beginning as that kinda made it hard for some to follow. But I would suggest making a rather short one, talking about the basics of some HTML and CSS but be even more ignorant than we’ve been on the workshop - typing the default template from a whiteboard doesn’t really help you understand things. But after that make a break and head for the project-groups, as people seem to come with something in mind they’d like to do. Any thoughts?

//cc @xMartin, @staeff, @anaketa


A look back on 2013
(giorgia) #2

Ehy Ben! You took the words right out of my mouth !
I was also about to write who is in to make this workshop. Actually, after friday my head was full of though (and questions from learners that i don’t want to forget) so i already start to create something for this workshop.
I can maybe put online write here the structure that i think is good to follow and everybody can suggest what they think is better.
I also believe we have to create a material that people follow by their own. When i start to write the material i did following the Js workshop.
Project-groups can be an idea but i was thinking also to give a general goal like create a easy personal portfolio page.
So everybody later on can edit, improve and use for sure.
Make a groups is harder and i’m afraid we lose the focus and achieve not too much at the end of the workshop. But maybe is just my idea.

About the talk at the beginning…mhmm i wasn’t really sure if we should do it or we can just write an introduction at the beginning of the material, but now i think is not a big difference so we can do what we want as long as it’s a short introduction.
People are hungry to do stuff by their self :slight_smile:


(Ola Gasidlo) #3

Hey!

Just wanted you to know, that I’m working on a HTML5 / CSS3 Workshop, so we could team up or something? :slight_smile:


(Benjamin Kampmann) #4

@Ola, @anaketa , it’s great that you both already started. Maybe you could share what you already got and collaborate on it online? Either with a google-doc or - as this can directly export to Markdown - with an etherpad? I created one here, if you feel like using that.

Let me know if there is anything I can help with.

Best
ben


(giorgia) #5

Hi @Ola! Yes sure we can team up. Are working on Html5/css3 workshop for Ots or something else/in general?
Because i already have a html5/css3 workshop ready (i mean, needs some review but the most is done) since one year ago we ran this workshop at CampusParty.
Maybe you are interest to see it…
I didn’t take that one for this workshop because it was a bit advanced, i mean not so much but there is no basic explaned.
Anyway i totally believe we have to put a bit of Html5 in the new workshop as well. (and probably something really basic from css3 - no animation or transform i mean).


(Ola Gasidlo) #6

Hi @anaketa & @ben!

I did this workshop several months ago with newbees. The JS / jQuery Stuff was too much for them. At least for one day. It’s not an hand-on workshop. That’s what i wanted to fix. But i hope, it’s a nice overlook.

Slides:

App:
http://antilab.net/html5workshop/


(Ola Gasidlo) #7

SRC:
http://antilab.net/html5workshop.rar

//Sorry, can just post 2 links while i’m a new user.


(Benjamin Kampmann) #8

Sorry about that. Changed your status to “regular user”, shouldn’t be a problem any longer.


(giorgia) #9

Ehy @Ola i looked your stuff, even if they are in german :slight_smile: seems to me really good explaned.
Is really too much “a talk” (not hands-on) but can help us a lot with the explanation/information part.
We would like to keep just hmlt/css workshop, without Js in order to keep it simple (and also we already have a Js workshop :slight_smile: ) so also the app is not really fit in the workshop (or did you do everything with Html5? )
Anyway i think for learners can be more interesting bring back home a Personal Portfolio page instead than an app. But maybe i’m wrong.
Also from the RailsGirls Html/css workshop experience i think that app can be a bit too much in one day.
But definitely your help is really appreciated! :slight_smile:


(giorgia) #10

@ben how can i saved in this openetherpad doc? When i clicked on the star sign it said me that the current version are already saved, but later when i reload, my work isn’t saved. :frowning:


(Benjamin Kampmann) #11

@anaketa, Well, it is supposed to work like google-docs and automatically save the current state. But it looks like openetherpad is broken and doesn’t work. Sorry about that …


(giorgia) #12

No problem at all!
I will use google doc (and we can try maybe later with openetherpad, seems nice).
You can find it here:
https://docs.google.com/a/opentechschool.org/document/d/1kcEI6gAoDccHfwQCV7ldCO6lPPzAkej97biSdkmWWWE/edit?usp=sharing

Feedback open!! :slight_smile:


(Ola Gasidlo) #13

Hey there!
I’m in my exams. That’s why i’m bit slow with the replies. Sorry for that!

@ben: Thanks!

@anaketa Thanks for sharing! It looks good. I wrote some comments on that.
I like the idea of the personal portfolio. This is what we do with our kids, too and they love it!

The App we’ve build was in HTML5, CSS3 and jQuery. So, i think, this will be too much for one workshop. But i hope, my presentation helps a bit. :slight_smile:

For me, it is really important that the learners get how crucial it is to seperate style from structure and that this & also the new elements for semantics are one of the biggest features of HTML5. If you need any help with that, have some free time until next week. Just ping me!


(bettina) #14

Hi there,

I missed out on the intro workshop to CSS and HTML as part of TOA, but I’d like to organize an advanced beginner CSS workshop to build on what you’ve already taught in the beginner workshop.

What’s an advanced beginner?

Someone who already knows

  • the difference between CSS and HTML
  • how to change color, font style, font size in CSS
  • about Twitter Bootstrap
  • basic syntax for CSS

Someone who wants to learn

  • how to use the box model for mobile-first design
  • how to use transitions with position changes
  • how to calculate elastic
    sizes
  • how to know when to use Twitter Bootstrap / HTML5 Boilerplate
    / other frameworks
  • semantic HTML

I think the workshop would be just 4-5 hours on a weekend afternoon, so we obviously can’t cover all of those topics–maybe just one in real depth. (My preference would be how to use transitions with position changes so that it feels like you’re opening presents with your mouse clicks.)

Opinions and feedback on the workshop topics very much welcome.

I know that Bastian would like to coach–anyone else?

I will email co.up and ask for some open weekend afternoons and put that into a doodle, so that potential coaches can decide on a date that works best for them after which we can then find learners.


(bettina) #15

Hi again,

so I got in touch with Aleks and the following four Sunday afternoons at co.up are open for the workshop: http://www.doodle.com/vem4vwdt32kmwpyw

Coaches, please let me know by next Thursday which Sundays work for you. After we decide on the time, I can find other learners and do any other organization we need to make this happen.

Thanks!
Bettina


(Ola Gasidlo) #16

Hi @bettina!

I like the idea of an adv. css workshop. i can’t make it to berlin, but how about to add “object-oriented”-css to the list?
If you need any help with that, just ping me. :sunny:


(bettina) #17

Hi @ola !

Too bad you can’t come. I really enjoyed your slides.

Sure, I don’t know what object-oriented CSS is, but I’m sure I can learn.

A side note: I’d also like to learn functional programming. I thought by learning JS I was learning functional programming but I just learned that it is not automatically functional ???

See you soon in Berlin, I hope!
Bettina


(Ola Gasidlo) #18

@bettina:
It’s great, you’ve enjoyed them! :slight_smile:

I really love the concept of oo-css and it helped me a lot at the beginning:
OO-CSS: https://github.com/stubbornella/oocss/wiki

Functional programming:
Yeah, you’re right. Programming functions and functional programming isn’t the same.
It’s about how you use the functions in you script.
This might help: http://eloquentjavascript.net/chapter6.html

Best!
Ola


(bettina) #19

Hi @Ola,

Thanks for pointing to great resources!

I’m not sure if I really get OO-CSS. Her slides are more helpful than her code for me, since I’m a CSS beginner: http://www.slideshare.net/stubbornella/object-oriented-css/57
Plus, I need to see things to understand them, and the OO-CSS’ed site is not to be found.

Anyways, do let me know when you’re in Berlin. I would like to meet you.

Enjoy your Monday!
Bettina


(bettina) #20

Advanced Beginner CSS coaching Doodle deadline moved to TOMORROW

Hi there,

Since CSS coaches probably need time to organize the content and I need time to publicize the workshop and get learners to sign up, I’m moving the deadline for the Doodle to TOMORROW: http://doodle.com/vem4vwdt32kmwpyw

If you don’t know your schedule yet, you can still sign up to be a coach / write workshop content later. The doodle is just to figure out the best day for the workshop.

Also, should I also be posting this call for CSS coaches on the general OTS mailing list?

Thanks, and enjoy your Monday!
Bettina