Freecode Camp 3rd Meetup.

FreeCodeCamp Hyderabad, a local developer community started not even a month ago, just had their 4th meet-up in the city at everyone’s favorite maker space, Collab House. The community is mentored by three passionate developers  – Kapil, Ramana and Arijit.

11201154_10206188748578853_1436319131087483454_o.jpg

For this meetup, Ramana, who works as a web developer, taught the members of the community the fundamentals of web layout. The session covered concepts like how the browser treats the structure of any webpage, and how by understanding its inner workings we can break down complex layouts into a simple binary question of – “Is it aligned vertically or horizontally?”

This discussion was not about teaching the syntax of HTML/CSS or JavaScript. It was to convey the abstract ideas built into the fabric of the web. To be a web developer, one needs to take these baby steps. A web developer, at the very least, needs to understand how their code interacts with the browser.

IMG_0036.JPG

The session started off with a simple idea conceptualised thousands of years ago, called Divide and Conquer. This idea is so primitive yet powerful, that we can lay the foundation with it. We may think of it as a basic strategy for solving any real/virtual world problem.
The crux of the idea is simple, to be able to solve a complex problem, you need to divide it into subproblems. Divide it to the point of absolute simplicity, where you can understand the process from the fundamental level and then conquer it.

To apply this simple concept to writing good code, one needs to ask a few questions -:

  • What are the inputs to my program?
  • What outputs are we expecting?   
  • What logic goes in between to take the given input and convert it to the expected output?

From here, we move to understanding the fundamentals of CSS layouts.

You might be wondering now that how  CSS can have inputs and outputs?

And that is a good question. Well, no need to worry! Input and Output in this context refers to our target design. The UI Mockup or Wireframe you have been provided in a Photoshop PSD file. Or a random site whose layout you are trying to copy (nothing to be ashamed of! Mimicry is the highest display of respect).

Ramana pointed out to some sample sites such as OMGUbuntu, Wikipedia and even the FCC random quote generator project. Our output was going to be the UI base layout of these sites. Basically, creating the containers which hosts the data and images displayed on these sites. We started by asking the same basic question, is our input (sample site) aligned vertically or horizontally? We restricted ourselves to two placement algorithms – display block and display flex.

13498141_1156548974395725_8064470873990187197_o

By default, display block aligns elements vertically (one on top of another) and display flex horizontally (right next to each other). By using these two algorithms, we start constructing our target layout from scratch. Ramana demonstrated the usage of uncommon background colors to get quick feedback on your design. If some placement of component within the layout was not as expected, the feedback was clear about where we went wrong. The background color highlights the component. After a two hour refresher on this layout, we moved on to using simple jQuery to display data in a table format. Here’s the best part – we didn’t use any table component! We carry forwarded our learning from layouts – that one can implement any layout reliably using only the first principles.

It was a simple table layout to display some info about a group of people. Any data table would have the desirable property to be able to sort in order when one clicks on a table column header. When you view your email in Outlook or Thunderbird, you probably sort your mails by subject or sender or date. We implemented that with jQuery. The rendering logic and sorting logic to achieve this again followed the first principle – divide the main problem to a set of simpler subproblems that can be individually solved, and composed together to get a complete, end-to-end solution.

The session ended with a deeper dive into all things flexbox. CSS tricks has a nice article on all things flexbox can do to align your content in different directions, add proper space within the components, stretch or shrink them etc.

“Informative and comprehensible approach towards layout in large. Ramana made sure that we learn new ways(read: flex) to structure elements on the page. Overall I feel these sessions should continue along with pair programming to increase the participant’s competency in the language.” – Rahul Nayak | FCC Hyd Member

Freecode Camp 3rd Meetup.

FreeCodeCamp Hyderabad.

Collab House is a place for connected communities and we have another cool community added to our hub. On 11th of May 2016, Collab House has hosted the first meetup of FreeCodeCamp-Hyderabad. A regional chapter of the global open-source programming learners community is going to host a meet-up on every weekend to teach and learn coding and programming to fellow community members.

IMG_0042.JPG

FreeCodeCamp is an open source community that helps people to learn to code. People can work through their self-paced coding challenges, build projects, and earn certifications. It connects with other learners in the city through meet-ups and gets you started with programming. Hundreds of people have gotten software engineering jobs after completing the coding challenges at FreeCodeCamps

FreeCodeCamp is not a direct coding bootcamp but a lot of coding bootcamps use Free Code Camp as part of their curriculum, though. The curriculum, nonprofit projects, and verified certifications are all free. They offer four free verified certifications: front end development, back end development, data visualisation, and full stack development.

Once the members finish the first three certifications, they’ll get to build a series of solutions for nonprofits. You’ll work in pairs, under the supervision of a volunteer project manager and a stakeholder from the nonprofit.

The community has done nearly a million dollars worth of pro-bono coding for nonprofits so far. You can pledge a monthly donation to a nonprofit of your choosing while you learn. It takes about 2,080 hours to earn all four of our certifications. This translates into one year of full-time coding. We’re completely self-paced though, so take as long as you need.

Many high school, college, and adult ed programs incorporate Free Code Camp into their coursework. FreeCodeCamp is an open source initiative, so no licenses or special permission from the team is necessary. They even building special tools for teachers.

Quincy started the FreeCodeCamp open source community in 2014. He is now just one of many active contributors. Quincy set up a company in California called Free Code Camp, Inc. to support the Free Code Camp community. It pays for servers and other expenses. It also sponsors Quincy, Berkeley, and Michael, who oversee infrastructure and nonprofit projects.

That was an amazing start to FreeCodeCamp at Hyderabad with the tech savvies attending the meet-up with utmost passion and eagerness to learn.

FreeCodeCamp Hyderabad.

CoderDojo steps in Hyderabad.

CoderDojo is a global movement of free, volunteer-led,  community based programming clubs for young people. At a Dojo, young people, learn how to code, develop websites, apps, programs, games and explore technology in an informal and creative environment, a social space where people can go to explore technology together and get advice and support from skilled mentors. In Dojos young people get the opportunity to make apps, websites, games, play with robotics and more. In addition to learning to code attendees meet like minded people and are exposed to the possibilities of technology.

“CoderDojo is about encouraging creativity and having fun in a relaxed, social environment.”

Within the CoderDojo Movement there is a focus on community, peer learning, youth mentoring and self led learning,  with an emphasis on showing how coding is a force for change in the world. The global CoderDojo community is supported by the CoderDojo Foundation. The CoderDojo Foundation consists of a core team based primarily in Dublin, Ireland. Founded by the co-founder of the very first CoderDojo James Whelton, the Foundation is focused on supporting new and existing Dojos through resource and community development while also scaling CoderDojo through partnerships and creating awareness globally.

coderdooj

The chapter of Codedojo in the city starts at Collab House. As people know Collab House as the hub of activities for open tech communities, we’ve double quoted our mission once again  by embracing one of the most prominent programming community globally, ‘CoderDojo’. The alignment of ideology between Coderdojo and Collab House is the most essential reason for starting this initiative. On our goal of creating the global hub of connected communities, now we have another member in our team.

The chapter or a regional community of Coderdojo is called a ‘Dojo’, there are more than 1000 Dojos world wide, spanning across 63 countries. Named as ‘Hyderabad@CollabHouse’, Coderdojo-Hyderabad would be having an event every 2nd and 4th Wednesday of the month. Young people from various backgrounds would be invited to learn about programming, electronics and robotics.

 

_MG_9251

On 1st of June 2016, Collab House hosted the first event of CoderDojo-Hyderabad. With the well planned agenda and strategic time frame, the event was super exciting for all the attendees. We’ve had a session on design thinking for prototyping an electronics project and then jumped off with building prototypes using Arduino. The session on Arduino programming was the most energetic with every student beaming with the entusiam to learn stuff and build cool projects.

Harsha is the organiser of this dojo and we have many exciting things under pipeline for the coming events of Coderdojo-Hyderabad.

CoderDojo steps in Hyderabad.

Hyderabad Web Technologies

The motto of the event is to teach the basics of programming on various platforms. It is not to make the attendees proficient in a language but making them self reliant on learning the languages independently.

The attendees were informed to bring their laptops for the hands on programming session.

Agenda of the day –

Understanding how the web works, understanding and exploring HTML5/CSS3 (one hour). This 1 hour gives you the skeleton of a webpage. It shows how the text and color of a webpage or website can be programmed.

Understanding JavaScript, solving easy programming challenges in JavaScript, Intro to Node.js (one hour). This session gives you the complete picture of the functionality of a website.

Q & A (30 mins), This cleared out doubts of the attendees to make them more clear about the concepts and enables them to dive deep.

Exploring Web Tools, Introduction to Git and GitHub (30 mins). Exploring github helps out a programmer in multiple ways.

Building personal portfolio website (Practice Session). A personal website or a blog is a tool to market oneself. Updating your blog timely is important in order to keep up with your peer group.

Post-session Q&A, future learning resources etc.

It was a fruitful session with wonderful outcome. Every attendee was more than satisfied with the knowledge that they have gained by being part of the workshop.

What?  A workshop On basics of Web Technologies by Learnup

Why?   To give a glimpse about web technologies to enthusiastic set of people

When?  4 October 2015

 

 

Hyderabad Web Technologies