On Saturday, I ran a workshop for codebar students who would like to build their own portfolio or blog website. It was my first time organising and running a workshop, so it was challenging, but I loved every minute. I also learnt a lot from it.
Why did I hold the workshop?
We ran a feedback session a while ago on codebar Brighton's second birthday and lots of students told us that they would like to hear more about what they can do to help them gain industry experience. My response was this: In order to secure internships and jobs in the web industry, you need to have your own website. You can use it to record everything you know about web development and then you'll have a fantastic record of your learning journey. If you blog about the things you learn, it becomes a useful resource to refer to when you need reminding of how to do something. It's also a great way to show potential employers what you know.
I decided to run a workshop to give students the opportunity to create their own portfolio or blog website. I also wanted to show codebar students how we approach responsive web design and development at work to prepare them for working in the industry.
The day
Doors opened at 09:45 and I couldn't believe how many people turned up considering it was a Saturday and the weather was good! 24 students came and many were registered at the London branch of codebar, so they had travelled all the way down for the workshop. Suddenly, I felt a little nervous—no pressure!
What we did in the workshop
I wanted the key takeaway from this workshop to be how we approach responsive web development, whilst building a portfolio/blog website that students can take away and use as their own website. I broke each step of the process down into sections for the day with timings to help me structure it. I began each section by explaining what we were doing and then I provided workshop materials with code examples online so that everyone could work at their own pace.
10:20-11:00 Content first
Tasks:
- Download the skeleton HMTL and CSS files provided
- Either use the example content in the Google doc provided or add your own content to the HTML file.
- Test the site in a browser and check that the order of the content looks right.
11:00-12:30 Small screen styles
Tasks:
- Make the browser width as small as a mobile device and keep it that size until all of the small screen styles have been added.
- Add a link to google fonts in the part of the HTML file.
- In styles.css work on global styles first (p, headings, fonts, links, hover states) and then style the components.
- Make use of indentation and comments to make the code readable by your future selves and others.
1:30-3:30 Media queries grids
Tasks:
- Add grid classes to the HTML file.
- Add media queries starting with the smallest size and work upwards.
- Keep grid styles in separate classes to component classes for reusability.
What went well
I think I guessed the timings well. They were a guess but it worked out well to save media queries and grids for after lunch because they were the most challenging parts. It was good to have a break before tackling those.
Tutors! Without the help of five tutors I would have been even busier. Huge thanks to Jeremy, Rosa, Dot, Ryan and Tommy for giving up their Saturdays to help out. The students asked plenty of questions, which was great and kept us all very busy.
I almost didn't write up any resources for the workshop because I planned to talk through more of it, but I'm so pleased I did. There was quite a variety in HTML and CSS knowledge, so it was really helpful that students could refer to a website and work through it at their own pace.
Asking students to help each other out was a brilliant idea. With great timing Paul shared an article with me by Phil Gyford and his experience of teaching web development. He made a really good point about getting students to help each other fix each other's bugs, so I thought I'd try this too. I highly recommend it. I began the day by explaining that it's completely normal to get stuck in web development; there will always be new things to learn and bugs to fix, so we often help each other out. I asked everyone to go round and introduce themselves at the start so we knew the people around us.
I took a couple of moments during the day to stop and take in the atmosphere. Seeing so much collaboration—tutors sharing what they know and students discussing each other's work—was very humbling. The buzzing of conversation coupled with some good background music made a fantastic vibe for the day.
What I would change next time
The jump between small screen styles and grids seemed to a little big for a few people. I made an assumption on a minimum level of knowledge amongst the students, which I wasn't completely accurate about, so I don't think I was prepared enough for the range in ability. Next time, I will not assume a particular level of knowledge unless I make it clear in the workshop description that it requires a specific set of skills.
Attempting to teach things you've known for a while makes you realise how much you don't really know. It's easy to take knowledge for granted, so next time I will aim to be better prepared for explaining things I've taken for granted. On the other hand, I don't think there's anything wrong with telling students to look up the answers up online. As developers we all turn to the help of the internet and books.
Finally, a huge thanks to Jeremy, Rosa, Dot and Ryan for their help leading up to the event, for coming in early, leaving late and generally helping the day go smoothly. Thanks to Jeremy for being an excellent content buddy and looking over my workshop materials. Thanks to 68 Middle Street and Clearleft for sponsoring drinks and snacks and letting me use the space in order to provide a free workshop. Thanks to the students for bearing with me at my first ever workshop. A fun day and a great team effort all round.
This was originally posted on my own site.
