Summer of Code/2015/Anindya:WebConfusion

About Me

What is your name?

Anindya Chakravarti

What is your email address?
anindyac07@gmail.com

What is your Sugar Labs wiki username?
Anindya

What is your IRC nickname on irc.freenode.net?
anindya

What is your first language? (We have mentors who speak multiple languages and can match you with one of them if you'd prefer.)
English

Where are you located, and what hours (UTC) do you tend to work? (We also try to match mentors by general time zone if possible.)
Location: Over the course of the project, I will be in Bangalore, India(till July 17) and Roorkee, India(from July 17 to the end of the project).

Time Zone: UTC + 5:30 (Indian Standard Time)

Working hours: 04:30 to 18:30 UTC (Flexible)

Have you participated in an open-source project before? If so, please send us URLs to your profile pages for those projects, or some other demonstration of the work that you have done in open-source. If not, why do you want to work on an open-source project this summer?
I am new to Open Source. I have always been fascinated by the world of OSS, the way that people share their work with the world with only one objective : to make the world a better place. This is the reason I want to work on an open-source project. I believe in Open Source and try to keep all my projects available for others to use. My motto is : The more I share the more I learn.

About my project

What is the name of your project?
Web Confusion

Describe your project in 10-20 sentences. What are you making? Who are you making it for, and why do they need it? What technologies (programming languages, etc.) will you be using?
The project focuses on challenging the user on his/her html/css skills. This will be done over various levels(increasing difficulty as the levels increase). The idea is to help the user develop his personal website by giving challenges. I have divided the development of the personal website into approximately 35 levels(will be finalized only after the project gets accepted). The emphasis on making personal website is to keep the user motivated throughout the duration and this will act as an incentive to keep working hard. The challenge website will be a index of the levels each linked to a page which will have a challenge link and some description to help the user with the task at hand. At first, the student will be taught about conventions in web development and directory for the website will be made by the student. Next, students will just make a template for their website and then tweaks to this design will be introduced so as to develop a fully functional website which will include a biography, their portfolio, blog and contact page.

In the mid - levels, the user will be taught to use HTML5 for audio/video embedding. The user will also be taught to make the website's responsive so that their website perform perfectly on mobile devices as well. The use of bootstrap will be taught. By this time, user will be completely proficient in html and css and should be taught to use templates directly for making and editing professional websites. By learning bootstrap, student will be able to make a good looking, elegant website with ease. The ending levels will help the student host his website through Github.

The project will also teach students to use standard coding practices like adding comments, following conventions, indentation, etc.

What is the timeline for development of your project? The Summer of Code work period is from May 19 - August 22; tell us what you will be working on each week. (As the summer goes on, you and your mentor will adjust your schedule, but it's good to have a plan at the beginning so you have an idea of where you're headed.) Note that you should probably plan to have something "working and 90% done" by the midterm evaluation (27 June); the last steps always take longer than you think, and we will consider cancelling projects which are not mostly working by then.
I will be starting from May 4 because I have my end term evaluations of this semester till May 4.

Weeks	Expected Tasks
May 4 - May 10	Discuss with my mentor about the different levels of the tasks and finalizing them.
May 11 - May12	Document a brief Report of the project features & implementation details discussed above & send it to my mentor for a quick review.
May 13	I will be travelling on this date to go to my summer residence.
May 14-May 17	Reiterate the changes to the report after discussing with my mentor.
May 17-May 24	Set up repository for the project and host the entire project through github.io(using gh-pages). Set up the blog and start with my initial experience with the project and Sugarlabs.
May 25 - May 30	Create a website with index for all the levels and make a template for all level pages. This template will have link to challenges on each level and also some hints as to how to approach the problem if the student gets stuck
May 31 - June 6	Write basic challenges like introduction, template, about me, etc.
June 6 - June 13	Implement challenges related to projects page i.e. project page template, project page individual entry and on hover effects on projects image.
June 14 - June 20	Implement challenges for blog, involves blog index template, blog entry template and an on hover effect
June 21 - June 23	Implement challenge for contact page.
June 23 - June 26	Brush up the personal website tutorials. Ask the community about their opinions and get feedback. Work on the feedback from the community and submit the project for mid-term evaluation.
June 27	Mid Term Evaluation
June 28-June 29	A break over the weekend. Some off time.
June 30-July 6	Implement the code for gallery, this will involve a number of css3 animations teaching and modals challenge.
July 6-July 13	This week will be on HTML5 media i.e. playing audio, video and youtube videos using html5.
June 13-July 17	This will have a challenge using some html5 drag and drop. Download functionality of html 5 will be used as well.
July 18-July 20	College starts again. So, I will be travelling and dealing with registration and other formalities for the next semester.
July 21- July 25	Discuss with mentor over the possible improvisations on the project. Make corresponding changes in the document made initially. Work on the levels left(involves tutorial and challenges on using bootstrap). Add some more features and ask the community at the same time to evaluate the challenge website.
July 25 - Aug 2	Look for flaws in the web pages and make the website look more attractive. Add some advanced challenges and some links to advanced learning. Write tutorial on how to host your static website using Github.
Aug 2 - Aug 9	Extra week, in case something does not according to plans
Aug 9 - Aug 16	Make wiki pages for the project. Write tests, improve documentation, etc.
Aug 17 -Aug 18	Ask mentor for his views on the project and make changes wherever required
Aug 19	Submit the code for end-term evaluation

Detailed Timeline
April 27 - May 23(Community bonding period)
Get to know the mentors, read up the coding practices followed in the organisation and get well acquainted with the organisation. Discuss with mentors and finalise all the challenges. Set up a blog for updating weekly progress of the project. Document everything and get it reviewed by the mentor. Set up repository for the project.(Details in the table above)

May 25 - May 30
Start with writing the challenge website. This website will be like index if a book. It will contain a link to all the challenges with a brief description about it. A template for each level will also be made which will contain the challenges and hints, prerequisites and tutorials to the challenge.

May 31 - June 6
Start writing challenges. First week will involve a basic introduction, instructions about good coding practices, setting up the development directory,etc. Also, challenge for making a basic template to be used throughout the personal website will be made. An about me challenge will also be involved.

June 7 - June 13
Challenge for the project mockup below and related challenges involving hover effects, making template for individual project pages, etc.

June 14 - June 20
Challenges from this week will revolve around a blog with a clean UI design. Blog entry challenges. On hover effects on a button(similar to youtube’s menu button)

June 21 - June 23
Challenge will involve making contact page. This will teach student about forms.

June 24 - June 26
Brush up the personal website tutorials. Ask the community about their opinions and get feedback. Work on the feedback from the community and submit the project for mid-term evaluation

June 27
Mid-term evaluation.

June 28 - June 29
A break over the weekend. Some off time.

June 30 - July 6
Implement code for challenge on gallery using htlm/css. This challenge is one of the most important one because it involves use of a lot of css3 animations and modals as well.

The challenges from here are on are yet to be finalized but will roughly revolve along the concepts mentioned

July 6 - July 13
This will revolve around use of HTML5 media i.e. playing audio, video and youtube videos using html5.

July 14 - July 17
Something related to drag and drop will be used. Download functionality of html 5 will be used as well.

July 18 - July 20
College starts again. So, I will be travelling and dealing with registration and other formalities for the next semester.

July 21 - July 25
Discuss with mentor over the possible improvisations on the project. Make corresponding changes in the document made initially. Work on the levels left(involves tutorial and challenges on using bootstrap). Add some more features and ask the community at the same time to evaluate the challenge website.

July 26 - Aug 2
Check challenges for bugs, make the website look more attractive. Add some advanced challenges and link to advanced learning. Write a tutorial on how to host a static website(like the personal website coded) using Github.

Aug 3 - Aug 9
Extra week, in case something does not go according to plans.

Aug 10 - Aug 16
Make wiki pages for the project. Write test cases, improve documentation, add more comments etc.

Aug 17 - Aug 18
Ask mentor for review. Work on the reviews received and make changes wherever required.

Aug 19
Submit code for end term evaluation

See Mockups here

Directory Structure for students website

Mockups

• 

  Basic Introduction

• 

  Website Template

• 

  About me layout

• 

  Dropdown menu

• 

  Projects page layout

• 

  Project onhover effect

• 

  Individual project page layout

• 

  Contact page mockup

• 

  Blog layout

• 

  Blog entry layout

• 

  Blog hover effect

• 

  Gallery layout

Convince us, in 5-15 sentences, that you will be able to successfully complete your project in the timeline you have described. This is usually where people describe their past experiences, credentials, prior projects, schoolwork, and that sort of thing, but be creative. Link to prior work or other resources as relevant.

• GsoC is the top priority in Summer.

• Can freely work 40-45 hrs a week during my vacation (May 15-July 15) & 30-35 hrs a week during college days.

• Prior experience with front end web development and determination to get every project taken up done.

• I have been working as a freelancer for almost a year now and am experienced enough to complete the project in time.

• I have already made mockups for almost half of the challenges which shows that I am dedicated towards the project and can surely complete the project, if given a chance.

• Creativity and critical thinking to decide how a topic should be taught to anyone so that they end up attaining complete knowledge of it.

Relevant Projects in Past:

• SkillWill Landing Page - A website for a startup based out of delhi. Link

• Kalpavriksha Website - Website for an educational institute I was a part of.(website taken down)

• Yearbook mentorship - Mentoring web development of a student startup based out of IIT Roorkee(code not open sourced yet) which focuses on taking the yearbook experience online and then give to the student a hardcopy of the same.

My other experiences :

• I was part of a team that went for HackCon'14 finale. HackCon was a hacking event organised by Microsoft last year.

• I have developed a mobile application just for learning mobile application development(Play Store).

You and the community

If your project is successfully completed, what will its impact be on the Sugar Labs community? Give 3 answers, each 1-3 paragraphs in length. The first one should be yours. The other two should be answers from members of the Sugar Labs community, at least one of whom should be a Sugar Labs GSoC mentor. Provide email contact information for non-GSoC mentors.
My Opinion: I believe that learning web development is one of the most fantastic thing(skill) a child can learn. It will always be beneficial to him and also web development is one of most sought after career in modern world. If the project is completed successfully as planned, then it will help the user to not only learn web development but also be proficient enough to make an elegant website easily. When i was learning web development in my freshman year, I was going around resources like codecademy, w3schools, etc. All of them taught me syntax of how to do things but none made me do a real project which surely hindered my learning process. I believe that it is always good if you get output through something you learn because it gives you a sense that you are doing something relevant and also keeps you motivated. That is exactly, what the project will do: give students output for their work and motivate them to keep learning cool stuff.

Tony:

Walter: It is central to our mission to provide tools for expression to our learners and to empower them to take ownership and responsibility for these tools. Whereas HTML5/CSS are such important building blocks, it behooves us to provide mechanisms for mastering these tools. Hence the importance of this effort.

'
'What will you do if you get stuck on your project and your mentor isn't around?

If I am stuck at anything, depending on the task, I will ask for help on IRC or ask questions on reliable websites like stackoverflow, etc. Else, I would keep it as a task to discuss with my mentor and get it fixed as soon as he is back.

How do you propose you will be keeping the community informed of your progress and any problems or questions you might have over the course of the project?

If allowed, I will host the entire code on Github and host a website from there to help my mentor keep track of my progress. Along with this, I plan to write blog posts every weekend about the progress of the project and my experiences as I go along completing it.

Miscellaneous

Screenshot of sugar development environment Home view

• 

Lately, I have been working on improving the new sugarlabs website. Code - https://github.com/anindya/www-sugarlabs/tree/website-revamping Hosted - anindya.github.io/www-sugarlabs

Describe a great learning experience you had as a child.

My dad used to make me write tables(multiplication) [1-30] everyday from my 4th grade till my 10th grade. I always use to think that it is just a wastage of time and paper. But, now when I look back, I think it has made me much better than most of the people out there when playing around with numbers. The lesson that I learnt form here is that "no matter what your intelligence, it is practice that makes you better at a task and that hard work always pays off in some way or the other."

One thing I would like to add : I am very thankful to Tony and Walter for their help. Also, I look forward to working with the community and make the world a better place to live.