DEV Community: Rohan Kulkarni

GitHub Student Developer Pack

Rohan Kulkarni — Tue, 10 Aug 2021 08:20:26 +0000

Hello Everyone, In this article, we will have an overall look at the GitHub student developer pack and also the benefits that I used and find it most useful.

Let's see what GitHub says about it !!

Learn to ship software like a pro. There's no substitute for hands-on experience. But for most students, real-world tools can be cost-prohibitive. That's why we created the GitHub Student Developer Pack with some of our partners and friends: to give students free access to the best developer tools in one place so they can learn by doing.

Yes, that's true GitHub student developer pack will help you in many ways.

How to get Github Developer Pack? ( Yeah the Most Important question )

To get a Developer pack that first condition is that you must be enrolled as a student in any university and you must have GitHub Account 😅

Step 1:

Go to Link :- education.github.com/pack
Sign in with help of your GitHub Account

Step 2:

Click on Get Your Pack

Step 3:

You will be redirected to one page which looks like 👇🏻 Now Click on Get Students Benefits in Individual Card

Step 4:

On this page, there will be one form that will ask for College/University Name and one question that is How will you Use GitHub Student Developer Pack ?
And after answering this question you can click on continue then you will be asked to upload proof.

Step 5:

You have to submit an application and wait for Confirmation. You can get a mail but I am not sure about it. You can check the application status from this site itself this will show your approved application or rejected application status.

Benefits which I found Most Usefull Till Now 💡

GitHub Profile ReadMe ✅ The Second Resume 🤔

Rohan Kulkarni — Tue, 20 Jul 2021 06:18:39 +0000

Hello Everyone, in this article we will have a talk on creating a GitHub profile readme.

What is GitHub 🤔 ?

-> GitHub is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.

GitHub provides a special feature to display a file with the extension `.md` to display on the profile.

For This, you need to have a GitHub account 😅 I hope you are having one If not go on GITHUB and sign up 😲

After creating an account you need to create a new repository with the same name as your username.

You:- Ok I have done that but how will I get to know I have created the right one or not?

Me:- If in the repository you created you are getting a message in the green box then Congrats 🥳, You Successfully created the right repository !!

Now by editing the README.md file, you can make your profile ready !! ⚡

What things to include in Profile Readme? ( Personal Opinion 😬)

-> Well, so there is no certain rule that you should include these things you should not include these things. Just by keeping in mind that it should be attractive, neat, and clean. But I will let you know how I created my profile and surely that will give you a basic idea about how to create one for you.

Let's Go through my Profile Rohan Kulkarni

Section 1 : Banner

-> This is an optional part but I feel that this gives an attractive look to the overall profile. You can try to express your tech-stack or something which is not related to coding also. Totally Depends on you.

This is My Banner 👇🏻

Section 2: Intro ( A bit about yourself )

-> In this section, you can introduce yourself. You can mention your college and stream or at which position you are, you can also add what you are learning or your aims.

Section 3: Tech Stacks

-> In this section, you can add the skills which you know. I have added the badges which help in enhancing the look of the profile.

You: From where did you get those badges did you made them?

Me: No, I don't make them but got that from a GitHub repository Ileriayo /
markdown-badges you just have to copy and paste the code of the respective badge.

Section 4: Projects ( THE Most IMPORTANT )

-> This section is important because this will let others know your real skills! They will get to know how nicely you can implement the skills which you have learned so far so don't miss this one in your profile & don't forget to provide deployment links as no one will go to the repository and check deployment there.

Section 5: Socials

-> In this section, you can provide your social handle's so if anyone got impressed by your profile and want to get connected with you or collaborate with you then the person should able to do that 😉. I have used the badges which are the same as the repository I mentioned in Section 3.

Section 6: GitHub Stats

-> In this section, you can add some graphs as I have done. It's totally a personal choice but as this gives an overall idea about your active contribution do consider it

You: From where did you get those graphs? From the same repository?

Me: 😅 No, this time I took those graphs from anuraghazra /
github-readme-stats .You can also copy those from my repository and just enter your username in place of mine.

Finally Your GitHub ReadMe is Ready to be showcased 🥇

I hope this article will help you in making one profile and do tag me on socials if you shared your profile and if this article helped you.

Wanna get connected with me 😄
Twitter
LinkedIn

Recently I also have started a Telegram channel If you like this content please consider checking my Channel
Telegram

CSS Flex-Box Most Used Properties

Rohan Kulkarni — Mon, 19 Jul 2021 07:58:05 +0000

Hello, In this article I will try to explain the most used properties of CSS Flexbox by myself.

What is CSS Flexbox?

-> Flexbox is a one-dimensional layout model which means that you can control only one direction at a single time either row or column. This allows you to align the flex items easily in different styles and layouts.

How to Use Flexbox?

-> To use flex property on child elements you need to make the display of parent element flex.

This is Our Sample Html Code with One Parent Div and 4 Children Div

        <div class="flex-container">
            <div class="flex-item child-1">I am first Child of Flex</div>
            <div class="flex-item child-2">I am Second Child of Flex</div>
            <div class="flex-item child-3">I am Third Child of Flex</div>
            <div class="flex-item child-4">I am Fourth Child of Flex</div>
        </div>

This is Our Sample Css Code ( Without Flex ) which gives a better look to learn 😁

.flex-container {
  padding: 1em;
  background-color: palegreen;
  border-radius: 12px;
  border: 1px solid black;
}

.flex-item {
  background-color: plum;
  margin: 0.5em;
  padding: 0.5em;
  border-radius: 12px;
  border: 1px solid black;
}

This is how Our Code Looks !!

Let's Make this Flexbox now ⚡

.flex-container {
  padding: 1em;
  background-color: palegreen;
  border-radius: 12px;
  border: 1px solid black;
  /* This line will make the parent div to flexbox */
  display: flex;
}

Our box will display like this now !! This is because by default the flex-direction is row.

Flex-Direction Property

This will arrange all elements vertically.

flex-direction: column;

This will arrange all elements vertically but in reverse order.

flex-direction: column-reverse;

This will arrange all elements horizontally but in reverse order.

flex-direction: row-reverse;

Let's Keep Flex Direction as Row which is by default and see some other important properties 😄

Flex Wrap

.flex-container {
  padding: 1em;
  background-color: palegreen;
  border-radius: 12px;
  border: 1px solid black;
  /* This line will make the parent div to flexbox */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

This property will help elements to wrap themselves when the viewport size decreases. There are two major types of wrap that is a wrap & wrap reverse workflow is the same just a small difference as in row & row reverse.

This will give you a better idea of how Wrap works

Justify Content

This is a way to arrange the children along the main axis.

  justify-content: center;

  justify-content: flex-start;

  justify-content: flex-end;

  justify-content: space-around;

  justify-content: space-evenly;

justify-content: space-between;

By seeing all this layout you can understand which property to use when !!

Align Item

Let's give Our parent div some height so we can check how this property align the elements vertically.

align-items: center;

align-items: flex-start;

align-items: flex-end;

Align Self

This is a property you Will apply on a Child element that will align that particular child as you set.

Golden Tip 🥇

With just 3 lines you can center the whole content !! Don't get how to do it? Ok let me tell you 😁

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

Conclusion

I think now you might get an idea of how the flexbox is useful. I hope that this article will help you in using flexbox confidently without hit and trial !! There are also many other properties of flexbox but as the name of the article says Most Used properties I feel that these are the properties that are used mostly by every developer!

Wanna get connected with me 😄
Twitter
LinkedIn

Recently I also have started a Telegram channel If you like this content please consider checking my Channel
Telegram

Analog Clock Using HTML,CSS & JS ⚡

Rohan Kulkarni — Sun, 18 Jul 2021 04:36:16 +0000

Hello Everyone !! In this article, I will try to explain the code of the Analog clock which I made recently !!

Code ( GitHub Repository ) Website Preview

Aim: To Develop an Analog Clock Like 👇🏻

HTML CODE

In this section, we are having simple code which consists of a div that has a title.
Below that, there is one section in which the whole clock div is located and inside the clock div, there is a separate div for each hand!

    <div class="heading"> 
        <p>ANALOG CLOCK</p>
    </div>
    <section class="page--section"> 
        <div id="clock--box"> 
            <div id="hour--hand"></div> 
            <div id="min--hand"></div>
            <div id="sec--hand">
                <div class="round--dot"></div>
            </div>
        </div>
    </section>

CSS CODE

Let's see the design code part by part

This is CSS code for the body. This has given a flex display to the body so we can align the div to the center of the page. I have selected the background gradient from uigradients.com

body {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  background: #7f7fd5;
  background: -webkit-linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
  background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
}
p {
  margin: 0;
  padding: 0;
}

This is the code block for the heading and page section. I have added width and given display flex to the page section because I can align the clock div to center by flex methods.

.heading {
  text-align: center;
  font-size: 4vmax;
  font-weight: 900;
  color: white;
  text-shadow: 4px 4px black;
}

.page--section {
  width: 98vw;
  height: fit-content;
  margin-top: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

This is code for the clock box which has a border-radius of 50% which makes the div box rounded. I have added an image in the background which is a normal image of a clock.

In this code, position relative plays the most important role this will help us to align the hands in relative to this div box. I have also added an animation effect that changes box-shadow you can have fun by changing the color and size of the shadow 😁

#clock--box {
  height: 30vw;
  width: 30vw;
  background-image: url(../images/circle-cropped.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 50%;
  box-shadow: 4px 4px 32px 32px yellow;
  animation: box 4s infinite;
}

@keyframes box {
  0% {
    box-shadow: 2px 2px 10px 10px #fceabb;
  }
  25% {
    box-shadow: 3px 3px 16px 16px #f8b500;
  }
  50% {
    box-shadow: 4px 4px 32px 32px #f87000;
  }
  75% {
    box-shadow: 3px 3px 16px 16px #f8b500;
  }
  100% {
    box-shadow: 2px 2px 10px 10px #fceabb;
  }
}

In this code, I have made the position of the hour hand absolute so we can align them with respect to the top, bottom, left, the right position of the clock div.
We have to align all hands to the center with the help of these properties.
In this code, the transform-origin is set to the bottom that will help our clock hand to rotate from the bottom. By default, this property is set to center.

#hour--hand,
#min--hand,
#sec--hand {
  position: absolute;
  background-color: black;
  border-radius: 12px;
  transform-origin: bottom;
}

#hour--hand {
  height: 23%;
  width: 1.5%;
  left: 50%;
  top: 26%;
  border-radius: 75%;
}

#min--hand {
  height: 30%;
  width: 1%;
  left: 50.3%;
  top: 20%;
  border-radius: 200%;
}

#sec--hand {
  height: 30%;
  background-color: black;
  width: 0.2%;
  left: 50.5%;
  top: 20%;
  position: relative;
}

.round--dot {
  background-color: red;
  height: 1vmax;
  width: 1vmax;
  left: 50%;
  top: 20%;
  border-radius: 50%;
  display: block;
  opacity: 1;
  position: absolute;
  top: 0vmax;
  left: -0.4vmax;
}

This is CSS code for Small devices.

@media only screen and (max-width: 800px) {
  .page--section {
    padding: 0;
  }
  #clock--box {
    height: 60vw;
    width: 60vw;
    background-image: url(../images/circle-cropped.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 50%;
    box-shadow: 4px 4px 32px 32px yellow;
    animation: box 4s infinite;
  }
}

JS CODE

This is Javascript code in which we have Set Interval function which will repeat itself after every 1000 milliseconds ( 1 sec ). In the variable current date, we are storing the current date with help of the Date Object. By using methods on date object we will be taking current time in hours, minutes & seconds. Then we have defined rotation for each hand.

Hour hand rotation 
Total Hours 12 Rotation of 360 deg So in 1 hour 
It will rotate 30 deg but the minute hand also impact the rotation of the hour hand so if in 60 min it rotates 30 deg then in 1 min it will rotate half deg so we will add this to the total turn 

Minute hand rotation 
Total Min in Hour is 60 with rotation of 360 deg so per min will rotate 6 deg 

Second-Hand rotation 
Total sec in Min is 60 with rotation of 360 deg so per sec will rotate 6 deg

By using the style transform property we will rotate the hand as per time and will update it every sec.

setInterval(() => {
    let currentDate = new Date();
    let timeInHour = currentDate.getHours();
    let timeInMinutes = currentDate.getMinutes();
    let timeInSeconds = currentDate.getSeconds();
    let hourHandTurn = (30 * timeInHour + timeInMinutes / 2);
    let minuteHandTurn = 6 * timeInMinutes;
    let secondHandTurn = 6 * timeInSeconds;
    document.getElementById('sec--hand').style.transform = `rotate(${secondHandTurn}deg)`;
    document.getElementById('min--hand').style.transform = `rotate(${minuteHandTurn}deg)`;
    document.getElementById('hour--hand').style.transform = `rotate(${hourHandTurn}deg)`;
}, 1000);

Great we have created our own analog clock. I hope you enjoyed developing with me. Do tag me if this article helped you in creating your own analog clock and do share on socials !!

Wanna get connected with me 😄
Twitter
LinkedIn

Implementing Smooth Scroll Using Javascript ⚡

Rohan Kulkarni — Fri, 16 Jul 2021 07:37:54 +0000

Hello Everyone 👋🏻, today we will be looking at how to implement smooth scrolling behavior using the scrollIntoView property.

Normally for the creation of Navbar, we use this code.

    <nav class="navbar" id="nav--bar">
        <ul>
            <li><a href="#1" class="link--a">DIV 1</a></li>
            <li><a href="#2" class="link--a">DIV 2</a></li>
            <li><a href="#3" class="link--a">DIV 3</a></li>
        </ul>
    </nav>

But when we click on the element it takes us to the element with the id provided in href. This is how a normal scrolling effect looks like 👇🏻

So what can we do for a smooth scrolling effect ?

HTML CODE

    <nav class="navbar" id="nav--bar">
        <ul>
            <li><a href="#1" class="link--a">DIV 1</a></li>
            <li><a href="#2" class="link--a">DIV 2</a></li>
            <li><a href="#3" class="link--a">DIV 3</a></li>
        </ul>
    </nav>
    <section id="1">
        <div class="div div--1">This is DIV 1</div>
    </section>
    <section id="2">
        <div class="div div--2">This is DIV 2</div>
    </section>
    <section id="3">
        <div class="div div--3">This is DIV 3</div>
    </section>

    <script src="script.js"></script>

CSS CODE

This code depends on personal choices as this will affect the design part!

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.div--1 {
  background-color: rgb(0, 132, 255);
}
.div--2 {
  background-color: rgb(255, 136, 0);
}
.div--3 {
  background-color: rgb(255, 0, 242);
}
.navbar ul {
  display: flex;
  justify-content: space-around;
  background-color: rgb(179, 230, 245);
  list-style: none;
  padding: 1.5em;
  border-radius: 12px;
  border: 1px solid black;
}
.navbar ul li a {
  background-color: yellow;
  padding: 1em;
  border-radius: 12px;
  border: 1px solid black;
  text-decoration: none;
}
.navbar ul li:hover {
  background-color: orangered;
  cursor: pointer;
}
.navbar {
  width: 90%;
}
section {
  width: 75%;
}
.div {
  margin: 1em;
  border-radius: 12px;
  border: 1px solid black;
  font-size: 5em;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

JS CODE

The Most Important Part !!

document.getElementById('nav--bar').addEventListener('click', function (e) {
    e.preventDefault();
    const target = e.target;
    if (target.classList.contains('link--a')) {
        const id = target.getAttribute('href').slice(1);
        document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
    }
});

Now let's Focus on JS code and understand how each line works!

We are having this block of code at the top. This says that the document targets the element who is having the id "nav-bar" and adds an event listener on it which will listen to the event (click) on it. And if a click happens on that event then call the function which is having parameter e which will represent the event.

document.getElementById('nav--bar').addEventListener('click', function (e) {
});

2.The prevent Default function will prevent the auto-scrolling due to the anchor tag. And such help us to implement smooth scrolling. In the target variable, we will store the location at which point the click event happened so we can know that exactly on which link the user clicked.

e.preventDefault();
const target = e.target;

3.This if loop will help us to target only those clicks which are on elements having class "link--a".

if (target.classList.contains('link--a')) {
}

4.In variable id we will be saving the value given in href attribute of the element where the event (click) occurred. As we have given "#1" in href we need to cut the '#' and store the remaining value.

const id = target.getAttribute('href').slice(1);

5.This will now target the element which is having the id the same as the value stored in the id variable and apply the "scrollIntoView" method on it with smooth behavior as we mentioned in it.

document.getElementById(id).scrollIntoView({ behavior: 'smooth' });

This will give us output like this 👇🏻

Great 🎉 We have successfully implemented the smooth scroll!

You can check the difference between both these effects will give professional look to your website!

Normal	Smooth Scroll

STAY TUNED FOR MORE 😄
GET CONNECTED WITH ME

Twitter
LinkedIn

GirlScript Summer Of Code 2021 !! First Open Source Program !! 🤩🤩

Rohan Kulkarni — Tue, 01 Jun 2021 07:09:37 +0000

What is GSSOC?

GirlScript Summer of Code is the 3 month-long Open Source Program during summers conducted by GirlScript Foundation, with an aim to help beginners get started with Open Source Development while encouraging diversity. Throughout the program, participants contribute to different projects under the guidance of experienced mentors.

How to Get Enrolled?

You have to register as a Participant or as Mentor.

I have registered as a Participant. After getting selected I was informed by an Email and was asked to join Discord Server!

Project !!

There were 100+ Projects which were open for contribution with different tech stacks!! My major contribution was in Single Project SFC-Foundations Website.

SFC - Foundation is an NGO that is active in Northern India. The project was to create a new website from Scratch. I was having basic knowledge of Front-end Development so I selected this project to work on !!

Contribution Statistics ( Till 1st June 2021 )

Project :-

himanshu007-creator / SFC-foundations

SFC bringing change to the society. Drop a ⭐

SFC FOUNDATIONS

The SFC is a Youth NGO that has its roots in Tricity and Delhi. SFC inspires the younger generation to come forward to serve Mother Earth by igniting a spark in them. SFC is established to launch and nurture activities and programs which will reach the most impecunious and vulnerable people from our community. The motive is that Youth is the beaming future of our country and they are the ONLY ones who can change trite plots into buoyant podiums Hence our projects are designed keeping in mind the barbaric surroundings of our Society. With the help of our stalwart volunteers, we can focus on capacity-building activities rather than the traditional gap-filling initiatives. SFC is an organization of dedicated and staunch amateurs who are dead set at uplifting the unfortunate lots in our society and sheltering our Country. SFC has set up two more units (JALANDHAR,MUMBAI)✨

GitHub Page

…

View on GitHub

Commits:- 206 ( On 1st June )

Addition :- 44,311 ++

Deletions :- 15,429 --

Issues Created :- 81

Pull Requests Created :- 72 ( 70 Merged )

Learnings:-

-> Got Experience in Real-World Development
-> Learned to work with the group.
-> Workflow of GitHub
-> Learned how to set up a particular Project on Local System
-> Had a great Networking with Amazing Peoples!
-> Brushed Up My Skills of Front-end Web Development!

Get Connected with Me 🙂
LinkedIn
GitHub
Twitter

DEV Community: Rohan Kulkarni

GitHub Student Developer Pack

Let's see what GitHub says about it !!

How to get Github Developer Pack? ( Yeah the Most Important question )

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Benefits which I found Most Usefull Till Now 💡

GitHub Profile ReadMe ✅ The Second Resume 🤔

What is GitHub 🤔 ?

GitHub provides a special feature to display a file with the extension .md to display on the profile.

What things to include in Profile Readme? ( Personal Opinion 😬)

Let's Go through my Profile Rohan Kulkarni

Section 1 : Banner

Section 2: Intro ( A bit about yourself )

Section 3: Tech Stacks

Section 4: Projects ( THE Most IMPORTANT )

Section 5: Socials

Section 6: GitHub Stats

Finally Your GitHub ReadMe is Ready to be showcased 🥇

CSS Flex-Box Most Used Properties

What is CSS Flexbox?

How to Use Flexbox?

Let's Make this Flexbox now ⚡

Flex-Direction Property

Flex Wrap

Justify Content

Align Item

Align Self

Golden Tip 🥇

Conclusion

Analog Clock Using HTML,CSS & JS ⚡

Aim: To Develop an Analog Clock Like 👇🏻

HTML CODE

CSS CODE

JS CODE

Great we have created our own analog clock. I hope you enjoyed developing with me. Do tag me if this article helped you in creating your own analog clock and do share on socials !!

Implementing Smooth Scroll Using Javascript ⚡

Hello Everyone 👋🏻, today we will be looking at how to implement smooth scrolling behavior using the scrollIntoView property.

So what can we do for a smooth scrolling effect ?

HTML CODE

CSS CODE

This code depends on personal choices as this will affect the design part!

JS CODE

The Most Important Part !!

Now let's Focus on JS code and understand how each line works!

This will give us output like this 👇🏻

Great 🎉 We have successfully implemented the smooth scroll!

GirlScript Summer Of Code 2021 !! First Open Source Program !! 🤩🤩

What is GSSOC?

How to Get Enrolled?

Project !!

Contribution Statistics ( Till 1st June 2021 )

himanshu007-creator / SFC-foundations

SFC bringing change to the society. Drop a ⭐

SFC FOUNDATIONS

GitHub Page

Learnings:-

GitHub provides a special feature to display a file with the extension `.md` to display on the profile.