My first climb towards brighter tomorrow

Hii readers, As you people reach here while searching about some web development project works or you get through this blog by recommendation by your colleagues or friends. Firstly, I want to tell you people about me. I am Deepak Makkar, and I am learning full-stack web development at www.masaischool.com for the last month.
I am writing this blog, to share my one month experience at Masai School. Here I will brief you about my learnings, my first live project on www.airtable.com, and our teamwork.

What I learned from Masai in last one Month

Before joining Masai School, I always think that I am good at programming and got good knowledge. Within the first month of enrollment in full-stack development course, I have learned many new coding skills such as HTML, CSS, and Javascript to make Front-end webpages, which were used to construct a live project. the software, we mainly used are GITbash, Visual Studio Code, and Github Platform. The main things which I had learned so far are:

  • CMD and GIT
  • Basics of JavaScript
  • HyperText MarkUp Language (HTML)
  • Cascading Style Sheets (CSS)
  • JavaScript DOM and Events.

Now, we will discuss the above-mentioned topics in brief:

Basics of JavaScripts

In this, I learned about many basics things about Javascript which are mentioned below:

  • Javascript variables
  • Javascript operators
  • Conditional Statements
  • Arrays and Objects
  • Functions

HTML and CSS

  • HTML and CSS basics
  • Table and Box Models
  • Selectors and Combinators (Pseudo Elements and classes) and their Specificity
  • Flex and Grid Models
  • Media Queries (For Responsiveness)

Javascript DOM and Events

  • On-Click events and alerts (Create, Remove and Append Elements)
  • Add Event Listeners and Remove Event Listeners
  • Attributes

CMD and GIT

  • Basic GIT commands (Add>Commit>Push)
  • GIT Collab
  • GIT branching

Project-Airtable and Our Expectations

It was my first real-time experience working on a project related to web development. before getting this project, we didn’t even know that this website is also present.

Air Table

Airtable is a spreadsheet-database hybrid, with the features of a database but applied to a spreadsheet. It is a platform to create new applications like cattle tracking to film-making etc. While making Airtable’s replica, we tried to make near about 8 pages, starting from the landing page. We mainly worked on the front-end part of a project using technologies such as HTML, CSS, and Javascript, and Gitbash for connecting it with the repository.

Our team got three days to complete that project. We started our project by making its structure first and we think that during this 3 days periods we will as many pages, we can build and makes them responsive for all types of screen sizes. For doing all this we go through all the notes and some online platforms to learn new things like using animations, etc. Our expectations was to first build the different pages and then work on responsiveness of these pages.

Team Work and Responsibilities to achieve our target Project

Our Team Name was assigned on the name of the holy river “PARBATI”. In this project, we were a team of 4 people and we executed this project with a good show of team coordination.

Now I will go through some web pages related to the clone we made in this project and tells about roles and responsibilities during these 3 days.

  • On the home page and landing page, our teammate Avinash Nadkar was assigned to work on. He did this using some above-mentioned technologies and some animations and slide show properties
  • This is the template page that my teammate Sunil Kumar was assigned to work on and he had made it Grids and Flex, some javascript for on-click events, and mouse-overs events.
  • This is the pricing page that was given to Subodh to work on.
  • These are the pages that were assigned to me to do work on them. I worked on them and even tried to make them more responsive using media queries.
Our Sales Contact Page
Sign Up Page
Sign In page

Hurdles we faced during this Project

In our team, we were all new to this web development project and we even don’t know how to deal with it and the time duration for completion of this project was 3 days only.
After going through our project platform, we were more tensed as their animations, slide shows, drop-down bars, etc and we had basics knowledge of HTML, CSS, and Javascript. There were more hurdles like how to push-pull on Github and making new branches on GitHub

How we reach Our Milestone

“First, solve the problem. Then, write the code.” — John Johnson

First, we started with making a new repository on Github and add the work that we assigned to us.
At the end of Day 1, we were just ready with a landing page, footer part. That’s when we gain the confidence in completing this work and achieve our target. In between Nrupul took some online meetings, which helps us with Github merging of all files.
By the end of Day 3, we were ready to submit our project as we had worked on some new things during this construct week.

Key Points to remember During Construct Week.

  • How to deal and communicate with the team.
  • How to present your skills with the team.
  • How to work on Live projects
  • How to enhance your capabilities

Conclusion

This was a great attempt from our team to make a clone of www.airtable.com. During the period of 3 days, we worked on this project for each hour we were awake. While working on this project I had learned how to work as a team player, that's the major benefit I had gained.
I am very thankful to Nrupul and Masai team for providing us this task which helps us brush up on all the skills we learned last month.

If you want to check out our project please go through github repository https://github.com/makkardeepak25/project_airtable and fork this repository.

I am an Aspiring Full Stack Web Developer. Learning How to Code for being a Well-performing Full-stack Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store