Wanna Know How Your First Front-End Project Will Look Like?
A brief explanation on how I concocted my first (group) project from rudimentary stage.
Front-end is all about garnering user attention towards your creative material. The most important and essential thing about front-end is to make the user comfortable so that in case of slow page rendering, the user is there to wait, and is not frustrated.
“If you think good design is expensive, you should look at the cost of bad design.” — Dr. Ralf Speth
Before I begin the project discussion, I would like to thank Masai School for giving me a platform to collaborate with different people, and a wonderful opportunity to work together with people from across the country to achieve a shared goal.
Beginning with my journey on how I created my first front-end project, I would like to mention the names of my groupmates (Ajmal KV, Ravi Soni), without whom I wouldn’t have been able to make it. Also, in order to collaborate with people from different parts of the country, it is very important to have that cooperative mindset and the required communication power to deal with squabbles that arise during the development of the project.
But, the question is — “How to collaborate?”
The answer is simple, and it happens to be one of the most frequent words in tech world. Any guesses? Yes, you’re right, it is GitHub. Firstly, you should understand that GitHub is one of the most prodigious code hosting platforms for version control and collaboration. Also, it lets you and others work together on projects from anywhere. Click here for a complete GitHub tutorial.
Any guesses on — What could be the project?
Our project was to replicate Ayoa.com using HTML and CSS, and we spared no effort to make it interactive using event listeners, DOM, and JavaScript. Before starting off with making the layout of the page, one should understand the niche of the company and try to segregate it into one of the two main distinctive categories namely — Professional or Creative. Ayoa.com is a website that provides online whiteboarding services.
So, according to you where should it fall among the two discussed categories? Yes, you’re absolutely right, Ayoa.com inclines majorly towards the creative end.
The first step to every project is to split your entire project into smaller and doable parts, and we did the same. We chopped our entire project into 3 small parts namely — Home page, Pricing page and Mind Mapping page. Now, it became somewhat easy for all of us to create the layout and the basic structure for our pages. But there was a problem, all the three pages had the same navigation bar and a footer. So, one of us took the responsibility to make the navigation bar and the other took the responsibility to make the footer.
After creating the basic structure, it was time to begin with the designing. We used the following tools for designing, and making our pages interactive, and responsive :
- CSS (Flexbox, Grid, Media Queries, Gradient)
- JavaScript
- DOM Events (Event Listeners)
Do you know what is the most pivotal part?
You’ll be surprised to know that knowing the technicalities is not the most crucial part in a collaborative work, but communication is. It is very important to communicate with your team mates on a daily basis to check for project updates. Apart from this, it is also important to know your team mates’ mental status because once, the brain is tired, the body won’t function with the same pace as it functioned in the beginning of the project.
Keeping the above points in mind, I took the responsibility to schedule Zoom meetings regularly, and we all three communicated, and shared ideas and issues together. There are times when someone or the other is demotivated and is in a dilemma whether he/she would be able to make it by the agreed deadline. Similar was the case with us. If anyone of us got demotivated, and was on the verge of falling into the trap of predicament, the other two members acted as a helping hand, and always supported the team mate in coming out of the dilemma.
Conclusion
This group project taught us about the basic fundamentals of GitHub for effective collaborative work, efficient use of Zoom for communicating with team mates, and for rehearsing for presentations. Also, it taught us how to manage time, how to work as a team, and how to cooperate with others.
Lastly, I would like to add a point that, since all the teammates are from different regions, and all possess different vernacular languages, it is very important to have an adequate knowledge of English, and it will definitely help you ameliorate your communication skills.
You can access my GitHub repository from the link below