Skip to main content

My Toolkit

Every developer needs a nice set of tools to help him to be more productive and focused towards his work. It may not be very easy for everyone to find a good set of tools. In this post, I am listing the tools that I have used and which may be very useful for you. IDEs IDEs are one of the most important tools that every developer needs. Some of the awesome IDEs that I have used and would recommend you are- 1) Adobe Brackets Brackets is a very lightweight IDE with many extensions giving it superpowers. If you are working on a small scale project and need speed, then Brackets is for you. It has awesome support for HTML, CSS and JS including smart autocomplete suggestions. Support for more languages can be extended via numerous extensions. Smart live preview gives more to programmers as they can see the changes as they code. This IDE is absolutely free of cost and available for downloading at  http://brackets.io/  . 2) VS Code Visual Studio Code gives the power of Microsoft's Visual S

Playing with CSS Cards


New design trends are coming everyday. Card layout in CSS has been a very popular layout type in the recent times and many companies like Google are using card layout in their designs. We will try to create a card layout in this short tutorial.

- Prerequisites :

Basic knowledge of HTML and CSS. Flexbox will be our friend in layout.

1) Basic file structure -

The basic project structure will go as below :
Project Directory
    |-index.html
    |-style.css

2)Basic html -


<!--index.html-->
<!DOCTYPE html>
<html>
    <head>
    	<title>CSS Cards</title>
    	<link rel="stylesheet" href="style.css"> <!--CSS link-->
    </head>
    <body>
    	<div id="container">
            <div class="card one">
            	Card 1
            </div>
            <div class="card two">
            	Card 2
            </div>
            <div class="card three">
            	Card 3
            </div>
        </div>
    </body>
</html>

The basic structure is quite familiar with us. The div#container is the container which will hold our cards. The three div.card are our cards. So our markup is ready and we will head towards the styling.

As I said, flexbox will be our friend in styling. The basic styling is as below -

*{
	margin: 0px;
	box-sizing: border-box;
	font-family:sans-serif;
}

#container{
	height: 100vh;
	display: flex;
	padding: 2rem;
	justify-content: space-evenly;
	align-items: center;
}

.card{
        width: 30%;
        height: 70%;
        padding: 1rem;
        border: 10px solid black;
        font-weight: bold;
        font-size: 3rem;
}

So, our container is a flex container and each card is a flex child with height of 70% and width of 30%. The current view of the file is as below -


So, we have built our first ever cards. Although they don't have a very good aesthetic look for now, but we can manage it by adding more styles.
So first of all let's remove all the dull looking borders and have a beautiful gradient for the background of each card. I have selected three gradients for our cards. You can create a gradient yourself, or select anyone from the huge stock of gradients here. Remember, we have assigned a unique class to each card, we will use them to apply gradients for each card. We will also change the color of text in the cards. So the code goes below -

/*style.css (continued)*/

.card{
	/*remove border property*/
        color: ghostwhite;
}

.one{
	background-image: linear-gradient(to bottom right, #5433ff, #20bdff, #a5fecb);
}

.two{
	background-image: linear-gradient(to bottom right, #f12711, #f5af19);
}

.three{
	background-image: linear-gradient(to bottom right, #8a2387, #e94057, #f27121);
}

So, the look has quite changed now. We have made our cards colourful. The last thing left in this tutorial - the text in the card is not centered. We will use flexbox to solve it in three lines of code.

/*style.css (continued)*/

.card{
    display: flex;
    justify-content: center;
    align-items: center;
}

So, our cards are finally ready. below is an embed for you to look at what we have built today.
Nice! Isn't it? Here is our completed and final css for your reference (HTML will remain same as in the beginning snippet)-

*{
	margin: 0px;
	box-sizing: border-box;
	font-family:sans-serif;
}

#container{
	height: 100vh;
	display: flex;
	padding: 2rem;
	justify-content: space-evenly;
	align-items: center;
}

.card{
	width: 30%;
	height: 70%;
	padding: 1rem;
	font-weight: bold;
	font-size: 3rem;
	color: ghostwhite;
	display: flex;
        justify-content: center;
        align-items: center;
}

.one{
	background-image: linear-gradient(to bottom right, #5433ff, #20bdff, #a5fecb);
}

.two{
	background-image: linear-gradient(to bottom right, #f12711, #f5af19);
}

.three{
	background-image: linear-gradient(to bottom right, #8a2387, #e94057, #f27121);
}

So it's all for now. I will be back in another tutorial extending our discussion in this tutorial to make 3D effects and some practical use cases of CSS Cards. Till then, Happy Coding!

Comments

Popular posts from this blog

Let's get Sassy.

Have you ever tried Sass in your StyleSheets? If not, then you will start using it from today. Sass is a CSS Preprocessor. Although, I am not going to explain what is Sass etc, but I am going to share some of the most useful features of Sass which I use a lot. So without wasting a single minute let's get started. 1)Variables: We would have used variables in programming languages like JavaScript, Python, C etc. But we can use variables in Sass also. Variables in Sass are mostly used to store colors, font size, etc. When we are dealing with many colors like #ffc000  or #ffff00  etc and our Sty leSheets become very large it becomes very difficult for us to remember each color's hex code and we mess up. We can overcome this problem by using variables. We can save #ffff00 as $yellow and use the color by the variable name wherever we want. You can see this in action in the below embed -  See the Pen Sass Variables by PraneetDixit ( @PraneetDixit ) on CodePen 2)Ne

A coin toss program in Python and JS

Today, we will increase our confidence in programming by making a coin toss program in two popular languages : Python and JavaScript. Starting from Python: Python is a very popular and readable language. Python developers have a large demand in the industry. So keeping this in mind, we will start with python. First of all, we will make an algorithm on which we will work. 1)Make two choices. 2)Have random computer input and human input. 3)Check if both inputs are same. 4)Print the result of the toss. These are the basic steps. We will add additional features afterwards. So let's go... 1)Importing packages First ly, we will import a package which will help us to generate random computer choice. import random 2)Creating choices For creating two choices to select, we will make a list as follows- options = ['heads', 'tails'] 3)Selection We can get user's choice using input() - userchoice = input("Enter your choice - heads/tails ->") For