My First Ride towards Web Development

As you people reach here while searching about the web development project works or you get through this blog by recommendation by your companions or friends. I am Mahima Makkar, a student at Masai School, Bengaluru hereby wants to share my experience through this blog.

At Masai School, I have completed my first-month journey on full-stack web development training where I learned about some new technologies like HTML, CSS, JavaScript, and GIT as of now and we the team “KAVERI” created the clone of Fiverr which is a freelancing services application.

The landing page of Fiverr Clone.

If you rest you rust- It was all started from here-

Well! It's just a start-

As life is all about ups and downs that are uncountable if seriously you need a big change from the position you are in and where you want to reach you have to go through a thorny path and really struggle a lot, after leaving 2 multinational companies leaving the role of technical support specialist, I get to know about Masai School and then pursued my career in web development.

What I Gained in 5 weeks-
Basically, I learned how to concentrate for 12 hours or more than that also. In starting it seems unusual for me to do. But you know once it becomes a habit getting out seems to be something missing. It's all about hard work and dedication that all works for you. At last, life is a marathon, not a sprint race.
I started with JavaScript to make some Front-end webpages and working on a project in construct week. The software, we mainly used is GitBash, Visual Studio Code, and the Github platform. HTML which is known as the body of the webpage, and then the styling of webpages using CSS was also covered in these 5 weeks of training.

CMD and GIT

• Basic GIT commands
• GIT Collab
• GIT branching

Basics of JavaScripts

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

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

HTML and CSS

• HTML and CSS basics
• Table and Box Models
• Selectors & Combinators with their Specificity
• Flex and Grid Models
• Media Queries

Javascript DOM and Events

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

Project-Fiverr and Our Expectations

It was my first real-time experience working on a project related to web development. Before working on this project, I didn’t have much exposure to working on web-based projects.
Fiverr is an online marketplace for freelance services. The company provides a platform for freelancers to offer services to customers worldwide. While making the Fiverr clone, we tried to make near about 15 pages, starting from the landing page. We mainly worked on the front-end of this Fiverr clone using the above-mentioned technologies and Gitbash for connecting our work with the Github repository.
Our team got three days to complete that project. We started our project by working on the body structure of the landing page and we think that during this 3 days period we will make as many pages, we can build and makes them responsive. For doing all this we go through all the notes and some online web documents like www.w3schools.com and https://developer.mozilla.org/en-US/ to learn new things like using animations, etc. Our expectations were to first build the different pages and then work on the responsiveness of these pages.
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, I was assigned to work on. I did this using some above-mentioned technologies and some animations and slide show properties.

Features of Fiverr Services

• This is the features page that was assigned to my peer Mangesh and he worked on it. He had made it using Grid and added a video on the right using some CSS property video elements.

Fiverr’s Marketplace

• This market-place document was assigned to me and I worked on it. I had made it Grids and Flex, some javascript for on-click events, and mouse-overs events. We had shown different types of market places from here user can directly move towards his/her interested field with just a single click.

Fiverr Business

• This Fiverr Business page is made by another peer Muthyalu Sairam and he added some animations within the grid and added a button to explore Fiverr business in which javascript is used.

Some Professional Services

• The above page is made by Muthyalu Sairam only. He added a flex with overflow property and used few background images to make a page more attractive and charming. By just clicking on the arrow, it will move to the next page, which will also contain other options as shown on this page.

Reviews on Fiverr

• This page was assigned to Mahanhi Keshav. He worked on the Business page and has mentioned the imports how this is useful for both businessmen and freelancers.

Fiverr Logo Maker

• This webpage for the Fiverr logo maker was designed by me using a grid and video element.

Footer Part

• This is a footer part designed by Mangesh Landge. He made it with flex and some javascript. In this view we have shown the footer page of the site, here we added more details of Categories, About, Support, Community, More from Fiverr and also added some quick buttons which will redirect the user towards more details.

Challenges that a beginner’s faces while starting my first ever 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 approached our challenges

We did many team meetings, at starting we discussed on each one’s strength and as per that we divided our work and kept connecting with each other time to time and asking about their progress as per that we helped to each other
On day one, we started with Github and Gitbash for making a repository for our project and to group the work that we assigned to us.
At the end of Day 2, we were just ready with a landing page, footer part, and login page. That’s when we gain the confidence in completing this work and achieve our target. In between our mentor 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 constructed work.

Key learning points during this journey

• How to coordinate with the team members.
• How to present the work done.
• How to improve my productivity and work efficacy.
• How to work on real-time websites.
• How to improve self-learning capability.

Conclusion

It was a very great experience for me, this is not less than a thriller show, in 3 days I worked more than 50 hours on this project and still feeling active but I have a time limit for this. I can’t explain the satisfaction I got after completing my first project. So, we have given our best as a team and present our project in front of judges, but that time we didn’t expect that our project will be selected in the top 5 but considering our team effort and presentation we are selected at top 5 and I am wordless to explain our joyfulness. The structured planning and contribution of each team member helped us to complete our unforgettable journey.

If you want to look at the project then you can go to this GitHub.

In the end, I hope you liked our efforts I would like to thank you for sticking around to the end. Please like, share, and comment your suggestions down below.