Check back regularly as we showcase the coolest projects from Front-End Developer Scholarship students right here!

FEATURED GROUP PROJECT - Grow with Google Houston | Front-End

Houston Team Members: Frances C. (@Frances) | Erica L. (@Erica Lehotzky) | Kyle B. (@kylebrodeur) | Luis R. (@Lou) | Melanie V. (@Mel) | Omena A. (@Omena) | Ross K. (@Ross) | Sarah R. (@Sarah R.) | Yarriba C. “Yara” (@Yaretas), and Richard S. (@Richard Schott)

About the project: A group of us in the front-end track located near Houston started meeting up every week. During the first meeting, many people expressed interest in starting a group project for all of us to better learn the material and also learn beyond the course.

Between the ten of us, there were a lot of interests in addition to the course material. We took some of those interests: art, design, back-end type functionality using front-end, APIs, maps, and the human component, and combined them with the HTML, CSS, JavaScript, and jQuery skills that we learned from Udacity to create this website. HoustonGwG GitHub


Udacity: Can you tell me how the project started? Who came up with the idea for the website, how did the team come together, and how in the world did you find out that Frances was such an amazing artist?!

  • Richard: Discussions began during our earliest meetings. Originally, we conceived of two projects, one representing ourselves and second about local Superfund sites, the first becoming our focus due to time constraints. In early February we knew that we wanted to do an “introduction” and reflection. Everybody contributed ideas from their fields of expertise, including project management, business administration, artistic elements, hosting, and creating a data-based component. Early on, a project proposal was written defining the project’s objectives and methodology. We kept in touch from the beginning. If I recall, Frances discussed art early on, saying that she might try something. The amount of time she dedicated to producing the portrait and banner artwork was impressive. Erica, Lou, and Yara were fibres that held our group together. Ross had a lot of insight to agile project management. Yara and Lou did initial commits that got the ball rolling! Everybody made significant contributions.
  • Ross: Erica organized group meetings for study support etc. Myself, Frances and a few others pushed hard for group projects. Everyone was super onboard with it. We organized several lessons/lectures/workshops about agile methodology, project management tools like VSTS, and git. At some point, the group fell apart (dwindling participation) and Erica/Richard/Lou helped pull everyone back together.
  • Erica: We started having weekly meetups early into the course to work through the material, and it was clear everyone had interest in a Houston-group project. A few different ideas were tossed out but the ‘about-us’ project was one we were all behind and felt we could complete on time. I give big props to Yara, towards the end as things started looking like we may not get it up in time, she made some of the first commits! Once that was done, things moved pretty fast.
  • Yarriba: I want to start giving big props everyone, We got together and kept in contact from the beginning. Ross was a huge part of keeping the group focus and motivated, and through him we learn about project management. Erica was in charge of the meetings. Richard put his amazing research and writing skills to work. Sarah came with the idea of adding a map showing our locations, and Lou contributed with the functionality of out project. Frances artistic skills came towards the end, and gave our project the appealing looks we have today. Omena, Mel and the other contributed with the creation of their personal pages. Overall we were a team and we combined our skills to create something great.
  • Sarah: We discussed a group project at our very first meetup, so it was always a goal of ours to work on one after completing the course. It was a group consensus to make an About Us page, and we all contributed ideas for how it actually came together.


Udacity: What were some unexpected hurdles that you face in this project? How did you overcome them?

  • Richard: Scaling issues were an issue that Ross and I encountered while developing the initial product. We spent a lot of time talking about how to scale the navigation bar, text, and padding in order to have pages with viewable text on desktop and mobile browsers. Quality assurance checks were also important: the last day focused on completing pages and fixing bugs. After the deadline, Lou continued the work testing new layouts and toggles.
  • Ross: Working around people’s very busy schedules and their different levels of experience. We adjusted by putting together a lot of tutorials and simplifying our tools from complicated/super-involved ones (VSTS) to more friendly ones later on (GitHub).
  • Omena: The team used Github which was totally new to me as well. It was overwhelming at first because here I was learning HTML, then CSS, then JavaScript, then JQuery. At some point, I chose to opt out of the project because I felt so out of league with the rest. Erica found a way around it to ensure that I got my html document across. The meet ups gave me the opportunity to ask questions about things that we totally new to me, e.g, i asked to know what ‘commit’ meant and the team explained it and that became my introduction to Github. Frances offered to make out time to answer me questions and help me with projects I may find interesting. So, being part of a community meant I got more than Udacity had to offer and I got the encouragement I needed to pull through to the end.
  • Erica: Schedules (for me personally, juggling work, school, finishing the course and then the project). Ross taught us a bit about Agile Methodology early on, and GitHub was also new to a lot of us. It was also difficult that there was never a time we could all meet in person, so while we used a video chat there were occasional wifi/headset issues making it challenging to communicate.
  • Yarriba: Working around everybody’s schedule can be challenging, but we make it work. Time management was another issue in the group, coming from different backgrounds, we had to make sure that everybody was on a set level before we even consider to start with the project, and that took us more time than expected. Although we lost consistency at one point. We came together and in a matter of a week and half we made our project a reality.
  • Sarah: I think the most difficult part of this project was becoming familiar with GitHub and committing code while multiple people are working within the same branch. Let’s just say, I learned about the importance of fetching an origin the hard way.
  • Luis: Figuring out how I could best be a resource to the team was one of the main hurdles I encountered. I overall tried to approach the project as a facilitator initially. I realized that I was better able to contribute by taking the initiative in certain areas and communicating clearly.

Udacity: What were some pleasant surprises?

  • Richard: How well everything came together! I’m impressed by how I was ultimately able to do some troubleshooting and bug fixes.
  • Ross: How dedicated and motivated so many of the members were. The heart that people showed was constantly inspiring.
  • Erica: Getting to meet and work with other people in Houston, and that we were able to finish on time!
  • Yarriba: Camaraderie (Personally I felt very welcome and encouraged by my peers to keep learning).
  • Sarah: The best thing about this project was getting to learn from everybody, and meet new people who are motivated to learn development and collaborate on projects.
  • Luis: The biggest pleasant surprise is how well everyone got along and how welcome the group made me feel. An awesome sense of camaraderie and willingness to learn is in each and every member. That willingness leads to a richer environment. Another surprise is how well the project came together. With minimal direction and only a bit of additional information sessions/troubleshooting in meet ups, everyone grabbed a section of work and took to it. Building a cohesive project in the end.

Udacity: Is there anything you would have done differently?

  • Richard: If I had more time, I would have written a better narrative to share a better perspective of our personal experiences during the course. As is, the survey is very dry and academic. In retrospect, I should have utilized this experience to produce data visualisations, like features in Business Insider, The Economist, or The New York Times. Regarding the course itself--no, not at all.
  • Omena: Nothing at all. The community provided the right support for me to grow.
  • Ross: Simplified things from the beginning. We wanted to do 3 projects of increasing intensity, and also learn Agile methodology and follow best-practices project management and git structure/etc. Really for this phase, one simple project is really best for a team, with lots of support and camaraderie for the course material.
  • Erica: I would have pushed harder to finish the course earlier so I could focus more on the group project. And not be afraid to make some of those earlier commits just to get the ball rolling.
  • Yarriba: Not much at all, we learned from obstacle during this challenge, and we grew as developers. (Now we can call ourselves developers)
  • Sarah: I would have spent more time working on customizing the map.
  • Luis: I would have taken initiative in certain areas much sooner. Some additional pre-planning such as the creation of code and style guides early on would have simplified some of our processes. These additional actions would allow sitewide HTML and CSS standardization. Taking these steps would align us with industry best practices. Moving forward as a group I'm sure we'll be able to implement these ideas and much more.

Thank you for sharing your project with us today, #Houston!


FEATURED GROUP PROJECT - Show-Me Coders | Front-End

Show-Me Coders Team Members: Nick H. @Nick Hanes | Jim M. @Jim | Marcy B. @mawsay | Eric Z. @Z | Kyle G. @Kyle G

The Home screen is dynamically built from GitHub using it’s API V3

Udacity: How did the idea for this group project come about?

Show-Me Coders: We used the first few meetings of the Missouri Meetups group (formed as part of this program) to gather ideas and discuss them as a team. This idea came about as part of that collaboration and was chosen for these reasons:

      1. Provided a means for participants to work as a team, but to also showcase their skills on their individual pages
      2. This project could be one that could continue to be built on and enhanced by those advancing to the Nanodegree

Udacity: How did you leverage the skills you learned in the Challenge course for this group project?

Show-Me Coders: This project was a great way to leverage basic CSS, HTML, Javascript, and jQuery skill acquired as part of the coursework. However, we also decided to set the following stretch goals to extend what we learned in the course:

      1. Use git and GitHub to build the project as a team using tools we’ll need to know and use in the workplace.
      2. Use the GitHub API to dynamically built the contributor cards on the Home page and to pull and display recent GitHub activity (e.g. commits, pushes, and pulls)
      3. Create a site that works not just on a PC-based browser, but one that is responsive and is functional across a wide range of devices.

Udacity: What would you say were the biggest challenges & lessons learned in doing this group project?

Show-Me Coders:

  • “You don’t know what you don’t know until you know it!”. As we added to our skills and knowledge we also refactored the project. As a result, although different from our original design and concept the end product is much better.
  • Working as a team was a great experience and is a skill to be developed in its own right. We learned that the quality of our ideas and efforts was significantly improved as the result of this collaboration.
  • Learning new skills is hard, but having the support from others on the team helped to make it easier and also to increase the value of what we learned.
  • Implementing the vertical title bars on our cards was technically challenging, but it was a good learning experience due to the fact that it wasn’t easy.

Thank you for sharing your project with us today, Show-Me Coders!


FEATURED GROUP PROJECT - Study Buddies | Front-End

Study Buddies Team Members: Alena V. @sophistique_chat | Angel C, @Angel Couso | Brendan P. @Brendan (WI) , Ileana A. @Ileana | Janice M. @JaniceM (Wisconsin) | Matt C. @Matt | Matt D. @Matt Diamond | Rashmi @ras_2016 | Sachin S. @Sachin | Sravanthi B. @Sravanthi | Steven P @Steve Prager.

Udacity: Can you explain how the project works?

  • @sophistique_chat: The Study Buddies project is intended for GwG Scholarship Front-End Dev (future) students to track their course progress and save it locally on their machines. But our SPA (single page application) model is easily applicable for any Udacity course.
  • At the login screen a user is asked to type in some information: username (any) and an email address. A real email address is not required at the moment as the progress tracker is intended for local use only. We are planning to work on the server side of it in the future.
  • @Angel Couso: We didn’t use back-end in our project. Since this course is only about front end, we wanted to use just HTML, CSS and JavaScript. There are a few libraries that we could use (like Bootstrap, AngularJS, React) but we decided to do everything by ourselves trying to apply what we’ve learned. The purpose of this SPA is to give future GwG students a tool to see in a more detailed way how much of the course content they have completed and how much they still need to work on to finish the course. That was something that we all missed throughout the course.
  • @JaniceM (Wisconsin): Features include: Colorful progress bars and checklists, ability to login and save progress locally, user’s choice of color theme, and multilingual message that celebrates each team member’s background.
  • @Matt: The app's aim is to provide a helpful and motivating way for current and future students to keep track of their course progress. The app is built using the basic tools taught from the GWG Front-End Challenge course curriculum, which include HTML, CSS, JavaScript, and jQuery. The user can log in with a password protected email and be taken to their personal course tracker that is saved within the user's local cache. The course tracker uses check-boxes and progress bars to let the user know how far in each category they've progressed. Every time checkboxes are checked or unchecked the progress bars are dynamically updated to give the student real-time information on how close they are to reaching the sought after 100% completion.
  • @Sachin: The objective behind this, is to provide GwG Front End students the way to store and bookmark their progress. Any student can use this application to track their progress and stay on top of things. Then he can customize his experience with default themes and personal information which he will be asked to enter at first launch. Also this provided us opportunity to collaborate as team which is totally different ball game then working individually.

Udacity: What hurdles did your team face and how did you overcome them?

  • @Steve Prager: Since our group came together in a very abrupt fashion and most of us have different degrees of experience in web development, we spent a good chunk of our time up front picking out the ideal project - something that most of us really wanted to do and would also be well suited for our skill levels. When we finally picked a project, we overcame our knowledge gaps by listening carefully to all the voices in the group - especially the most seasoned ones - when deciding how to implement it. Opening ourselves to the ideas and thoughts of other students allowed those of us who were newer to front-end to both create a better project and learn new tools / techniques along the way.
  • @Sachin: Team newness to processes and scope creep were biggest hurdles. Using tools like Stride, Trello and GitHub and constant communication, we were able to overcome that. Maintaining code integrity and keeping it production ready was another challenge and having different branches in GitHub really helped it in this.
  • @ras_2016: We never really had any disagreements and made decisions based on group votes. Everybody helped each other in the process and I learnt a lot from this project including how to use Github.
  • @Angel Couso: I think that the hardest part was that almost none of us knew how to work within a team. But in the end this project provided a real experience, and a really great one!
  • @sophistique_chat: For me the biggest concern has been how to stay democratic and also provide some kind of guidance. While I wanted to be an equal part of my team, I also felt a huge responsibility hanging over me. It’s my first try to lead a team, and I really hope I didn’t let anybody down.
  • @Matt: Initially, one of the biggest hurdles was picking a project when there were so many great ideas. Another challenge was learning to work, communicate, and coordinate efforts as a team. We incorporated use of a communication tool (Stride), a Trello board to coordinate better, and a version control system in the form of GitHub. While we started as a group of strangers, I felt we ended as a team that could have been mistaken for a team that had been working together for years.
  • @JaniceM (Wisconsin): Ensuring that the project stayed in line with web accessibility guidelines was a challenge at times. This required certain limitations on color-combination choices and adding the necessary extra attributes to the form controls.
  • @Matt Diamond: The biggest hurdle I faced was coming into the project late and having to catch up on processes that had already been established. Learning to use Stride, Trello and Github on the fly was also a challenge, but a valuable learning experience at the same time. Overall it was a great opportunity and I really enjoyed working with this team.

Udacity: What advice can you offer for leading a team and working within a team?

  • @sophistique_chat: I was always sure, that a good brainstorming can help create wonderful things. And this is how it happened with Study Buddies. From a wireframe quickly drawn on a piece of paper to several digital models, after polls upon polls and a couple of brilliant ideas we ended up creating our Progress Tracker. So my approach and advice: stay democratic, let every member of your team have their say. That way the team will always stay motivated. Understanding that your efforts are meaningful - is the greatest pleasure.
  • @Steve Prager: Coding in a team is SO much different than coding alone, and after my experience with this project I feel it’s especially important to strike a balance between

-Being creative / keeping a single, cohesive theme;

-Encouraging debate / pushing the project forward;

-Overcoming communication barriers / Not being rude or dismissive.

  • @Angel Couso: I feel like everyone of us was a leader at some point. That’s why I think the key is teamwork, communication, and always doing what makes all members feel appreciated and valuable. Even the most experienced team member can learn something from a less experienced one. That’s a fact of life and it worked for our team as well. I loved the way we ran this.
  • @Matt: My advice is to voice your concerns and opinions, but also be comfortable delegating tasks to others. It can be difficult when you’re used to only doing solo projects and now in a group project you suddenly don't have control of every design or functionality decision, but it's important to trust your team and split up the workload.
  • @JaniceM (Wisconsin): It’s so important to think as a team and work in a way that improves the ability of the entire team to create, function under pressure, learn new skills, and produce an excellent product.
  • @ras_2016: I think everybody is unique and have their own strength and weaknesses. As a team we should utilize each other’s strengths to make good progress in a project and to help one another when needed. It is important to hear other team member’s opinion when deciding on a project feature that way everyone feels included in the project.
  • @Matt Diamond: Demonstrate support for one another as you work to accomplish your goals. It’s important to recognize that the strength in having a team is that every member brings different ideas, strengths and skills.
  • @Sachin: It is important to listen to each team member and understand each member's strengths. Also freezing scope for project at start will really help in staying focus and delivering high quality features on time.

Udacity: What resources did you find valuable?

Team: Without the resources mentioned throughout the course and found on Forum we wouldn’t have gone as far. Among the most useful resources were:

  • MDN,
  • W3schools,
  • Stack Overflow,
  • jQuery API Documentation,
  • Series of 3 YouTube videos, created by Google for Entrepreneurs, called “Rapid Prototyping”. These videos are incredibly useful when starting a new project. They help create a very descriptive model which is essential when working with several people.
  • Effective, targeted Google searches. As well as WebAIM for accessibility supports.
  • Test-driving Stride by Atlassian as our team communication tool was a good experience and gave the opportunity to compare it to Slack.
  • GitHub
  • Google as always was/is invaluable!

Thank you for sharing your project with us today, Team Study Buddies!