Building an HTML/CSS Workshop

Organising New Learning Materials
101

I don’t really have a time to review it. there are still a lot of thing to close before the organization for tomorrow… someone else?

102

I just had a look at your slides. Good job!
Besides the comments I made, I couldn’t see any mistakes or faulty code…

103

Please don’t do that O_O That’s coding 101 on how to break things the day before a workshop

There have been a number of PRs I have taken in for this repo which have broken it which I have had to triage before or after merging.

Are you guys in desperate need of the German translations for tomorrow?

104

Hi there!

I see that there is only one Pull Request on GitHub now from Stefan.

I tried to see the most current code by using on the command line jekyll serve -w, but I have some “Liquid Exceptions” and problems with us-ascii encoding.

I think I am supposed to add some encoding to my Gemfile or set it in my environment locales, but I don’t see either a gemfile or an environment locale in this repo. :frowning:

106

I already added the Gemfile here

If you are working on windows doing this might help

You can read some info about setting your system’s locale here at least for linux

If you’re ever on IRC you can message me and I can try to help out with the encoding issues

107

Hi @matthew

Thanks so much for adding the Gemfile. I was a little confused because I thought it was only HTML and CSS in the repo, so I didn’t get how HTML and CSS could have a Gemfile.

I learned at the workshop with echo $LANG that I don’t have a language set in my bash terminal, and that I can set the encoding before executing jekyll serve -w because I had a lot of trouble between bashrc and bash terminals when setting up my rvm.

I am grateful for your linux locale link, however, because I found heaps of results when I googled but didn’t see anything authoritative, just individual use cases.

What channel are you on for IRC? Is there one for OTS? (I am mostly on freenode)

108

Hi everyone! We had a really great workshop on Saturday!

Thanks to @anaketa for writing the materials and doing the organizing, @Kaj for the intro talk, @matthew for Github reviewing and merging, and everyone for coaching (I can only mention 10 people in a post, sorry!). I really loved seeing the learners’ projects at the end and was grateful that we got coffee and food from our sponsor.

My very unscientific talk with some coaches makes me think that many don’t want to volunteer again in 3 weeks. And right now I am very busy with my new job.

So I think that the advanced CSS workshop will be on hold until I get less busy or we recruit someone else to organize this.

109

Hi everybody!!
Thank you again for coming and for the great work!
People were really satisfied and thank you a lot :slight_smile:

Here and on github you can find all the notes that we wrote during the workshop in order to improve it:

  • Add Html Comments right to the start of the workshop (people want to keep track of what they are doing)

  • Explain “path/to/your/file.css” Most people saved file in the same directory but tried to write the whole path anyway. (lot of people copied the whole folder path from your computer desktop i.e. “C:/Users/nameuser/Desktop/filename.html”)
    -Very beginning we need to explain how open a file, where to save, how to open the file in the browser.

  • Charset: Show them what it does. (for example umlaut without charset, show what’s the output and go on with the explanation)

  • In the css-section, when we explain how to style the image, link back to the html part(in case they jump thought the material)

  • Explain better the inspector tool. (Maybe later?). Lots people were confused from it.

  • FF inspector: Network part doesn’t work properly

  • Don’t call the div #page-title. People confuse it with actual title in the head.

  • Tell people to not click on the address bar and press enter, but rather refresh

  • People have problem to understand the fluid nature (width in %) of the portfolio template. < section > jumps below the < aside > when the browser window is to narrow

If you would add something else, feel free to do it (better in github.)

See you at the next event :wink:

1 Like
110

I should have explained more, yes you might have realised by now the surrounding language your environment was in, if it was only ascii or similar, might have caused ruby to only work in that encoding and not be able to deal with extra characters.

You should be able to export LANG=<locale>.<encoding> and export LANGUAGE=<locale> in .bashrc or .profile (whichever will be executed on bash long) and then ruby will work in a more flexible encoding that allows jekyll to parse the files properly.

Check out my post here, we’re in #OpenTechSchool in freenode.

I’ll see about trying to address the issues you guys have raised, good collation of feedback!

111

Hey! So the workshop was good?

I want to run it in Nairobi this week. Is it good enough for a very first workshop in a new chapter? Alternatively I could do JS beginners day 1 or Social Coding.

Would be nice to get some insights like how much time it takes and problems that could occur, although I read the above list of possible improvements. Sorry I’m so lazy to ask you for a summary but I’m traveling and we will do the workshop on very short notice. I would be very grateful for any support.

Cheers,
Martin

1 Like
112

Hi Martin. Yes the workshop was good, very good. I think is good for a first workshop but if you feel more comfortable to do it JS beginners since you already did, i think is more or less the same.

It take around 5/6 hours to do it. People started at 12 and finish at 5.30 more or less. There are some concept that took longer to understood for the learners (like the box model or the %).

We wrote a long list to improvements but the real important improvement if you want to run right now another of this workshop in my opinion are:

  • Remember to explain at the beginning - How to open your text editor, where to save your files and how to link your css (literally how is written down) in the index - How to open your file in your browser.

  • Explain comment

  • Explain how to open the inspector and check and change css.

These are all stuff that you can explain after your presentation, before start.
If you have still some question, just tell me :slight_smile:

113

Thanks a lot! We decided to go start with the JS workshop but it really great to know we have a proper HTML/CSS thing now!

114

Hey,
sorry for the late feedback. Finally got some time. First of: Thanks for the great workshop. I think people really enjoyed it and some of them got awesome projects started. Especially liked the backpacker-yelp :smile:
I got many questions about JavaScript and when we will do the next workshop. I know we all are really busy, but the last JS-workshop worked really well. There weren’t that many issues (as far as I know). So my question now: It should be “too” hard to organize one again, right? What about a christmas edition as an early gift?

So far,
Have a nice weekend

115

Set my encoding in my terminal but am having trouble serving jekyll. Is there a good jekyll tutorial for beginners?

116

Hey Bettina, I saw your message on IRC, it came at 7 in the morning for me but I hadn’t checked on my computer that early yet :slight_smile:

For most of the Jekyll workshops we run through Github, they are hosted in a sub-path on github.

i.e, the html-css tutorial is hosted at http://opentechschool.github.io/html-css-beginners/ so the subpath would be /html-css-beginners/. Jekyll needs to know about this for it to work correctly on github; it is set here.

The same applies when you use Jekyll locally, it will serve the workshop under that subpath following that setting. So the address you need to visit would be http://localhost:4000/html-css-beginners/.

Alternatively, you can override the setting on the command line locally if you’d like, by using jekyll serve -w --baseurl '' and that way you could view it just at http://localhost:4000.

117

Hi Matthew,

Just wanted to say thank you…I finally got around to coding again but have forgotten everything CSS already :frowning:

See you around on freenode :slight_smile:

118

Hello everybody!!
is as been some times from our last html/css workshop, I hope you are all well and willing to spread some Html/css love again! :slight_smile:
because we are organizing a Html/css and Ruby workshop in collaboration with RailsGirls for middle of march and looking for coaches!
Here all the details:

I hope to see many of you there again :smile:
(Replay to that post if you are interested)

119

Just wanted to note on discourse that I’m trying to move this workshop over to sphinx currently, so it can be much more easily translated.

You can see (or help with!) the work at the sphinx branch on the repo.

1 Like