My CSS Grid Learning Journey

Raj Kiran Chaudhary — Mon, 01 Feb 2021 14:40:52 +0000

CSS Grid is a system that helps to place your layouts in horizontal (rows) and vertical (columns) direction. It is also known as a two-dimensional layout system and helps you to create a responsive layout without any hassle. Below is a video that illustrates how you can achieve a layout using CSS Grid (I found it in MDN Web Docs). This video will give you an idea of what you can achieve with Grid.

Why did I start learning CSS Grid?

We all know it’s a popular layout system that is used by many Designers (or some might still be comfortable with Flexbox). In the first place, I also wanted to try it and wanted to explore the possibilities that it holds but I failed. When I first tried to learn it, I didn’t understand a thing and hence quit because it is complicated. But few days back, I again started learning and unlike the first time, I didn’t quit this time and I am glad. Learning CSS Grid has been fruitful for me and I hope this will 🚀kick-start my career.

✨Popularity:

📱 Handle responsive design:

More than half the population (approx 53%) use their Cell Phones to surf the internet today and the usage of Cell Phones is increasing phenomenally. Being a Web Designer it is crucial to have the skill of creating a responsive design. Further, if the website designed is not responsive then you will lose your customer too because that will lead to a poor experience. So all these motivated me to learn those stuff that will help me in creating responsive designs.

💻Sharpening skill:

Web development is a field of immense possibilities. This can give you a lot of perks and benefits like freedom, financial stability, flexibility in terms of work, freelancing, and so on. But on the other hand, it is a challenging and constantly evolving field too. If you can't go on hand-in-hand with the new languages/skills then you will be left behind. Continuous learning is the key to enhance your skill.

🌐Resources that I used:

1. Scrimba :

It is an online interactive platform which teaches you how to code. The fun part is it has screencasts which lets you interact with the code directly into the player providing you an enticing experience. It has a great CSS Grid course taught by the co-founder Per Herald Borgen. Highly recommended if you want to start learning Grid.

2. The Net Ninja:

This is a widely popular YouTube channel and has more than one thousand tutorials. It is a great channel and has videos of different languages/ frameworks like JavaScript, PHP, React, Flutter, HTML, and many more. Crystal clear explanation is one of the key features of his tutorials.

3. CSS GRID by Wesbos:

Wesbos is a Full Stack Developer and teacher from Canada. He is popular for his free great tutorials like What The Flexbox, CSS GRID, JavaScript30 which teaches you to build 30 things in 30 days with 30 tutorials. If you want to learn CSS Grid in depth then this tutorial is for you.

4. CSS-Tricks:

If you prefer learning by reading the article then here is an article in great detail by Chris House. What I like from this article is the properties that can be used by a parent item and child item has been separated making it easier for us to learn.

5. Grid By Example:

This is a project by Rachel Andrew. It is, without a doubt, a great resource for learning CSS Grid.

6. Thu Nghiem:

Well, Great! You have covered all the basics, you know how Grid works. Now what? Well, I have got you covered. Here, Thu provides you few sets of examples so you could learn and practice. Give it a try. It's worth checking. And one more thing, he is the creator of devchallenges.io where you can get some great challenges for practicing. Highly recommended.

7. Grid garden:

This is a fun game where you can check your CSS Grid knowledge that you have acquired till now. If you are able enough to complete the game, 🎉Congratulations.

🖥Browser support:

According to caniuse.com, CSS Grid supports most of the browser. But be cautious to use the latest version of whatever browser you use otherways you would end up pulling off your hair.

🌝My recommendation:

Being a developer/designer, the common mistake that we commit is we just run after that fancy language or that shiny framework without knowing the basics. The result is we fail, we get overwhelmed by that language/framework and we quit. Thus, what I urge is first learn the basics. For instance, you can learn Flexbox before learning Grid because Flexbox is comparatively easy than Grid. Grid is slightly complex. If you do not understand once, rewatch the tutorial or reread the article but don't quit. You will thank yourself later on.

Thank you for reading. Feel free to add more resources for learning Grid. You can follow me on Twitter.

My Time Management Tool

Raj Kiran Chaudhary — Tue, 03 Dec 2019 02:26:46 +0000

It is obvious that time is a great asset. Once lost can't be retrieved the same again. So it is crucial to manage your time. And being a person working on Software Development Industry, we have to deliver the products on time i.e. following DEADLINES is most. One day, while surfing through the internet, I came to know about Pomodoro Technique and decided to give it a try. Let me explain what this technique is: It is a time management method developed by Francesco Cirillo in the late 80s. This method basically breaks the time in small chunks of 25 minutes followed by a break of 5 minutes. Each interval is known as Pomodoro. The word Pomodoro came from a tomato-shaped timer that he used to track his time as a university student. The core process of this technique is divided into six small steps:

1) Choose a task that you want to get accomplished.
2) Set the timer to the length of 25 minutes.
3) Work on the task without any distraction for this set time.
4) When time is up, Pomodoro will ring and then put a checkmark on a paper.
5) Take a short break for 5 minutes.
6) Every four pomodoros take a longer break.

Here, longer break refers to the time length ranging from 15 to 30 minutes. Grab a cup of coffee, go for a short walk, meditate or do anything that refuels energy to your body for another 25 minutes. It’s a basic yet highly productive tool who wants to use their time in a great way.

But one thing to remember, if you don’t complete a Pomodoro then you have to set the timer to 25 minutes again. This is the penalty that you have to pay if you don’t complete the Pomodoro.

Why should you use it?

1) It encourages to focus on some important tasks for a short period hence increases productivity.

2) Rather than thinking we have endless time, it makes us think we only have 25 minutes to get the task completed.

3) We can keep track of our invested time on certain tasks.

How to get started?

To keep track of your time, you can use following web apps:

1) Tomato timer: I have been using this since I knew about the Pomodoro technique. It’s a neat and clean web-app with a sleek interface. You can give it a try.

2) Marinara timer: It is another timer that has more variations than the tomato timer. It has a Pomodoro timer, Custom timer, and Kitchen timer. The timer set in here can be customized according to your need. Feel free to try this.

DEV Community: Raj Kiran Chaudhary