GDI Vegas had our very first Webflow 101 Workshop this past Saturday and it was a great success! It was a full house of students, from beginners to those already familiar with creating websites. In the workshop, I covered how to build your first portfolio site using the tools in the Webflow platform. It was a workshop I wanted to teach for some months now and it’s great to finally have been able to do so. Since there was no previous curriculum created for the Webflow platform, I had to spend time creating the curriculum, slides, and sample exercises that were used throughout the class.

 

  

The workshop was split into four parts: an Introduction to Webflow and why responsive design is so important for your website, Intro to the HTML structure tools and box model layout, Intro to the Styles Panel and making design-related changes, and finally, Interactions 2.0 and how to effectively use animations in your web design without overdoing it. Overall, I felt like this was a wonderful, comprehensive understanding about Webflow and ultimately, if it can be used to achieve what each student had in mind for their own web development project. So, students came in with an open mind and ready to learn what this powerful platform is capable of!

It was great to see how some students were amazed about how they can easily achieve things on their webpage without any code. For instance, one student that comes to mind is Alice, who I have seen in previous workshops for Intro to HTML/CSS and has shown a lot of determination in creating a site for her scrapbooking/artwork that she vlogs about. She had first explained to me that she wanted to achieve a feature on her webpage that I didn’t quite understand at first. I had suggested she sketch it out, so I can visually see it and understand it a bit better, in which she shortly did after. What she wanted to achieve was a Lightbox feature gallery effect, which is something that comes with the default Portfolio Wireframe template. I guided her through how to use the Lightbox element and her reaction was priceless. She was so grateful to have now learned how to upload photos to her website and display them in the way she wanted it. With excitement and a smile, she told me, “I’m going to have a lot of fun playing around with this.”

 

Overall, the whole goal of the workshop was to get students familiar with the tools available to them, how to structure their website in the proper way with today’s web standards, and leave with further resources for continued education. If a student came and left with the confidence to be able to then look for help on future problems with Webflow, then my job was done! As we all know, it’s nearly impossible to say you can master something in just a day’s worth of training. However, if you get a comprehensive view of the language, tool or platform that you are learning and know what direction to go from there, then it is totally worth the time to learn and invest in such a workshop. Although there are tons of tutorials out there on YouTube and the web to get started, nothing is better than to have an actual mentor and teacher go through the ropes and show you the essentials. It’s easy to get over-whelmed and lost out there, trying to put the puzzle pieces together.

 

  

I intend to continue to teach more Webflow workshops with GDI in the future and refine the curriculum with additional slides and exercises. There are definatley some areas that I would have like to spend some more time in the Designer View and provide more exercises and keyboard shortcuts for (in particular, the padding/margin box model). As well as explain how using a certain element block in the Element Panel outputs code a certain way, and how the CSS get’s outputted in the Styles Panel. That will help students understand how the visual change in their Canvas relates to manual HTML or CSS code. All I know is that after 1 year of using Webflow, I am still learning so much from what the platform is capable of and being able to continually teach that helps me out so much more in retaining that.

Want to learn more about  Webflow? Sign up for a free account here to get started!

 

Connect With Me:

Website: http://www.sylviamaguina.com

Twitter: https://twitter.com/SMag23

JOIN OUR NEWSLETTER
Sign up today for free and be the first to get notified on new front-end dev tutorials, hacks n' more.
We hate spam just like you. Your email address will not be sold or shared with anyone.