DEV Community

Cover image for [#Beginners] Gradient Background Generator Project⚡
Satyam Pandey
Satyam Pandey

Posted on

[#Beginners] Gradient Background Generator Project⚡

“Practice patience to get the results but don't be much patient to take actions.”
― Amit Kalantri

I have done many projects and I think doing projects is the best way to sharpen your skills. Building projects helped me bring together everything I was learning. Once I started building projects, I immediately felt like I was making more progress. The more you do the more you learn. So today I'm going to share with you all my very first web project which I have made a year back to learn the functionality and interactivity of javascript. From this project, I have learned that how javascript interacts with HTML and CSS. It was a very good experience for me.

This project is small, simple but effective as it includes some basic idea of how javascript works with HTML and CSS collectively.

HTML

Basic structuring of the project

Alt Text

CSS

Styling the content of the project

Alt Text

Javascript

Very few lines of javascript code but it made me realize how things are actually working. I got to know more about the Document Object Model(DOM) and how to manipulate it and much more.

Alt Text

Here's the final view of the project looks cool, isn't it?

Alt Text

It will give the linear color gradient value for the background which could be used in CSS to save time🕙

Demo🚀

You can get the files for this project on my GitHub page🚩

Thank you😊 and feel free to share your first project in the comment section📪

I'll soon share my React project with you all.

Stay safe, stay motivated✨😇

Top comments (3)

Collapse
 
realparamesh profile image
Paramesh S

This is my first project --> I have modifyed a lot till today
realparamesh.github.io/Drawpad/

Collapse
 
realparamesh profile image
Paramesh S
Collapse
 
realparamesh profile image
Paramesh S • Edited

realparamesh.github.io/Popat-bot/ --> not first project....