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.
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?”
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 theFCC 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.
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.
PHOTOWALK WITH GOOGLE LOCAL GUIDES :
An initiative of Collab House and Local guides of Hyderabad has enabled the photographers and culture enthusiasts to capture the beauties of ‘Golconda Fort’ and present them to the world. A photowalk was well planned and organised on account of ‘Google Local Guides day’ on 18th of June.
Local Guides is a global community of explorers sharing their discoveries on Google Maps. Helping others find the best spots in town, make new friends, and unlock exclusive benefits along the way.
Google hosts exclusive events in cities with the most active contributors, and there are casual meet-ups everyone can attend as well. Anyone can organize a meetup on thier own. It’s a chance to meet, mingle, and discover the newest cultural offerings in the community.
Showing off what our city has to offer the world, Finding a quintessential skyline, a breathtaking panorama, or a spectacular sunset and capture the moment with a camera or phone is the main objective of this photo walk. Many people photograph the exterior of structures but far fewer people have seen the inside. Whether it’s intricate detailing, lofty ceilings, or famous artwork, this lies as a chance to share interior shots of Golconda Fort with the world.
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.
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.ho 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.
Collab House is a hub for startups and related activities. Every weekend, we host prominent personalities and open communities to engage people from startup community of Hyderabad. Startup Grind is one such global initiative and Collab House is the hosting partner of Hyderabad chapter for Startup Grind.
Startup Grind is an event series and website designed to help educate, inspire, and connect local entrepreneurs. Each month we welcome an amazing speaker who shares their story with our community and tells us what worked, what didn’t, and what they’ll do differently next time. It’s an amazing opportunity to learn from the best, network with other members of the startup community, and improve your chances of entrepreneurial success.
Chennapanaidu Darapaneni, a serial entrepreneur and the Founder and CEO ofMeraEvents.com, the online event listing, promotions and ticketing portal that revolutionized the event industry by effectively bridging the gap between the event organizers and attendees. Several products like MeraEvents, MoozUp, EasyTag, Digibroc, and Planica, which are operating under the umbrella of Versant Online Solutions, are also the brainchild of Naidu Darapaneni.
With over 18 years of experience in the IT industry on various capacities Chennapanaidu Darapaneni and has always emphasized on finding the right and innovation solution for all the problems and create a win-win situation for everyone he is associated with.
Naidu started his career as a Software Engineer who worked in various roles in various technologies in India and abroad before exploring his opportunities as an entrepreneur with the Versant Technologies Inc. in year 2000 in USA, which subsequently expanded its operations in India in 2004.
“A person who sees an opportunity in a problem is someone who can come up with innovative solutions and achieve success,” is the secret motto that has driven Naidu. He found a gap in the event space and was determined to fill the same with the bouquet of MeraEvents. The journey has been eventful. He hived off Versant Technologies. Before hanging up his boots in the hardcore technology realm, he bootstrapped another venture, Versant Online Solutions, the mother of MeraEvents, which has several other sibling products.
Branding, hiring and funding are the three fundamental areas he handles in his venture. Under his stewardship, MeraEvents began making rapid strides into its upward journey with big-ticket deals in its kitty. From accounting to auditing, and from technology to ticket sale, Naidu Darapaneni is Jack of all trades. He is trying to be Master of all too. Currently member in HYSEA, TiE Hyderabad, NASSCOM etc., has inspired many budding entrepreneurs and encourages intrapreneurs within the organization.
Naidu Darapaneni has inspired everyone in the hall with his success story with every venture that he has taken up and the obstacles that he has dodged and tackled on his way to success. There was a networking session among all the attendees after the talk.