Code & Design Workshop recap

Code & Design Workshop recap

Developer Circles from Facebook is a program designed to create locally organized communities for developers. These communities are meant to educate and provide a forum for discussion and knowledge sharing around topics that are top-of-mind for developers in a particular market.

The Code and Design Workshop

On Saturday, February 29th, 2020, we held our first workshop in 2020 from 10:00 AM till 4:00 PM. We called it The Code and Design workshop. The workshop was designed to celebrate international women's day ahead of time and also create an avenue for women to learn through hands-on coding and designing sessions. Thereby helping them kick start their coding or design career in 2020.

CALEB JOHNSON_57.JPG

How did it go?

With an attendance of 65 people, we had a five hours-long workshop and one speaking session. After the first speaker facilitated the Diversity Exercise, there was a breakout session for attendees to move over to different halls for each workshop. The Workshop was divided into different sessions which touched a few areas in Technology which featured amazing speakers who covered the essential aspects of HTML/CSS, React, Spark AR, UI/UX, and Graphics Design. An overview of each session will be shared later in the article.

Diversity Exercise

CALEB JOHNSON_12.JPG

Edidiong facilitated an exercise on Diversity aimed at encouraging conversations in the community to learn about people beyond what is seen and foster inclusivity. It was an interactive session that allowed attendees to have interesting conversations with each other and get to meet new people.

Graphics Design

Esther James facilitated a workshop on Design Process. She defined the steps that had to be taken while solving a design problem to get a solution. According to Esther, there are seven stages of the design process: Define, Research, Ideate, Prototype, Select, Implement and Learn. Following this process, the attendees used human problems to explain how they could use these design processes to solve certain problems.

CALEB JOHNSON_61.JPG

A case study was set out: "Faith was given a school project. To solve this, she has to define it, research on how to solve it, ideate on what to do next, have a rough estimate which is the prototype stage. She should be able to select what she wants, implement the idea and finally get the results to know if the solution worked."

WhatsApp Image 2020-03-03 at 5.47.03 PM.jpeg

The attendees worked on a brand project using a pencil and paper following the seven stages of the design process. Everyone participated in the process and completed it with smiles.

HTML and CSS

The attendees who attended the HTML/CSS session were first enlightened on how they should structure their folders and files in a text editor and were eventually introduced to HTML tags, their uses, styling, usage, and manipulation by the speaker Nkechi Emmanuel. At the end of the session, they were able to create a navbar of a landing page that had external links, a cross-section of images and also understood how to structure web pages and help search engine optimization.

CALEB JOHNSON_55.JPG

React

This session was led by Jeff Ogah and he started by doing a quick introduction of Javascript and the React framework. Then got right into teaching the attendees how to set up their local environment and start a react project using create-react-app (CRA). The attendees went further to explore the directories and files created by CRA and their uses. The difference between Class and functional components. An overview of state and props as well as how to pass data as props between components.

CALEB JOHNSON_62.JPG

Finally, they learned how to use setState to update the state, understand why the state should not be mutated directly and how to handle events in React. At the end of the session, they were able to build a simple web app that showcased a button that displays the number of times it has been clicked.

UI/UX

The UI/UX session was led by Precious Chika and she sensitized the attendees about the meaning of UI/UX. Their differences, similarities and essential principles. The attendees were able to design a signup page, landing page and login page on their own.

CALEB JOHNSON_71.JPG

AR/VR

CALEB JOHNSON_34.JPG

This workshop was led by Aniebiet Onoyom and she introduced Virtual Reality using Unity software and gave them practical experiences by letting them use the VR headsets to play a game demo. She shared the software to all the attendees but most of them were not able to successfully install it because of bad connectivity. The attendees were able to install the software and build a sample project.

All photos from the event can be found here:

Highlights and Attendee Feedbacks

The HTML and CSS class was epic and I love the way the facilitator taught us like she actually knew what she was doing. I was really happy at the end of the day. I must say it was one of the best workshops I have ever attended.  -  Precious.

We were divided into different classes and I attended the AR/VR class. Virtual reality is a simulated experiment that can be similar to the real world. Our facilitator, Aniebiet Onoyom introduced us to the VR gaming equipment and we got to use them. We used the oculus headset to see realistic images, hear sounds and perceive other sensations that simulate a user's physical presence in a virtual environment. We were able to look around the artificial world, move around and interact with virtual features and items. We also created a simple gaming environment using unity. I really enjoyed the code and design workshop. The facilitator was really patient and made sure we understood what we were doing. We did not just learn, we had a nice lunch too. I hope that more workshops like this will be created in the future.  - Janet

It was a good experience. I learned a lot and was motivated to do more. I am new to tech and this is a great start for me. I've gone back to my drawing table to learn more to build better skills. Thanks to the organizers who made this possible and to Facebook for creating a community connecting people and helping them to get to their required destinations. - Vera

We were introduced to the concept of UI/UX design, the principles of design, which includes: balance, contrast, emphasis, white space, etc. we were introduced to the user interface design processes which include, amongst others: design thinking, user research, wireframing, prototyping. Furthermore, our facilitator introduced the different tools used for UI/UX design like FIGMA, AdobeXD. The highlight of the workshop for me was when we had a hands-on practical session where we collaboratively designed some screens using Figma. I had an awesome experience.  -  Chi Basil

The session was not just educative but interactive as participants elaborated on the points presented by the instructor. My take-home is; anybody can create a design only if he or she can answer the questions; Why is the design necessary? What is the design all about? To whom is the design for? How will the design be made? Where should there be adjustments? -  Goodness

TL;DR

Thanks to everyone who contributed to the success of this event: Developer Circles from Facebook, our amazing speakers, volunteers, and everyone who attended the event.

Join Facebook Developer Circle: Uyo today to collaborate, learn, and code with other local developers today.