Googliness, GitHub and Responsive Website Designing
We are learning so many things at Jadu 👌
Here we are in the 4th week of learning Full-stack (MERN) development at Jadu. So, the learning process is very smooth, and I am enjoying learning exciting stuff. Let’s jump into the learnings of this week.
01/03/2021
Today Arsalan Khattak the instructor briefly discuss GitHub and Git. So, let’s talk about these in brief.
What is GitHub
GitHub is a code hosting platform for version control and teamwork. It lets you and others work together on projects from anywhere. Version control means that GitHub keeps track of all the changes made by the owner and the contributors to a code. You can simply see that who made some changes in the code at which time. This is simply a version control. Teamwork as the name suggests teams can work on a single code using GitHub.
To work with GitHub you need to make a repository first. After making a repository you can place a project’s code in that repository.
What is Git
Git is a free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. You can download git for windows from here.
It is very easy to manage codes using GitHub. You can write a code using any text editor like Vs Code and push that code to your GitHub repository. You can also clone repositories that are already at GitHub. GitHub and Git enable users to write code more efficiently and provide flexibility.
02/03/2021
Soft skills development class is one of the things that I wait for the whole week. It is super interesting and I really like the way the instructor explains the topics openly and friendly.
So here we try to understand the word Googliness. Googliness is the set of values that make a person distinct from others. We talked about those set of values that actually matter to become a successful person. I will not mention the set of values here instead you can click here and you will know what those values are, but these values are somehow natural. A person with a positive attitude can adopt these values in a minimum time.
I thought that I will not mention the set of values but there is the one that really matters for me the most and worth mention here. “Doing the right thing”. This is what I have to adopt at the very beginning. Doing the right thing for yourself and society is what is needed the most. In our case, most of us don’t think during a reaction to an action. We just react. This is not the way. We should think and cover all the consequences of a reaction. We should think about the pros and cons of a reaction and then decide which action will beneficial for ourselves and society. If this one thing we make them part of our personality I think all other values will become very easy to adopt.
05/03/2021
First of all, I wanted to tell you that I designed JaduJobs Website using Flexbox I learned in the previous technical class. It is responsive and adjusts according to screen sizes. The GitHub repo is here and the Linkedln post with video can be seen from here.
Now coming towards our today’s session we learned about Grid Layout in CSS and Media Queries. These are the most powerful tools that can be used for making responsive websites.
CSS Grid Layout
Using CSS grid layout we divide our screen into main grid-like parts. We can adjust elements by specifying rows and columns for them. CSS grid gives us more flexibility to design webpages. We can also use flexbox inside the grid layout. If you are aware of bootstrap which is a popular framework for making responsive webpages, it uses CSS grid layouts behind the scenes. We can place elements on the screen with minimum code using CSS grid layouts.
We can change an element display to the grid by writing “display: grid”. We can then alter the rows and columns of that grid using grid-template-rows and grid-template-columns properties. We can also add a gap property to change the gap/distance between columns and rows of the grid.
Media Queries
Media Queries allow us to give different designs/styles to an element for different screen sizes. We can set a header element size large for big screens while making it small for small screens like mobile phones. Media queries are really powerful in terms of making a responsive website. We can check that if the screen size is this then apply this color and so on.
