DEV Community: Nikhil Chandra Roy

CSS easiest way to change the checkbox,range, radio color

Nikhil Chandra Roy — Mon, 09 Oct 2023 15:42:45 +0000

accent-color: red

this will change checkbox,radio,range color quickly.

HTML CSS clickable tab-pane (No Javascript)

Nikhil Chandra Roy — Thu, 29 Jun 2023 09:12:42 +0000

HTML CSS Image split 3d hover effect

Nikhil Chandra Roy — Thu, 29 Jun 2023 08:44:52 +0000

Background Toggle with clip path only HTML and CSS

Nikhil Chandra Roy — Thu, 29 Jun 2023 08:39:58 +0000

Windows 10 loading only HTML & CSS

Nikhil Chandra Roy — Thu, 29 Jun 2023 08:21:17 +0000

Comeback Strong: Strategies for Improving Your Web Development Skills after a Break

Nikhil Chandra Roy — Fri, 20 Jan 2023 12:22:23 +0000

Taking a break from web development can be beneficial for your well-being, but it can also make it hard to get back into the swing of things. In this post, we will explore various strategies for improving your development skills after a break and getting back to work as a web developer. We will cover topics such as refreshing your knowledge of the latest technologies, staying up to date with industry trends, and building a strong network of fellow developers. Whether you've been away for a week or a month, these tips will help you hit the ground running and become a more effective and efficient developer.
Topics:
• Refreshing your knowledge of the latest technologies
• Staying up to date with industry trends
• Building a strong network of fellow developers
• Setting goals and creating a plan
• Finding inspiration and motivation
Sections:
• Introduction
• Refreshing your knowledge of the latest technologies
• Staying up to date with industry trends
• Building a strong network of fellow developers
• Setting goals and creating a plan
• Finding inspiration and motivation
• Conclusion

Refreshing your knowledge of the latest technologies

One of the most important things you can do to improve your skills as a web developer after a break is to refresh your knowledge of the latest technologies. This can be a daunting task, as technology is constantly evolving and new tools and frameworks are always emerging. However, by taking the time to familiarize yourself with these new technologies, you'll be able to stay competitive in the job market and offer more value to your clients.

There are a few different ways you can go about refreshing your knowledge of the latest technologies, such as:

Online tutorials and courses: There are a plethora of free and paid online tutorials and courses available that can help you learn about new technologies. Websites like Codecademy, Udemy, Coursera, and freeCodeCamp offer a wide range of web development courses that can help you catch up on the latest tools and techniques.

Reading blogs and articles: Following blogs and articles written by industry experts can be a great way to stay up to date with the latest trends and technologies. Websites like DEV.to, Medium, and Hacker Noon are great places to find informative and engaging articles on web development.

Attend to conferences and meetups: Attending conferences and meetups can be a great way to learn about new technologies and network with other developers. Websites like Meetup.com and Eventbrite can help you find web development-related events in your area.

Experiment with new tools and frameworks: Finally, the best way to learn about new technologies is to experiment with them yourself. This could mean building a small project using a new framework or tool, or simply playing around with some sample code.

By taking the time to refresh your knowledge of the latest technologies, you'll be better equipped to take on new projects and offer more value to your clients. Remember to keep in mind that, you don't need to learn everything all at once, take your time and focus on what you feel is most important or relevant to your current work.

This is just an example, you can add more details, examples and resources to make it more informative. Additionally, you can also add some tips and tricks that you personally found useful while refreshing your knowledge of the latest technologies.

Staying up to date with industry trends

As a web developer, it's important to stay up to date with the latest trends and developments in the industry. This includes new technologies, design trends, and best practices. By keeping abreast of the latest trends, you'll be able to offer more value to your clients and stay competitive in the job market.

Here are a few strategies for staying up to date with industry trends:

Follow relevant social media accounts: Following relevant social media accounts, such as those of popular web development blogs and influencers, can help you stay up to date with the latest news and trends. Twitter, LinkedIn and Facebook are great platforms to follow the industry experts and influencers.

Participate in online forums and communities: Participating in online forums and communities, such as DEV.to, Stack Overflow and GitHub, can be a great way to learn about new technologies and best practices.

Read industry publications: Reading industry publications, such as Smashing Magazine, A List Apart, and Webdesigner Depot, can help you stay up to date with the latest design trends and best practices.

Attend web development events: Attend web development events, such as conferences, meetups, and workshops, can be a great way to stay up to date with the latest trends and meet other developers.

By staying up to date with the latest industry trends, you'll be better equipped to take on new projects and offer more value to your clients. Remember, you don't have to follow all the trends, pick what's relevant to you and your work, and focus on that.

Building a strong network of fellow developers

As a web developer, having a strong network of fellow developers can be incredibly beneficial. Not only can it help you stay up to date with the latest trends and technologies, but it can also provide you with valuable support and resources.

Here are a few ways to build a strong network of fellow developers:

Attend web development events: Attend web development events, such as conferences, meetups, and workshops, can be a great way to connect with other developers and learn about new technologies.

Participate in online forums and communities: Participating in online forums and communities, such as DEV.to, Stack Overflow, and GitHub, can be a great way to connect with other developers and learn about new technologies.

Join a study group or mentorship program: Joining a study group or mentorship program can be a great way to connect with other developers and learn from more experienced professionals.

Collaborate on open-source projects: Collaborating on open-source projects can be a great way to connect with other developers and work on real-world projects.

Connect with fellow developers on social media: Connecting with fellow developers on social media, such as Twitter and LinkedIn, can be a great way to stay connected and learn about new technologies.

Having a strong network of fellow developers can be incredibly beneficial for your professional growth as a web developer. Not only you can share your knowledge and experience with others, but you can also learn from them and get valuable feedback.

Setting goals and creating a plan

When it comes to improving your web development skills after a break, setting goals and creating a plan can be incredibly helpful. Having clear, measurable goals can give you something to work towards and help you stay motivated. Additionally, having a plan in place can help you stay organized and on track.

Here are a few steps to help you set goals and create a plan:

Assess your current skills: Take stock of your current skills and identify areas where you feel you need to improve.

Set clear, measurable goals: Set clear, measurable goals for yourself, such as learning a new programming language or framework, or building a specific project.

Create a plan of action: Once you have your goals in place, create a plan of action for achieving them. This could include identifying specific resources to study, setting a schedule for working on your goals, and determining how you will measure progress.

Track your progress: Regularly track your progress and make adjustments as needed.

Celebrate your successes: Celebrate your successes along the way, no matter how small they may be.

Setting goals and creating a plan can help you stay organized and motivated, and make it easier to achieve your goals. It's important to remember that goals and plans are not set in stone and are subject to change. It's okay to adjust them as you go along and find what works best for you.

Finding inspiration and motivation

When it comes to improving your web development skills after a break, finding inspiration and motivation can be crucial. It's easy to get discouraged and lose motivation when you're trying to learn new skills and improve your abilities. However, by finding inspiration and staying motivated, you'll be better equipped to achieve your goals.

Here are a few ways to find inspiration and motivation:

Surround yourself with positive influences: Surround yourself with people who are supportive, encouraging, and positive. Whether it's friends, family, or mentors, having people who believe in you can make all the difference.

Learn from others: Look for inspiration and motivation in the work of other developers. Follow the work of people you admire, read their blogs, and watch their videos.

Set small and achievable goals: Set small and achievable goals for yourself, and celebrate your successes along the way. This will help you stay motivated and see progress.

Reward yourself: When you achieve a goal or make progress, reward yourself. It can be something small like a cup of coffee or something bigger like a trip.

Take a break: Don't be afraid to take a break when you need it. Sometimes, a change of scenery or a short break can do wonders for your motivation and inspiration.

Finding inspiration and motivation can be challenging, but by keeping these tips in mind, you'll be better equipped to stay motivated and achieve your goals. Remember to be patient with yourself and to not compare yourself with others. Every journey is different, and you should be proud of your own progress and achievements.

Password view toggling only html and css

Nikhil Chandra Roy — Tue, 17 Aug 2021 17:18:27 +0000

I got this resource from stackoverflow,
I found 2 ways to toggling password view
like using ' -webkit-text-security: disc;' css property and font-family way.
Here is the resource:
https://stackoverflow.com/questions/17769429/get-input-type-text-to-look-like-type-password

Thanks,

Uncaught TypeError: Cannot read property 'innerHTML' of null (solution)

Nikhil Chandra Roy — Mon, 31 May 2021 04:19:31 +0000

Recently I develop some static pages and got few pages Uncaught TypeError: Cannot read property 'innerHTML' of null or similar kind of issues.
Issues coming when something missing like classes, selector in some pages but we are calling each portion of JavaScript to perform all the pages.

 <h2 class="">Hello World</h2>

    <script>
        let demo = document.querySelector('.demo')
        console.log(demo.innerHTML)

    </script>

issues coming when I am calling demo class but there are no demo class in Dom. So, in this moment javascript throwing TypeError.

but, if we make it short with just logical operators && it's not giving any TypeError. For example,

let demo = document.querySelector('.demo')
        demo&&(
            console.log(demo.innerHTML)
        )

Thanks.

Windows 10 startup loading only HTML & CSS

Nikhil Chandra Roy — Wed, 05 May 2021 07:56:27 +0000

Windows 10 startup loading only HTML & CSS

Windows startup loading is a common thing.
Whenever we start our computer we get the loading of windows.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="plate_wrapper">
        <span></span><span></span><span></span><span></span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" class="lds-microsoft" width="80px" height="80px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="rotate(0)"><circle cx="81.73413361164941" cy="74.35045716034882" fill="#ffffff" r="5" transform="rotate(340.001 49.9999 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="0s"/>
      </circle><circle cx="74.35045716034882" cy="81.73413361164941" fill="#ffffff" r="5" transform="rotate(348.352 50.0001 50.0001)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.0625s"/>
      </circle><circle cx="65.3073372946036" cy="86.95518130045147" fill="#ffffff" r="5" transform="rotate(354.236 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.125s"/>
      </circle><circle cx="55.22104768880207" cy="89.65779445495241" fill="#ffffff" r="5" transform="rotate(357.958 50.0002 50.0002)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.1875s"/>
      </circle><circle cx="44.77895231119793" cy="89.65779445495241" fill="#ffffff" r="5" transform="rotate(359.76 50.0064 50.0064)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.25s"/>
      </circle><circle cx="34.692662705396415" cy="86.95518130045147" fill="#ffffff" r="5" transform="rotate(0.183552 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.3125s"/>
      </circle><circle cx="25.649542839651176" cy="81.73413361164941" fill="#ffffff" r="5" transform="rotate(1.86457 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.375s"/>
      </circle><circle cx="18.2658663883506" cy="74.35045716034884" fill="#ffffff" r="5" transform="rotate(5.45126 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.4375s"/>
      </circle><animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;0 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s"/></g></svg>
</body>
</html>

for svg we collected it from Loading.io

CSS

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 500px;
    height: 100vh;
}
.plate_wrapper{
    width: 200px;
    height: 180px;
    transform: rotateY(-33deg);
}
.plate_wrapper span{
    background: #00E7FF;
    display: inline-block;
    width: 50%;
    height: 50%;
}
.plate_wrapper span:nth-child(odd){
    border-right: 4px solid #000;
}
svg{
    position: absolute;
    bottom: 10%;
    transform: scale(.7);
}

If you need more kind of tutorial stay with me,
I will do more tutorials with HTML and CSS only.
Thanks.

HTML CSS Image split 3d hover effect

Nikhil Chandra Roy — Tue, 04 May 2021 09:40:58 +0000

HTML CSS Image split 3d hover effect

CSS is making images split into 4 items with background size and position.
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="image_3d">
        <span></span><span></span><span></span><span></span>
    </div>
</body>
</html>

and

CSS

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    display: grid;
    place-items: center;
    height: 100vh;
}
.image_3d{
    perspective: 1000px;
    width: 960px;
    height: 640px;
    box-shadow: 3px 5px 25px 8px rgba(0, 0, 0, 0.2);
}
.image_3d span{
    display: block;
    height: 160px;
    transition: 1s;
    transform: rotateY(0deg);
}
.image_3d:hover span{
    transform: rotateY(360deg);

}
.image_3d span:nth-child(1){
    background: url('./child-5582985_960_720.png') 0px 0px/cover no-repeat;
    transition-delay: 0s;
}
.image_3d span:nth-child(2){
    background: url('./child-5582985_960_720.png') 0px -160px/cover no-repeat;
    transition-delay: .1s;

}
.image_3d span:nth-child(3){
    background: url('./child-5582985_960_720.png') 0px calc(-160px * 2)/cover no-repeat;
    transition-delay: .2s;

}
.image_3d span:nth-child(4){
    background: url('./child-5582985_960_720.png') 0px calc(-160px * 3)/cover no-repeat;
    transition-delay: .3s;

}

this is actually tricky to make image splitting.
You can see image properties size it has width: 960px; height: 640px;
so here is the trick.
Just making span tags we can split by doing their background-position and background-size.
If you like this tutorial, don't forget to share your thoughts.
Bye.

Background Toggle with clip path only HTML and CSS

Nikhil Chandra Roy — Tue, 04 May 2021 09:22:56 +0000

Background Toggle with clip path only html css

In this tutorial, I have used only HTML and CSS.
for background transition effect I have used clip-path generator

HTML

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input type="checkbox" name="" id="check">
    <label for="check">
        <i class="fas fa-sun"></i>
        <i class="fas fa-moon"></i>
    </label>
    <main></main>
</body>

</html>

for icon I have used font-awesome icons.
when toggling it will show sun and moon with black background.
CSS

*{
    box-sizing: border-box;
    margin: 0;
}
label{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 35px;
    background: #7d68ee;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    cursor: pointer;
}
label .fas{
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    transition: .5s;
    color: white;
}
label .fa-moon{
    opacity: 0;
}
input:checked ~ label .fas{
    left: 70%;
}
input:checked ~ label .fa-sun{
    opacity: 0;
}
input:checked ~ label .fa-moon{
    opacity: 1;
}
input{
    display: none;
}
main{
    background: #000;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100vh;
    transition: 1s;
    clip-path: polygon(80% 0, 100% 0, 100% 12%, 100% 20%, 98% 3%, 82% 0, 65% 0);

}
input:checked ~ main{
    clip-path: polygon(0 0, 100% 0, 100% 12%, 100% 100%, 0 100%, 0 89%, 0 38%);
}

If you like my tutorial, don't forget to share your thought.
Thanks.

Easy way to make text gradient color css

Nikhil Chandra Roy — Sun, 25 Apr 2021 17:11:45 +0000

I was browsing a website and got the point to make a text gradient color, it's just a simple post.

for HTML text

<h1> Hello World </h1>

and CSS

h1{
  background: linear-gradient(red 30%, green, blue) center/cover no-repeat;
  color: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

2 new css property is

-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

Thanks.