DEV Community: Gaurav

Python [ 'L', 'I', 'S', 'T' ]

Gaurav — Mon, 31 Aug 2020 10:22:40 +0000

Whether you are a Python beginner😵 or a proficient Python Programmer/Developer🤩, one of the most common Data Structure that you will encounter is List📃

List, in Python, is an ordered, mutable, heterogeneous, dynamic Datatype.
They are ordered, so we can access individual elements through index.
They are mutable, means that the list elements can be updated.
A List can contain data of various datatypes like Integer, Float, Boolean, String etc.
List can contain duplicate elements.
Example of a list is

new_list = ["John", 2 , 2.5, True]

Simple✨💥......isn't it??!!!!!!😎🤩

Okay..Let's discuss some of the most common methods that we can use upon Lists.

append()
This method is used to add/append elements at the end of the list.

Syntax

list.append(element)

Example

num_list = ["John", 1, 2, 3, 4, True]
num_list.append(5)
print("Updated List: {}".format(num_list))

Output

Updated List: ['John', 1, 2, 3, 4, True, 5]

insert()
This method is used to insert/add element at a specified location/index.

Syntax

list.insert(index, element)

Example

num_list = ["John", 1, 2, 3, 4, True]
num_list.insert(1,500)
print("Updated List: {}".format(num_list)

Output

Updated List: ["John", 500, 1, 2, 3, 4, True]

500 is inserted at index 1.

count()
This method returns the number of occurrence of a particular element in a list.

Syntax

list.count(element)

Example

num_list = [1,2,3,5,4,5,6,5]
cnt = num_list.count(5)
print("Number of times 5 occur: {}".format(cnt))

Output

Number of times 5 occur: 3

sort()
This method sorts the list in ascending order by default. To sort in descending order, we have to use reverse flag within the sort method.

Syntax

list.sort(reverse = True|False, key = function_name)

Example

num_list = [1,2,3,5,4,5,6,5]
num_list.sort()
print("Sorted List in Ascending Order: {}".format(num_list))
num_list.sort(reverse = True)
print("Sorted List in Descending Order: {}".format(num_list))

Output

Sorted List in Ascending Order: [1, 2, 3, 4, 5, 5, 5, 6]                                                                      
Sorted List in Descending Order: [6, 5, 5, 5, 4, 3, 2, 1]

reverse()
As the name implies, this method reverses a list.

Syntax

list.reverse()

Example

num_list = [1,2,3,5,4,5,6,5]
num_list.reverse()
print("Reversed List: {}".format(num_list))

Output

Reversed List: [5, 6, 5, 4, 5, 3, 2, 1]

remove()
This method removes a specified element from the list. If the specified element occurs more than once, then the first occurrence of the element is removed.

Syntax

list.remove(element)

Example

num_list = [1,2,3,5,4,5,6,5]
print("List before updating: {}".format(num_list))
num_list.remove(5)
print("Updated List: {}".format(num_list))

Output

List before updating: [1, 2, 3, 5, 4, 5, 6, 5]                                                                                
Updated List: [1, 2, 3, 4, 5, 6, 5]

pop()
This method removes the element from the specified location/index.

Syntax

list.pop(index)

Example

num_list = [1,2,3,5,4,5,6,5]
print("List before updating: {}".format(num_list))
num_list.pop(5)
print("Updated List: {}".format(num_list))

Output

List before updating: [1, 2, 3, 5, 4, 5, 6, 5]                                                                                
Updated List: [1, 2, 3, 5, 4, 6, 5]

index()
This method returns the index of a specified element. If the specified element occurs more than once, then index of the first occurrence of the element is returned.

Syntax

list.index(element)

Example

num_list = [1,2,3,5,4,5,6,5]
idx = num_list.index(5)
print("Index of 5: {}".format(idx))

Output

Index of 5: 3

extend()
This method appends/adds the elements of any iterable (List, Set, Tuple, etc.) to the end of the current list.

Syntax

list.extend(iterable)

Example

num_list = [100,200,300,400,500]
char_list = ["A", "B", "C", "D"]
num_list.extend(char_list)
print("Updated List: {}".format(num_list))

Output

Updated List: [100, 200, 300, 400, 500, 'A', 'B', 'C', 'D']

copy()
This method creates a copy of the specified list.

Syntax

list_2 = list_1.copy()

list_2 is the copy of list_1

Example

num_list = [100,200,300,400,500]
new_list = num_list.copy()
print("Copy of the 'num_list': {}".format(new_list))

Output

Copy of the 'num_list': [100, 200, 300, 400, 500]

clear()
This method removes all the elements from the specified list.

Syntax

list.clear()

Example

num_list = [100,200,300,400,500]
num_list.clear()
print("Cleared List: {}".format(num_list))

Output

Cleared List: []

So...working with a List isn't that difficult!!....right???!!!!😇

Happy Learning!!✌😎

CSS FLEXBOX - A STARTER KIT

Gaurav — Sun, 30 Aug 2020 07:56:06 +0000

Hey Learner, do you want to learn Frontend Development???🤩🤩
YYYYYYYEEEEEEESSSSSSSSS???!!!!💯
Then CSS is one of the tools in which developers like you spend a lot of time to learn and implement 🤕🤒

So, to get started with Flexbox, first thing you need to know is What is a Flexbox?

Well, CSS Flexbox is a one-dimensional model or structure that not only helps you to arrange your items or elements along the cross-axis (top-bottom) and main-axis (left-right) but also provides you a lot of flexibility to control the spacing between the elements😲😲

Hope, this image gives you a basic idea about the different components of a Flexbox.
We have a parent Flex Container, within which all our children Flex-items are arranged.

The properties of a CSS Flexbox Container are:

display
flex-direction
flex-flow
flex-wrap
justify-content
align-items
align-content

Display

Display Property is used to create a Flex Container. The value of the display property is either set to flex or inline-flex. The following code snippet will create a Flex-container with six Flex-items embedded within it.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <<link rel="stylesheet" href="style.css">
        <title>CSS Flexbox</title>
</head>

<body>
    <div class="container">
        <div class="flex-items fruit-1">Apple</div>
        <div class="flex-items fruit-2">Orange</div>
        <div class="flex-items fruit-3">Banana</div>
        <div class="flex-items fruit-4">Strawberry</div>
        <div class="flex-items fruit-5">Cherry</div>
        <div class="flex-items fruit-6">Guava</div>
    </div>

</body>

</html>

style.css

.container {
    border: 5px solid black;
    display: flex;
}

.flex-items {
    color: #800000;
    font-size: 2rem;
    text-align: center;
}

.fruit-1 {
    background-color: #ff1a1a;
}

.fruit-2 {
    background-color: #ff9933;
}

.fruit-3 {
    background-color: #ffff00;
}

.fruit-4 {
    background-color: #ffb3b3;
}

.fruit-5 {
    background-color: #e60000;
}

.fruit-6 {
    background-color: #66ff66;
}

Note that, when we set the display value to flex, the items are left-aligned by default, as a result of which, we have some white spaces at the end.

Let's set the display value to inline-flex and see what happens !!!🤔

.container {
    border: 5px solid black;
    display: inline-flex;
}

We can get rid of the extra spaces. The container only takes up that amount of space required to accommodate its children (flex-items)🤘🎉

Flex-direction

Flex-direction property controls how the Flex-items will be placed inside the Flex-container.

The possible values of flex-direction property are:

row: Arranges the items from left-right (default case)
row-reverse: Arranges the items from right-left
column: Arranges the items from top-bottom
column-reverse: Arranges the items from bottom-top

Lets apply each of these properties and see them in action!!

row

.container {
    border: 5px solid black;
    display: flex;
    flex-direction: row;
}

row-reverse

.container {
    border: 5px solid black;
    display: flex;
    flex-direction: row-reverse;

column

.container {
    border: 5px solid black;
    display: flex;
    flex-direction: column;
}

column-reverse

.container {
    border: 5px solid black;
    display: flex;
    flex-direction: column-reverse;
}

Hope you got a basic idea about how to get started with Flexbox👩‍💻
Keep Learning!!🤘✌️