DEV Community: Lakshita Kumawat

The Mistakes of Learning Programmers

Lakshita Kumawat — Thu, 31 Jul 2025 09:31:33 +0000

Hi there! 👋

After a long time, I'm finally writing a post — and I’ll also tell you why. It’s about a mistake that broke my confidence, and I don’t want any other learning developer to face the same.

The Mistakes Learning Programmers Make

There are many mistakes developers face while learning, but I want to talk about my mistake — one I can't forget. Sadly, I see many other devs making the same one. 😕

We all know new languages and libraries are released almost every day. Some of them become popular, and beginner devs get attracted to them. They jump in and start learning something new, while leaving the language they were already learning incomplete.

It’s the same as abandoning an old project because it became “too complicated,” and starting a new one instead of finishing what you started.

This is called shiny object syndrome — where your mind constantly chases trendy new things.

In my case, after learning JavaScript, I jumped straight into React without building beginner-level projects — just because React was popular. That was my second big mistake: not building projects after learning a language.

Projects are the best way to test your knowledge. Plus, they’re actually fun to build! 😁

While I was still learning React, someone asked me to build a website using Next.js. So I started learning that. Then they asked me to convert it to Astro — so I began learning Astro too… and ended up leaving it halfway. 😑

After that, I got distracted by React Three Fiber (a library for creating 3D websites — because 3D websites look so cool 😅). I learned a lot, but eventually I found myself confused:

"What should I continue with? React? Next.js? Astro?"

I chose to stick with React for a while, but eventually I stopped touching my PC cause I realized I couldn't even make a simple project anymore. That was a low point for me. 🤧

💭 Why I Started Again

After a few months, I asked myself: Why did I start coding in the first place?

Because I love computers. Because I want to learn more.

Because I want to become the best programmer I can be — and I knew I couldn’t just quit.

So I went back to the basics. I started watching tutorials again, and I began building JavaScript projects.

Right now, I’m focused on getting better at JS — and then, I’ll come back to React. 😤

✅ Conclusion

I don’t want other devs to make the same mistake I did.

My basics weren’t strong, and I kept getting distracted by every new library that came along. 😞

Now, I’ve promised myself — i will never do this mistake again. I will build strong foundations first, and then move forward.

I hope other devs reading this will avoid the mistakes I made.

Thanks for reading my post, and happy coding to all! 🌈

A Minimal but Awesome We_Coded Landing page

Lakshita Kumawat — Sat, 22 Mar 2025 12:00:12 +0000

This is a submission for the WeCoded Challenge: Celebrate in Code

My WeCoded Landing Page

For this challenge, i made a minimal landing page with big font(cause big font looks good). I cant miss such a big challenge😊. I edited the post because i made some changes in ui.

Demo

You can click on the link to view the website and project.

Demo Link: click here

Project Link: click here

Screenshot:

How I Built It

I built it with html, css and javascript

1) Html: for making structure of website.

2) Css: for styling purposes and animation. I used the color and images given in the post. Also,all svg used in project in taken from svg repo.

3) Javascript: for fetching articles from the api, pagination and also for starting text animations (which I watched on youtube 😅).

Features

1) Responsive design
2) Animations for header
3) Go to top button
4) A Responsive bento grid
5) Fetch article data from api

I have tried my best for this challenge like the always.
Thank you to visit my post 😊. Happy coding 🌈

Is there Any Unique Project Ideas left?

Lakshita Kumawat — Sun, 26 Jan 2025 05:39:56 +0000

Hi dev! We all know that to become a good dev we need to be unique in this competitive world and we all try to make new projects which helps people.

But when it comes to projects, some dev says you should make clones of popular apps and some says you should try to make somethings unique.

What problem I am facing

As a learning webdev, I think making clones of popular apps is a great way to get experience.

But the problem is unique ideas. Not only me but other learning devs also face the same problem to get unique ideas.

When I think to make something unique, no ideas comes in my mind cause there are many things which are already built.

For example, if you search a notes app in playstore, then you can see thousands of app which are almost same, just with some different features.

There are thousands of softwares and app which are already built and its hard to find somthing unique for learning devs like me. When i think about an idea and search it online, its already made.

And that why, I want to ask all the dev, how you get ideas of unique project? Which unique projects you have built yet? Or you are also like me, who is looking for a unique idea that people will remember you for? Comment your answer. It will help a lot

Also happy coding🌈

Typescript setup and Basics

Lakshita Kumawat — Sun, 01 Dec 2024 05:27:37 +0000

Introduction

Hi there! In this post we are going to dive in the basics of typescript💧. So without wasting time lets get started ⏱️.

Setup

Before starting lets setup.

1) Open the terminal

npm install -g typescript

This will download typescript in your pc. If you already install typescript then you can also check your version with

tsc -v

2) Make a folder for code.

You can make the folder anywhere.
And now open it with vscode or any editor you use. Now, create index.ts file.

3) Initialize typescript

Open the terminal in the same folder and write

tsc init

And now its done. Lets get to coding. Also if you are using vscode you can install code runner extension for running the file output.

What is Typescript ?

TypeScript is JavaScript with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Now you will say ok I get but I dont get it 😅

For now just keep it mind that typescript is javascript with type.

Now lets first write a small ts code then discuss about the difference between Ts and Js

Write the first typescript code

Now, open your index.ts file and write the code

  let str : string = "Hello world";
  console.log(str);

In this code we are just making a variable str and annotating it with :string . If you add :stringwith any variable then you can only set a string value to that variable.

It means that we are giving the str variable a type of string. And this is called type annotation. Thats why typescript is javascipt with syntax of type.

Dont worry about the code right now. We will cover everything one by one and also the type annotation again for a better understanding with defination.

Now lets check the output. Simply open your vscode extension and search code runner extension and download it. Now click on the play button on the top right side of the screen. So you will see the result that is Hello world. And that the first typescript code.

Difference between Ts and Js

Now, I think after writing the first code you have understand the difference that in type script we define type to the variable like string, number, boolean, etc.

Those who have learned languages like C or C++ can relate that when we define a variable then we write int , str , etc. to set the variable type and then we cant assign any another value to that.

But now you will think is it only limited to variable? So the answer is No. It is not limited to variable. You can set type on function, object, and much more. Also you can also create your own type!

Now, you will be like we want more examples🧐. Ok, lets annotate the function parameters.

    function add(x:number, y:number){
        return x+y;
    }
    const res= add(4,5);
    console.log(res);

Now, check the output. It should be 9. So here we are annotation mean defining type of number to the add function parameter. But if you give a string inside the add parameter then you will get an error.

Also, if you give less parameter to a function then you will also get a error.

Thats, a big advantage that it will give you an error if you put a wrong value or give less parameter then required. And you dont need to look for those small bugs. It also make the code maintainable. That why we use typescript 😁.

Conclusion

So in this post we learn about typescript from beginning and learned how to install it, difference between ts and js and also the advantage. We also write the first code.

Now, I think it is clear why we use typescript. Some people might bored reading that long post😅. If you have any doubt you can ask. And also suggest for the next post ideas in the comments.

My Experience Of First Time Participating in Hacktoberfest 2024

Lakshita Kumawat — Sat, 26 Oct 2024 15:41:08 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Contributor Experience

🔥 Introduction

This was my first time to participate in hacktobefest and also the first time I participated in a open source competition. I learned a lot from it and I am happy that my 2 pr has been accepted😃

❄️ How I heard about hacktoberfest?

I heard about it from DEV community. As I love to participate in competiton organised by DEV community, I was looking for the upcoming competition and I found hacktoberfest competition. After that I google about it and find more information about it.

I also found some video of unboxing hacktoberfest 2022 swags. But I was a bit sad about hearing that this time the participates will only get digital badges cause I never get any swags on completing competition (actually this was my first time participating in a big competition and i want to flex them to my friends😅)

⚡️ My journey

I want to share one thing. Before participating in this competition, when I saw a repo with many contributers I thought that they first form a team and only the members can contribute. Well, I was wrong about that 🤔.

Also I dont have idea about how to forking a repo or how to create a branch and the idea behind it. Also for updating my repo I use the vscode feature

Now lets come on the point 😅

⭐️ Registeration

I registered for hacktoberfest on 13 october cause I was a little busy. After registering, I start finding a repo for contribution. I spend the whole day looking for the project 🥲.

✨️ Finding a Repo for Contribution

I want to contribute in a repo which are popular but when i saw the issue i was like what the hell is this?🥹 SDKs, unit test, bugs, etc. You know what i have 1 and half year experience but i have spend much time in frontend. I also learned nodejs and express but i haven't worked much with Api and those repos also have some modules that i never heard of. All this opened my eyes 😶. Now, i feel i am a bad programmer 😭. But when you are a student, you dont get enough time for coding 😮‍💨.

So, my whole day was waste. On the second day, I finally find a repo named Mid West Pumkin. And i get assigned for responsive layout. I was very happy about that 🥳. This was the first time I was assigned. Then, the next day I complete the work and send the first pr. My second pr was also on responsive layouts . The third issue was adding a dark mode with local storage. I choose this because i never worked with local storage before.

My first three prs was on the same repo. Later, I found a repo named Mini-projects. I made a password strength checker and send a pr and it was also accepted 🥳.

🎉 Achievements

After my first pr was accepted by the maintainer, I got a badge on github. It was the pull shark. I was very happy to get my first badge🤩. Also my two pr has been accepted and a got level 2 hacktoberfest badge. Now, I am waiting for my remaining two pr to be accepted 🔥

🌈 Conclusion

It was a nice experience. I see many troubles and issue but at the end I was able to submit 4 prs. Now, I hope my remaining two pr will be accepted too. Then, I can say with proud that a made a difference 🔥. I know my contributions are very small but it was the first time. But dont forget that Quantity is fun but Quality is key 🔑. This quote help me at every point in the competition. And a big thanks to Digital Ocean for organising Hacktoberfest ♥️

Happy coding 🎉

Game Loop - One Byte Explainer

Lakshita Kumawat — Tue, 24 Sep 2024 06:25:58 +0000

This is a submission for the Web Game Challenge: One Byte Explainer

Explainer

In simple words, Game loop is like when you play a pokemon rom, you have to battle with the Gym leader until you win. This sometimes become annoying 😮‍💨

Additional Context

Not only battle but every step in a game is game loop. There are different type of game loop . In a game loop, the main process are input, update and render. These process makes the game playable.

Its like when you hit a key, the program will look for the function and then render the result.

For a more better example, when you press W on a keyboard, the program moves the player one step upwards and then changes the player current position to new position.

That's how it works in simple word 😁 Hope this post will help you 😊

Html Canvas - One Byte Explainer

Lakshita Kumawat — Fri, 20 Sep 2024 04:12:15 +0000

This is a submission for the Web Game Challenge: One Byte Explainer

Explainer

Html canvas is just like a painting canvas🌈. The difference is that you cant use brush on it 🖌. But not only graphic, you can make video effect and game too!

Frontend Challenge: Space Edition

Lakshita Kumawat — Fri, 13 Sep 2024 18:32:18 +0000

This is a submission for Frontend Challenge v24.09.04, Glam Up My Markup: Space

What I Built

Do you want to learn about space?you are at right place. You can learn about space from this website. This is a website made with html, css and javascript💫

Demo

Demo : https://lakshita-kumawat.github.io/Frontend-Challenge-Space-Edition/

Github : https://github.com/Lakshita-Kumawat/Frontend-Challenge-Space-Edition

Journey

For this project, I first imagined the look of the website. I think it will not look good but it turned out better than my expection. For the header background I used a video which I found in pexels website. For the animation, I use gsap and also used swiper.js for the first time. I have completed this website in the last day🥵 so I was not able to add much elements but I have tried to keep the code clean and the website is also responsive

Conclusion

I have learned new things from this competition and great memory for me and I think the website look good. Thank you for this challenge dev community🙂

My Favorite Recration : The Cat in the Room

Lakshita Kumawat — Fri, 02 Aug 2024 08:44:18 +0000

This is a submission for Frontend Challenge v24.07.24, CSS Art: Recreation.

Inspiration

For my favorite recreation, I made a cat in room and the items in the room express my opinion towards programing. I know that cat does not looks like a cat 😅 but I tried my best and I think it is looking cute.

Demo

You can see the website live from here and can see the code on my github.

Here is the image:

Journey

For this project, I used pure html and css. I used divfor all the items in the art and add styling to them. I make sure that it will look good on all device. I was confuse which things I should add in it. For this time I try to make it simple but that have much fun. I enjoyed it a lot!

Conclusion

I know my art look simple and small but it was much fun in making it. I have tried to express my opinion towards programming. I hope you liked it

Glam Up My Markup Submission

Lakshita Kumawat — Thu, 01 Aug 2024 16:55:43 +0000

This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

What I Built

For this challenge, I built New York Cricket League website. I dont know much about cricket but I have tried my best to make it better. I have put much efforts in this website

Demo

You can see it live from here and visit my code on github.

Here are the images of website. I have modified and added a form in the join section which is not in these image:

Journey

For this website, I used pure css and javascript. I also used gsap library of javascript for the scroll animations. This is the first time I have used gsap library but I tried my best for the animations. I learned much about javascript from this challenge. I take the images from freepik and pngwings.
I was not able to add more features in the website due to some reason so it looks simple but it was fun to participate!

Conclusion

This is the first time I have participated in a challenge but it was fun. I have learned much from this challenge. I have done my best for this website. So hope you will like it!

How to make Animation in Css?

Lakshita Kumawat — Sun, 14 Jul 2024 10:53:32 +0000

Introduction

Today I will tell you how to make animation. We will see all the necessary animation property in this post. You can get the code on my github. So Let's Get Started!!

Animation

Animation are the property use to enhance the look of the website. It give a nice user interference and also use to show people the goal of the website.

A Basic Animation

First Animation: Changing the color of a square

<div id="square">Square</div>

Here I make a square of blue color and then give it some styles. You can take any color!

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

Now we will make a animation.

Step 1: Make animation @keyframes

To make a animation You need to set @keyframes. It hold what styles you want to give to your element at a certain time and then you need to give it a name. I my case I am changing the color of square. So, I give it a name color. Now, You can write @keyframes in two type like

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

If you want to perform a animation which has two steps you can use to and from. Or you can do it by using percentage value like

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

Percentage values are use when you have to do multiple task in the animation but you can use both! I usually use percentage value for an animation

Step 2: Set animation property on the square.

Now, we will animation property on the square. You need to know about the properties of animation for that. I will tell you those which are mostly use:

animation-name - It is use to tell the browser which @keyframes you want to use. In my case, my @keyframes name is color.
animation-duration - It is use to tell in how much time the animation should be finished.
animation-iteration-count - It is use to tell how many time it should execute.

You can learn more about animation on w3school or on any another website. Now, we will use the animation property but we will write it in a single line like this:

    animation: color 4s infinite;

There are 7 property in animation in Css. For using the animation property in single line, I first write animation-name that is color, then animation-duration which is 4s in my case and then set animation-iteration-count to infinite. If you want to use the animation only one time, you can set it to 1 . You can also set the values of animation property by your self.

Now, if you see your square, it will change its color again and again! Now, we will make the square it move while changing the color.

Second Animation: Moving the square while changing the color!

For that I will use the same square and I will make an another @keyframes for that. We will use the same steps like before

Step 1: Make animation @keyframes

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

Here, I make a @keyframes with the name move and I use three steps for this animation. First I set the left to 0px and a background-color. Then at 50% I set left to 300px and change the background-color and at last, I again set left to 0px, so that it will come on the first position.

Step 2: Set animation property on the square

    animation: move 4s infinite;

Here, I set the animation-name to move, then animation-duration to 4s and animation-iteration-count to infinite. Again you can set the animation value according to your choice. And also don't forget to comment the first animation property or things can go wrong!

Conclusion

As the post is already too long so we will continue it on another post. For now, it is enough for today. I hope you understand it. I try my best to tell all the things about animation. And also tell me in the comments on what topic I should write my next post. Thankyou for reading!

How to make a Parallax Effect with Html, Css and JS

Lakshita Kumawat — Sat, 13 Jul 2024 17:15:47 +0000

Introduction

Parallax Effect enhance the quality of a website. Today I will tell you how to make a parallax website in a few steps. You can use my asset to make the website and visit my parallax website on github !

Let's Get Started:

Step 1: Write html code

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <section id="hero-section">
            <div id="moon"></div>
            <img src="/images/haunted.png" alt="haunted house">
            <h1 id="text">Parallex Website</h1>
            <img src="/images/hands.png" alt="hands">
        </section>
        <section id="content">
            <h1>Parallex Website</h1>
            <p>Dummy text. Make sure the content is long enough so that the visitor is able to scroll the website</p>
        </section> 
    </main>
    <script src="script.js" defer></script>
</body>
</html>

Here I create a basic html document in which there are two section. One is for the images and second for the content. I have give id to both section so that I can select them easily. Keep in mind to arrange your assets images properly. If you arrange a big image before the smaller once, then the smaller image will hide behind it. Don't forget to link your css and javascript document.

Step 2: Defining Css document

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(12, 10, 20);
}
#hero-section{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Firstly, define the hero section styling. You should use the same styling so that all your content will be at the center. You can also set background color according to your assets.

#hero-section img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40rem;
    pointer-events: none;
}

Now, the images styling. We use left and top to zero so that every image is align in the left and top side. This will do the trick to style the images. Here, I use height to 40rem because my image was very big. You have to set the width and height according to your images.

#hero-section #text{
    position: relative;
    font-size: 3rem;
    color: white;
    font-weight: bolder;
}

#hero-section #moon{
    position: relative;
    bottom: 25%;
    background-color: rgb(220, 218, 218);
    width: 8rem;
    height: 8rem;
    border-radius: 100%;
}

Now, style the Heading and the moon. So can set these styles according to you. I have set moon to 25% bottom and at the center and give a grey tone.

#content{
    position: relative;
    background-color: rgb(96, 21, 33);
    padding: 2rem;
    z-index: 1; // this is important
}

#content h1{
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

#content p{
    font-size: 1.2rem;
}

At the end, I have give some styling to content section. You can also change the styling of the content according to your choice but dont forgot to add z-index. It will make it a level higher than other. For more information about z-index you can visit to w3school or on any another website.

Step 3: Writing the Javascript

let text = document.getElementById('text');
let moon = document.getElementById('moon');

window.addEventListener('scroll',() =>{
    let value = window.scrollY;
    //console.log(value);
    text.style.marginTop = value * 2.5+'px';
    moon.style.right = value * 2.5+'px';
})

Now the main thing, javascript. It is preety simple. First I select the hero-section heading and the moon. Then, a addEventListener with a function which works when the page is scroll. Now, we will access the value of y-axis with window.scrollY. You can console log it if you want.

Now, we will multiply the value with the left of moon with 2.5 so that the moon will move towards left, when you scroll the page. If you think that it is moving fast then you can change 2.5px with a smaller number then it will move slower than before.

Then, we will also multiply the value with the marginTop of hero-section heading with 2.5px so that when you scroll the page, the heading will come downwards. But the heading will still appear if we scroll downwards! Don't worry, did you remember we apply z-index on the content section. So the heading will hide below the content section. And now its finish.

Conclusion

So, that all for making a parallax website. You can add more things with it to make your website look even better. And Thank You for reading till the end. I hope you like it and don't forget to tell me in the comments if you like the post or how can I make my posts even better. Also please visit my github !