DEV Community: Zubair Ahmed Khushk

GDSC Lead 2022-2023

Zubair Ahmed Khushk — Tue, 02 Aug 2022 11:44:09 +0000

GDSC Lead
Hi Dev Community!
I am thrilled to announce that I am the lead for the year 2022-2023.
I was rejected twice, but I never lose hope, and I tried again.
I was an event manager for the year 2020-2021, and then I was a technical lead for the years 2021-2022. I learned a lot in these two years. I organized workshops and events with the help of my leads.
I am thankful for my lead and mentors Adil Raza and Muqadas Urooj, who selected me for their team. I learned communication, speaking, and leadership skills from them.
I am so much thankful to my interviewer Priydarshahni and Pradipta Sharma.
I am really thankful to all those who have guided me to reach this level.

Tech Communities

Zubair Ahmed Khushk — Sun, 23 Jan 2022 11:40:29 +0000

                      _Tech Communities_

I became a member of the developer student club at the end of my second semester, and I learned a lot in this club. My role was as an event manager. I learned a lot of things through events. Again at the end of my 2nd year, I became a member of the Hult Prize organization, joined the developer student club team as a technical lead, became a hack club lead, AngelHack ambassador, and ambassador at ORIC. I do love open-source communities. After my involvement in all these communities, I learned how to deliver technical content. I can talk publicly. I learned to collaborate with other teammates, and I love to share knowledge with others. These communities have had a good impact on me. I think one can change their confidence collaboration level, By working with team members' experience and much more in these communities. Many people say that working in these organizations is a waste of time. But I think one can get more benefits if they want one. This is my experience what's yours!

Data Structures and Algorithm

Zubair Ahmed Khushk — Thu, 20 May 2021 10:18:41 +0000

Hi guys I need your help with data structures and algorithms.
I am just at medium level in programming. Now I want to improve my data structures and algorithm, but I am not getting any interest in programming as well. I want you guys to help me in this way. If you are doing any project in Java or C++, then you can tell me. If you do have any suggestions to study data structures and algorithms, then please do share them with me in the comments. I need your motivation. If someone wants to study together with data structures and algorithms, then you can talk with me. Thanks

CSS Penguin Design

Zubair Ahmed Khushk — Wed, 12 May 2021 19:06:47 +0000

Hi friends here I have another complex design for you.

CSS Code:

 .penguin {
    --penguin-skin: gray;
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
  }

  .penguin-top {
    top: 10%;
    left: 25%;

    /* Change code below this line */
    background:var(--penguin-skin);
    /* Change code above this line */

    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }

  .penguin-bottom {
    top: 40%;
    left: 23.5%;

    /* Change code below this line */
    background:var(--penguin-skin);
    /* Change code above this line */

    width: 53%;
    height: 45%;
    border-radius: 70% 70% 100% 100%;
  }

  .right-hand {
    top: 0%;
    left: -5%;

    /* Change code below this line */
    background:var(--penguin-skin);
    /* Change code above this line */

    width: 30%;
    height: 60%;
    border-radius: 30% 30% 120% 30%;
    transform: rotate(45deg);
    z-index: -1;
  }

  .left-hand {
    top: 0%;
    left: 75%;

    /* Change code below this line */
    background:var(--penguin-skin);
    /* Change code above this line */

    width: 30%;
    height: 60%;
    border-radius: 30% 30% 30% 120%;
    transform: rotate(-45deg);
    z-index: -1;
  }

  .right-cheek {
    top: 15%;
    left: 35%;
    background: white;
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }

  .left-cheek {
    top: 15%;
    left: 5%;
    background: white;
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }

  .belly {
    top: 60%;
    left: 2.5%;
    background: white;
    width: 95%;
    height: 100%;
    border-radius: 120% 120% 100% 100%;
  }

  .right-feet {
    top: 85%;
    left: 60%;
    background: orange;
    width: 15%;
    height: 30%;
    border-radius: 50% 50% 50% 50%;
    transform: rotate(-80deg);
    z-index: -2222;
  }

  .left-feet {
    top: 85%;
    left: 25%;
    background: orange;
    width: 15%;
    height: 30%;
    border-radius: 50% 50% 50% 50%;
    transform: rotate(80deg);
    z-index: -2222;
  }

  .right-eye {
    top: 45%;
    left: 60%;
    background: black;
    width: 15%;
    height: 17%;
    border-radius: 50%;
  }

  .left-eye {
    top: 45%;
    left: 25%;
    background: black;
    width: 15%;
    height: 17%;
    border-radius: 50%;
  }

  .sparkle {
    top: 25%;
    left: 15%;
    background: white;
    width: 35%;
    height: 35%;
    border-radius: 50%;
  }

  .blush-right {
    top: 65%;
    left: 15%;
    background: pink;
    width: 15%;
    height: 10%;
    border-radius: 50%;
  }

  .blush-left {
    top: 65%;
    left: 70%;
    background: pink;
    width: 15%;
    height: 10%;
    border-radius: 50%;
  }

  .beak-top {
    top: 60%;
    left: 40%;
    background: orange;
    width: 20%;
    height: 10%;
    border-radius: 50%;
  }

  .beak-bottom {
    top: 65%;
    left: 42%;
    background: orange;
    width: 16%;
    height: 10%;
    border-radius: 50%;
  }

  body {
    background: black;
  }

  .penguin * {
    position: absolute;
  }
</style>

HTML Code:

<div class="penguin-bottom">
    <div class="right-hand"></div>
    <div class="left-hand"></div>
    <div class="right-feet"></div>
    <div class="left-feet"></div>
  </div>
  <div class="penguin-top">
    <div class="right-cheek"></div>
    <div class="left-cheek"></div>
    <div class="belly"></div>
    <div class="right-eye">
      <div class="sparkle"></div>
    </div>
    <div class="left-eye">
      <div class="sparkle"></div>
    </div>
    <div class="blush-right"></div>
    <div class="blush-left"></div>
    <div class="beak-top"></div>
    <div class="beak-bottom"></div>
  </div>
</div>

CSS Heartbeat using an Infinite Animation Count

Zubair Ahmed Khushk — Wed, 05 May 2021 12:25:41 +0000

CSS Styling:
Here is another amazing shape of heartbeat. It's really interesting. You can try it as well.
CSS Code:

.back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;
    animation-duration: 1s;
    animation-iteration-count:infinite;
  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: red;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s;
    animation-iteration-count:infinite;
  }
  .heart:after {
    background-color: red;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: red;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

HTML Code:

<div class="back"></div>
<div class="heart"></div>

Complex Design of CSS

Zubair Ahmed Khushk — Wed, 28 Apr 2021 19:02:53 +0000

                    Cascading Style Sheets

This is the picture of that css work. Which I have learned earlier this year. I found it interesting.

If you also want to make this heart picture. Here I have given code you can try this it using notepad or any text editor. Write "div class="heart"" and close the div tag finally.

CSS Code:

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: ;
    transform: rotate(-45deg);
  }
  .heart::after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart::before {
    content: "";
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }
</style>

Hactoberfest2020

Zubair Ahmed Khushk — Tue, 13 Apr 2021 19:47:00 +0000

My Experience
This was my first experience in opensource community during hacktoberfest2020. I was unknown about opensource community and also about github contributions. I came to know when I attended different talks on github contributions. The events were conducted by developer students club. They helped me to grow my knowledge about github and also a friend from india told me about hacktoberfest. He guided me and I made my First Pull Request on his repository. After that I started founding beginner level repositories and those who had hacktoberfest tag. There are many good people on github and they also helped me to correct my mistakes. I made thirteen PRs! From those eleven Prs were accepted. Finally I got my T-Shirt and Stickers. It was mine experience. What's yours? Tell me in comments.

Introduction

Zubair Ahmed Khushk — Thu, 08 Apr 2021 17:35:25 +0000

Hi everyone I am Zubair Ahmed from Pakistan. I am doing B.E in Software Engineering.I am learning web development. Love to connect with you amazing dev lovers 😍 ☺!