How Do I EXACTLY Use JavaScript in Static Websites to Make them Interactive
8 things that tell you have actually used javascript on website
This was the question I faced after learning HTML ,CSS & Tailwind.
I was continously on repeat, what can I do to show someone that I actually used javascript.
Basically, I learned concept of static websites and now I was moving to next level. So I had to experience this friction.
Static & Dynamic websites
In case you don’t know what static or dynamic website are.
A static website is like a printed book that has fixed content which can’t change unless someone manually updates it. It’s made using HTML and CSS, only and doesn’t have things that move or change on their own.
For example, a static website for a bakery might have information about the bakery’s history, menu, and contact details, but it won’t change unless the bakery owner updates it.
On the other hand, a dynamic website is like a video game that can change and update in real-time.
It uses special codes, like JavaScript, PHP, or Python, to make things happen when you click or interact with the website.
For instance, medium.com is a dynamic website.
Point is
Mainly, I was confused about it back then. But later I found out which had helped me a lot.
Making static website is step 1 and dynamic is step 2.
8 Practices to use JavaScript on your websites
If you are a beginner I’d recommend you to learn making these from watching tutorials, google or just ChatGPT.
Just make one thing at a time.
1. Creating a responsive navigation menu that collapses into a burger menu on smaller screens.
Below is good resource to get started.
This specific mini project is great to start.
2. Implementing a slideshow or carousel to display images or testimonials.
This can be little complex if you are totally a beginner.
But here’s a resource that will help you.
I don’t this I need to give context for each, headings & resources are more than enough.
3. Adding form validation to ensure that user inputs are valid before submitting a form.
There are two ways to do it.
First, you can use types in HTML to validate.
Secondly, you can use javascript, which is I think great, you show know both.
Freecodecamp’s amazing article
4. Creating a “scroll to top” button that appears when the user scrolls down the page.
BTW, while sharing resources, I am assuming you have good understanding of HTML and CSS.
5. Implementing a “show more” or “load more” button to dynamically load additional content.
Didn’t found the best resource, but this can help.
6. Implementing a search functionality that filters and displays search results in real-time.
Here’s a resource from w3 schools.
7. Adding social media sharing buttons to allow users to share your content on social platforms.
One of never avoideable concept. Especially if you want to freelance.
You need to learn concepts, after that you can copy paste things.
Concepts, because if client or senior would ask to make modifications you can’t because you don’t know basics yet.
8. Creating a dynamic progress bar.
A good example but you can find more better ones.
These were 8 things you can do for next weeks if you have learned HTML & CSS and confuesd what to do now..
Takeaways
- Take one step at a time:
Please don’t rush and try two at once (unless you are superr confident and actully understand concept.) - Start with making hamburger collapse.
Finally
Save this to your reading list to not forget or come back when you require.
Follow me, I don’t & will never waste your time.⏳
Especially if you are a web developer or frontend developer.👨💻
I’ve been off for six months, and in these six months I did several adventurous things with my programming skills. I am back to share them with you.🏃♂️
ALSO, JOIN EMAIL LIST TO BE PART OF MY UPCOMING DISCORD SERVER. WHERE WE’LL SHARE RESOURCES, PROJECTS, AND INSPIRATION. (just little group of frontend innovaters).
Have a wonderful day🌟✨
