“Learn by Doing” | My Crio.do Experience

If you have just started to learn , then you might have heard this from a lot of developers:

Learn by Doing! Build what you learn! Build projects/ make an Open Source contribution!

And it's ! Learning without or without can only give you some and you would not gain which is very crucial if you want to become a Developer👨‍💻!

I am a CS Undergrad and I am really interested in Web and Mobile Development. I have worked with Python(absolutely ❤ it ) and built projects using Python.

Since I was looking to learn different technologies that are used for Web development I came across this amazing program called “” organized by . I got really excited about this opportunity and decided to register for this program.

It is India’s largest Tech Externship Program for developers!
It is a one-of-a-kind program focussed onbringing together budding engineering talent to work on challenging projects for the most exciting startups in the country.

This program has stages: , , and
You can check out more about this program

Recently, we completed the stage of this program: .
Since this was the first stage we started learning about the pre-requisites needed for like , some basic understanding of . We also learned about essential , , and hosting websites/applications on through hands-on learning modules called which were provided to us by .

Let me share with you some of the things that I learned in Stage-1!


We know that stands for .
But what exactly is ? It is a for querying the web🤓.
Next up, we learned about what are .

are requests made by our to or to like , (content on a web page). So when you enter a , the browser creates an on your behalf and sends it to the server on which the website is hosted.

The HTTP response from the server is read by the and rendered for us beautifully as instead of the raw HTML returned.

Here’s an example:-

  1. Visit a website using its and (Right-click and Inspect/Ctrl + Shift + i).
  2. Now select the and refresh the web page to start recording Network activity for that page.
List of HTTP Requests

As you can see these are some of the that your browser makes for fetching the content of a website.

Now, when you click on one of these requests, you can see different parts of that HTTP request like , and , for the request.

Details of an HTTP Request

Some of the that we learned:-

:- requests are used to resources from a and on the server.
:- requests are used to to the . For eg: Submitting a form, making a post on Linkedin/Facebook.
:- requests are used to on the . For eg: Updating profile data on Linkedin/Twitter.
:- requests are used to some data on . For eg: Deleting a post/comment.

are a part of the . It helps the (browser) understand what happened to the request.

Some of the include:-

:- The status codes signifies the was successfully received & understood by the server. For eg:- (Successful request)
:- This family of status codes must be taken to complete the made.
:- This family of tell us that there was an in the HTTP request sent by the (client).

curl and Postman:-

is like a , but for the . Using curl we can make just like our browser does! You can also get information about the just like how we use the .

is an awesome tool used to test or build your /. At the end of the , we created a simple over a (using ).


API- Application Programming Interface

First of all, what is an ?
- stands for .
- are basically some // that you want in your / that you have built. For this, you make an / to fetch that data/use that functionality/feature in your code.

A is an that follows the architecture and follows a model. (You can read more about the architecture)

The various components of a request include the (using which the browser makes the request), (like , , ), (eg:- , ), .

Now, after completing this Byte, we learned how to make an and I actually made a tweet on Twitter using my Linux Terminal by making an API request to (which was super awesome!). (Here’s a link to the tweet I made using the !)


runs almost everything these days from smartwatches, laptops, Cars to , anything, you name it.

The is a really powerful and productive tool for a developer if you are working with , /, , for different tasks like automation, working with , and much more!

In this byte, we learned about the by learning about different Linux commands to , , , , , , and files and directories in Linux.

We also learned about some utility commands like “”, “” and different operators like the Pipe operator “”, the redirection operator “”.

We also learned about “” jobs which are used to schedule the execution of a script. I also learned about and created a simple Bash script to analyze data from the logs generated by an app through a Fun activity which was conducted during this program by Crio.

4. AWS and Git

The or is a for hosting websites or apps using a .

We learned on by hosting a Food delivery app(QEATS) on the by creating an , for the app, and then connecting it to the ec2 instance. (You can check out AWS )

is a used to / while working on a project. (You can check out my Blog on different Git commands )

Next up, we learned about , , , and using different Git commands.

Git Architecture and different commands

We also learned about that occur when you are trying to to a that is not in . We learned about how to handle these conflicts as well!

5. HTML and CSS

, , and are the key components for building the or the of any website.

The content that you see on any webpage is displayed using and is styled using to make a webpage look beautiful and attractive!
is used to make and by accessing and rendering them in a specific way.

In the HTML byte, we learned about basic tags like , , , , .

Next up, we learned how to style using CSS.

We also learned about the which is how we visualize an as a and different properties like , , , and for that element.

CSS Box Model

We can automatically arrange HTML elements according to the (for or ) using . We make an element a “” and then set different properties like “”, “”, “” for arranging elements in a specific manner.

We also learned how to in CSS using the “” property.

Full-stack Development

After completing these Bytes we also got to experience by working on a guided project where we got to learn different aspects of a Full-stack web application like , , deploying each component on different platforms like and , and then connecting the i.e and .

Heroku and Netlify

I got to learn a lot about these different technologies by implementing the knowledge in the 1st stage of this program. I thoroughly enjoyed the “learn by doing” approach and I am really excited about the 2nd stage of this program!

Do follow me on where I will be talking about and , Machine Learning, Computer Vision, and much more!

You can connect with me:- or
Check out my projects on -



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
Devansu Yadav

Looking for SWE internship opportunities | Gold MSFT Student Ambassador | Prev — SWE Intern @KonfHub Technologies | Exploring Technologies | ❤️ Open Source