“Learn by Doing” | My Crio.do Experience
If you have just started to learn Technology, 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 absolutely true! Learning without practicing or without implementing can only give you some theoretical knowledge and you would not gain practical knowledge which is very crucial if you want to become a Developer👨💻!
Let me share with you something about myself:-
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 “Crio Winter of Doing” organized by Crio.do. 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 3 stages: Warm-Up, Preparation, and Externship
You can check out more about this program here.
Recently, we completed the 1st stage of this program: Warm-Up.
Since this was the first stage we started learning about the pre-requisites needed for Web Development like HTTP, some basic understanding of REST APIs. We also learned about essential Linux commands, Version Control using Git, and hosting websites/applications on AWS through hands-on learning modules called “Bytes” which were provided to us by Crio.
Let me share with you some of the things that I learned in Stage-1!
1. HTTP
We know that HTTP stands for HyperText Transfer Protocol.
But what exactly is HTTP? It is a set of rules for querying the web🤓.
Next up, we learned about what are HTTP requests.
HTTP requests are requests made by our browser to access web pages or to fetch some content like images, text(content on a web page). So when you enter a website URL, the browser creates an HTTP Request 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 browser and rendered for us beautifully as web pages instead of the raw HTML returned.
Here’s an example:-
- Visit a website using its URL and Open the Chrome Developer Tools(Right-click and Inspect/Ctrl + Shift + i).
- Now select the Network tab and refresh the web page to start recording Network activity for that page.
As you can see these are some of the HTTP requests 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 Request URL, Request and Response Headers, HTTP method for the request.
Some of the HTTP methods that we learned:-
GET:- GET requests are used to “get” resources from a server and not modify any data on the server.
POST:- POST requests are used to send some data to the server. For eg: Submitting a form, making a post on Linkedin/Facebook.
PUT:- PUT requests are used to update data on the server-side. For eg: Updating profile data on Linkedin/Twitter.
DELETE:- DELETE requests are used to delete some data on servers. For eg: Deleting a post/comment.
HTTP Status Codes:-
HTTP Status codes are a part of the HTTP Response. It helps the client(browser) understand what happened to the request.
Some of the HTTP status codes include:-
2xx family:- The status codes 200–299 signifies the HTTP request was successfully received & understood by the server. For eg:- 200 (Successful request)
3xx family:- This family of status codes denotes that further action must be taken to complete the HTTP request made.
4xx family:- This family of status codes tell us that there was an error in the HTTP request sent by the browser(client).
curl and Postman:-
curl is like a web-browser, but for the command line. Using curl we can make HTTP requests just like our browser does! You can also get information about the HTTP requests just like how we use the Chrome Developer Tools.
Postman is an awesome tool used to test or build your APIs/HTTP requests. At the end of the HTTP module, we created a simple HTTP request over a TCP connection(using Telnet).
2. REST API
First of all, what is an API?
- API stands for Application Programming Interface.
- APIs are basically some functionality/data/feature that you want in your application/code that you have built. For this, you make an API call/request to fetch that data/use that functionality/feature in your code.
A REST API is an API that follows the REST architecture and follows a client-server model. (You can read more about the REST architecture here.)
The various components of a REST API request include the Request URL(using which the browser makes the request), Request Method(like GET, POST, PUT), Request Headers(eg:- accept, accept-encoding), Request Body.
Now, after completing this Byte, we learned how to make an API request and I actually made a tweet on Twitter using my Linux Terminal by making an API request to Twitter’s API (which was super awesome!). (Here’s a link to the tweet I made using the terminal!)
3. LINUX
Linux runs almost everything these days from smartwatches, laptops, Cars to servers in Cloud, anything, you name it.
The Linux Terminal is a really powerful and productive tool for a developer if you are working with different files, navigating files/CRUD operations, data analysis, running/creating scripts for different tasks like automation, working with curl, and much more!
In this byte, we learned about the power of Linux by learning about different Linux commands to navigate, create, copy, rename, read, write, update and delete files and directories in Linux.
We also learned about some utility commands like “grep”, “awk” and different operators like the Pipe operator “|”, the redirection operator “>”.
We also learned about “cron” jobs which are used to schedule the execution of a script. I also learned about Bash scripts 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 Amazon Web Service or AWS is a cloud hosting platform for hosting websites or apps using a virtual private server.
We learned how to host an app on AWS by hosting a Food delivery app(QEATS) on the AWS ec2 server by creating an ec2 instance, deploying the backend server for the app, and then connecting it to the ec2 instance. (You can check out AWS here.)
Git is a Local Version Control System used to manage/track files while working on a project. (You can check out my Blog on different Git commands here)
Next up, we learned about cloning a Git repo, adding changes, pushing, and pulling changes using different Git commands.
We also learned about merge conflicts that occur when you are trying to push changes to a branch that is not in sync with your forked repo. We learned about how to handle these conflicts as well!
5. HTML and CSS
HTML, CSS, and Javascript are the key components for building the Front-End or the UI of any website.
The content that you see on any webpage is displayed using HTML and is styled using CSS to make a webpage look beautiful and attractive!
Javascript is used to make webpages responsive and dynamic by accessing HTML elements and rendering them in a specific way.
In the HTML byte, we learned about basic HTML tags like <head>, <body>, <p>, <i>, <a>.
Next up, we learned how to style HTML elements using CSS.
We also learned about the CSS Box model which is how we visualize an HTML element as a rectangular region and different properties like margin, padding, border, height, and width for that element.
We can automatically arrange HTML elements according to the screen size(for mobile or desktop) using CSS Flexbox. We make an element a “flex container” and then set different properties like “flex-wrap”, “flex-direction”, “justify-content” for arranging elements in a specific manner.
We also learned how to position elements in CSS using the “position” property.
After completing these Bytes we also got to experience Full-stack web development by working on a guided project where we got to learn different aspects of a Full-stack web application like Front-End, Back-End, deploying each component on different platforms like Netlify and Heroku, and then connecting the two components i.e Front-End and Back-End.
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 Medium where I will be talking about Mobile and Web Development, Machine Learning, Computer Vision, and much more!
You can connect with me:- Linkedin or Twitter
Check out my projects on - Github
