DEV Community: Hrushikesh Kokardekar

Creating a Loader with HTML and CSS

Hrushikesh Kokardekar — Sat, 12 Mar 2022 11:34:54 +0000

Creating a Loader for website is very simple and exciting thing.

Today in this post we will Make a Loader using HTML and CSS.

The main concept used here is @keyframes . @keyframes is used when we deal with animations. In simpler way it specifies what animation should happen at what value. You will understand here how to use keyframes.

As you can see in CSS I've used keyframes named spinnerLoad to rotate the div. The animation goes on for infinity.

You can improvise this by giving container as inline-block.

Hope you like it. meet You in the Next Post

Till Then Happy Coding 👨‍💻👨‍💻👨‍💻

To-Do List using HTML, CSS and JavaScript

Hrushikesh Kokardekar — Fri, 14 Jan 2022 03:17:52 +0000

Hello Developers 👩‍💻👩‍💻👩‍💻

Creating a To-Do List is a basic Application for a beginner . Today in this post we will be creating a basic To-Do List using HTML , CSS and JavaScript.

HTML will contain only certain Elements . Like input box to take user input , a button to add item. Codepen will be given below.

The Important part here is JavaScript. We will be using the concept of createElement() and appendChild() . createElement() is used to create a new HTML elements like "li", "p" and many more. appendChild()is used to append the created element as a child of specified HTML Element.

So the logic here is to create an new "li" (list item) HTML element and a "delete button" onclick of "ADD" button.

I've styled my To-Do List according to my own styling and code will be provided to you but it is more preferable to add your own styling .

You can see the Codepen below :

Hope You like the post and gained some knowledge.

You can Add more to this like giving an error message if user clicks on add button without entering any item in input box.

If you have any doubts you can ask in comment section.

Suggestions are always welcomed.

Meet You in Next Post
Till Then Happy Coding 👩‍💻👩‍💻👩‍💻

Blur Background Using CSS

Hrushikesh Kokardekar — Tue, 28 Dec 2021 04:07:24 +0000

This Post is Inspired By Adrian Twarog

Blur Background in any website looks amazing and attractive to users. But ever wondered how this blur is made ? Well the answer is "Easy".

Let's See how to make it.

First we add an image in the background and then give our body as display-flex . To set the blur effect in the center of image we give justify-content and align-item as center .

Now the div on which we give blur effective is in the center of our page . to give the blur effect we use backdrop-filter and give it as blur . So that's it . Our blur is ready .

Let's see our blur effect.

Now to enhance the content inside the blur I've added more styling.

You can have a look on my code and practice it .

So that's it in this post . You can see how easy it is to make and blur background .

So meet you next post .
Till then Happy Coding 👩‍💻👩‍💻👩‍💻

Light-Dark Mode Toggle Using CSS

Hrushikesh Kokardekar — Sat, 11 Dec 2021 05:27:44 +0000

This post is inspired by Online Tutorials

Hello Guys ✌️✌️✌️

We have seen the dark mode in our mobile and laptops. Ever wonder how this works .

Today in this post we will be making a simple dark mode toggle animation.

So lets Start 👩‍💻👩‍💻👩‍💻

Step-1 HTML

Only three div tags are required with id our class . And that's it with our HTML.

Step-2 CSS

Now the crucial part comes . You might be thinking from where the ".dark" class came from . You will understand this in Javascript part.

Step-3 JavaScript

Now as instructed in the video of Online Tutorials we need to take reference of the body and div. On clicking the togglebtn class , a new class ".dark" is made and toggled . To toggle a class means adding and removing a class. The dark class toggles the background color and the color of text.

You can see how this works :

So you can see how we've made the dark mode toggle using simple HTML, CSS and JavaScript.

So that's it for Today .
Meet you in the Next Post.
Till then Happy Coding 👩‍💻👩‍💻👩‍💻

Generating random Colors Using JavaScript

Hrushikesh Kokardekar — Fri, 03 Dec 2021 13:38:54 +0000

Hello Guys ✌️✌️✌️

Back after long time with another post.

Ever felt how cool it would be if random background colors would be applied to your page on just one click of button .

It is possible using Simple Javascript and few lines of code .

Lets start 👍👍

Step -1 : HTML
There's not much to write in HTML . You Just need to Create a an heading tag with an id . In this heading tag we will be printing the rbg value of the generated color. Second You need to create a button with an id . Also create a js file and link it in your html. That's It with our HTML. The HTML code is below :

Step -2 : CSS
Here I've applied some styling to the button created so that it looks good. You can add your own styling also. The CSS is below :

Step -3 : JavaScript
Now comes the important part . We would be using Math.random() . Math.random() generates a random number between 0 and 1. Math.floor() is another Math function that we are going to use . So the JavaScript Code is given below where I've created a functioned named generateColor() .

You can see the Output Below How it generates random colors onclick of the button .

So that's it for today .
meet You in next Post
Till then Happy Coding 👩‍💻👩‍💻👩‍💻

How to Embed JavaScript in Your HTML ??

Hrushikesh Kokardekar — Sat, 31 Jul 2021 15:00:39 +0000

How many of you like dynamic web pages ? Using HTML and CSS you can create and style static web page but you cannot perform actions on it. To make your web page dynamic JavaScript language is used.

JavaScript was created by Brendan Eich. It is a high-level, East to learn language use to create dynamic web pages. JavaScript is used to perform actions on elements like creating alert box on click of button. Performing some actions according to some condition by using if-else etc.

There are many such applications of JavaScript.

In JavaScript we select the element on which action is to performed by providing the id or class to it.

Let's see how to embed your JavaScript in your HTML.

Like CSS we have multiple ways to embed our JavaScript in your HTML.

Method - 1 Using script tag

Like we used style tag in the same file to add styling to our pages here we use script tag. Inside script tag we write our script and add JS in our HTML. You can see the code below. Don't worry about the script that I write inside the script tag.

Code :

Output :

You can see that without writing a single word inside the p tag how I printed "Welcome to JavaScript" . That's the uniqueness of JavaScript.

Let's see the second method

Method - 2 Creating Separate JavaScript file

Again like CSS we create a separate JavaScript file with extension .js . Now the question is how to link it in our HTML. So here again script tag is used. the src attribute is used to provide location of your JavaScript file. You can see the code below .

Code :

Output :

That's the Second Method of adding your JavaScript inside your HTML.

So that's it for today. Don't worry about the script that I wrote inside the script tag or js file.

In next post we will explore some more topic in JS .

Meet you next post 😊😊

Happy Coding 👩‍💻👩‍💻👩‍💻

How to add Images to Our page ?

Hrushikesh Kokardekar — Wed, 28 Jul 2021 14:38:03 +0000

Hello Guy's 😊

Here I am with one more topic that is "How to add Images ?". Images in web pages makes it more attractive to users.

In this post we will learn to add images to your webpage.

Let's Start 👩‍💻👩‍💻

Image is added using img tag in HTML. It consist of two attributes "src" and "alt" . "src" attribute is used to specify the path of image. If your image is in the same folder then you need to write"./" and select the image from the option. If your image is at a different location then you provide the complete path to the image. If you want to fetch image from some website then just provide the link in src attribute.

"alt" attribute is used to add alternate text. Sometimes it happens that your image is not loaded. At that time you can add alternate text to the image. You can see the code and follow it.

Output :

You Can also give height and width to the image. To do so you just need to add height and width inside img tag. You can refer the code below

You can add more styling to your image by writing style in img tag and add styling to your image.

So that's it for today. I know that this is a very small post but is an important topic. Try this at your end.

Meet you in the next post till then Happy Coding 👩‍💻👩‍💻👩‍💻

What is Anchor tag ?

Hrushikesh Kokardekar — Sun, 25 Jul 2021 05:09:01 +0000

Hello Guy's

I'm back with another post. As mentioned in my previous post that my next post will be on anchor tags. Hope you liked my previous post.

So let's start 👍

Let's take for example that whenever you visit any site it asks you to login. But sometimes it happens that you forget your password. So you click on the forgot password link which redirects you to another page.

Ever wondered how does it happens ??

It is done with the help of anchor tag.

Anchor tag means hyperlink. It is used to link one HTML page to another.

The main attribute in this element is href. In this href attribute we specify the location of the file. Whenever the user will click on the link, user will be redirected to the page that you have provided in href.

Let's see it practically 👩‍💻👩‍💻

HTML

anchor tag is created by writing just a letter in arrows. The href attribute is placed inside the a tag. You can see the code below.

Your hyperlink will be seen like this :

Now in the Above HTML code you might have noticed that I have written "#" in href attribute. this means that hyperlink will be created but will not redirect to any link.

It's time to add a file in href attribute.

Now there are multiple ways to give location. Select the file that you want to give in href and press right click copy the entire file location.

Now just paste the file location in href attribute.

Second method: If you have multiple files or folder in your project just write "./" in href attribute and you can see the files and folder. Just select it.

Now when you click on the hyperlink it redirect user to the new page that you gave in href.

You can see the output below:

So here how you can create a hyperlink in your page.

Give it try in your navbar. Just create some pages and place the file locations in href.

If you don't know how to create navbar have a look on my previous post.

See you in next post.

Happy Coding 👩‍💻👩‍💻👩‍💻

Creating Navbar Using CSS

Hrushikesh Kokardekar — Wed, 21 Jul 2021 05:14:23 +0000

Hello Guy's 😀😀

Welcome Back. Hope You are doing well.

Today we are going to build a Navbar using CSS. It will be a simple navbar and will be real fun for beginner's to create it.

So Let's Start 👩‍💻

Step 1: HTML
We are going to use nav tag . Nav tag is basically used for creating navbars. Inside the nav tag we need to use ul tag . ul means Unordered list. Further inside the ul we use li tag (li specifies list item). Now the question is how much li tag we need to give. The answer is very simple. The number of links you need to provide on navbar that many li tag should be given.

Now if are giving 4 links in our navbar we give 4 li tags. But writing li tags 4 times takes time. Don't worry there's a solution for that in vscode. just write "li*4" and press enter. And there's your 4 li tags. Isn't it amazing 😎.

Now as you need to provide links to your navbar so that user can go to the next page , we give a tag in each li tag. a tag is basically a linking tag which provides us the facility to link one html page to the other.

Don't worry about the a tag cause my next post will be on a tag only. There you will be more clear about it . So for present you can just see and refer my HTML code.

HTML Code:

Output:

So far now it doesn't look like navbar and the reason is obvious that we haven't applied styling to it. So let's begin with our styling.

Step 2: CSS

Firstly we need to style the nav tag. The navbar is horizontally spread over the screen . That means it has full width i.e. 100% . So we give width as 100% . Now the width is set to 100% but we need to give some height. In my case I've given height as 65px.
But the Navbar is still not visible . The reason is background color. You can choose background color of your choice and apply it.

Code for nav tag:

So now your output will look like this.

Now you can see that our basic styling of nav tag is done. But the issue is out text is not perfectly fitted in it . So let's solve this issue.

it's time to design our ul tag to deal with the text problem we are facing. You can see tiny circles at the left side of our text. We don't need them. So the remove this markers we use "list-style-type". list-style-type specifies how our list item should look . As we need to remove those marker we give list-style-type as none. Now when you see the output there will no markers at the left of our text.

Now we give margin and padding as 0 to ul .

Code for ul tag :

Now we want that our text should come inside the navbar . So for that we style our li tag. As you can see that text is vertically aligned and we want it horizontal. So we give li as float left. When you do this you will see a major change in your output. All your text is now inside your navbar. It should like this:

But they seemed to be less spacious. So for resolving this problem we give require some space to the left side of each list item. So we give margin-left as 10px. And now you will some space between text. Your Navbar will look like:

Code for li tag :

Now we are onto our second last step of styling our navbar. We so far have styled our nav, ul and li tag and you can see output as above. Now it's time to style our a tag. So far a tag I start by giving display as block. Display is the property which shows us the our element should look like. Block means it will take the whole width of that particular element to which it is applied. But you can see that the font is very small . So I will give font-size as 20px, text-color as white cause my background is dark, will apply some padding and margin from top. So far our navbar created should like:

Now still we can see a line below our text. To remove it we will give text-decoration as none. And Our Navbar is almost completed.

Code for a tag:

So our Navbar will now look like:

How cool it will look we give our navbar some hover effect. So now I will change the background color for my each a tag on mouse over.

Code for hover effect:

But still there is one issue. There some spacing from all four side of our navbar. So to deal with it at the start of our CSS code we will give margin and padding as 0 to our whole body.

Code for body:

So that's it with our code and now our Navbar is ready.

So that's it for today and meet everyone in the next post 😊😊
Till then Happy Coding 👩‍💻👩‍💻👩‍💻

CSS Hover Effect

Hrushikesh Kokardekar — Fri, 16 Jul 2021 12:06:50 +0000

Hello Guy's and Welcome to another topic on CSS.

How many times have seen on any website that whenever you move your cursor on any button the color of button changes or the size of the button increases or decreases. And as you move away your cursor from the button , the button regains it's previous property.

How Cool is that!!!

This is all done with the help of CSS Hover Effect!!!

Using CSS property you can apply styles on an element on mouse over.

Today I will be showing you how to use hover effect and will also talk about transition property and will be showing you how to convert a square into a circle on mouse over.

Let's Start 😎😎

As I will be converting a square into a circle therefore I need to start by creating a square .

Step : 1 HTML
In your html file inside the body tag create one empty div as shown below.

Step : 2 CSS (Creating Square)
In your stylesheet or style tag write the div element and give it height, width, border, background-color and margin. You can see the snippet of the code below .

You might have noticed that along with other properties I've also used a property "transition".
Basically transition property is used perform some changes smoothly according to the time you have given . You can see that I've given duration for width and height as 8 seconds. This means my width height will require 8 seconds to change to it's new value. So that's was about transition property but we still have lot of work to do.

So now our Square is created and should like:

Step : 3 CSS (Hover)
Syntax for hover property is element:hover. In our case the element is div . So our code goes as follows:

Now another new property that I've used is border-radius. This property provides us to style corner's of selected element. So by providing border-radius as 50% all the corner's of our square will be styled and it will be converted into circle.

So that's it with the code and it's time to see our square get converted into circle.

Let's see the output😎😎 :

So I think that you all are clear with the code and also some topic covered. We saw some properties like transition and border-radius properties that are very much helpful in styling.

If you all want to know about the Types of CSS then please have a look on my previous post.

So that's it for Today and will meet you all in next post 😊😊.
Till then Happy Coding 👩‍💻👩‍💻.

Types of CSS

Hrushikesh Kokardekar — Wed, 14 Jul 2021 13:18:56 +0000

Styling is an important aspect for designing your Website. Website should look attractive and eye-catching to the users.

CSS - Cascading Style Sheet is used to style HTML webpages. CSS has many such properties that makes webpage more elegant.

1. Inline CSS:

Inline CSS is used when we need to design a particular tag of
our page. The style attribute is used within the tag which is
need to be styled.

Code:-

Output:

2. Internal CSS:

Internal CSS is mostly used to design a single webpage. The style tag is used within the head section to apply CSS properties. Inside the style tag the element/class/id which is to be styled is written an style is applied on it.

Code:-

Output:

3. External CSS:

In this method an external stylesheet is created. Now the question is how to link it with the html page on which styling is applied. The solution is link tag. The link tag is placed just below the title tag .

Code:-

style.css:

Output:

That's it for Today. Meet you soon with next post.