DEV Community

Robson Muniz
Robson Muniz

Posted on

69 18

🎬How To Create Website With Auto Typing Text Effect Using HTML CSS JavaScript🙌

Lets Create a Website With Auto Typing Text Effect Using HTML CSS JavaScript, step-by-step in a very easy to follow along tutorial.



Source Code:

HTML

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

<head>
  <meta charset="UTF-8">
  <title>Create Website with Auto Typing Text Effect</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <nav>
      <img src="img/logo.png" alt="" class="logo">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Services</a></li>
      </ul>
      <img src="img/menu.png" alt="" class="menu-icon">
    </nav>

    <div class="text-box">
      <h1>I'm <span class="auto-input"></span></h1>
      <p>You can reach out to me if you need any nelp in making
        a Website for you or your business.</p>
      <a href="#">Contact me</a>
      <a href="#" class="btn">Download CV</a>
    </div>
    <img src="img/bg7.png" alt="" class="user-img">
  </header>

  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

  <script>
    let typed = new Typed(".auto-input", {
      strings: ["Emma Downy", "Web Developer", "Blogger"],
      typeSpeed: 100,
      backSpeed: 100,
      loop: true
    })
  </script>

</body></html>

Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (7)

Collapse
 
salahedrissomer profile image
salah edriss omer

I am learning from this
Where is the style file ?
Do you have
Or that in the video ?
Generally very helpful 🙂
Thanks

Collapse
 
robsonmuniz16 profile image
Robson Muniz

Hey Salah, how are you doing sir?
Yes it's in the video, but I'll bring it here and post it.
I'm glad you liked it.
Happy Coding my friend DEV!

Collapse
 
revenant profile image
Allen

This is awesome! I actually wanted to implement this for my portfolio. Wanted to include my profession along with some hobbies I do.

Collapse
 
robsonmuniz16 profile image
Robson Muniz

Hey Dev I loved the idea, implement it and show us, would love to see it done.
Happy Coding!

Collapse
 
prabaljot profile image
Prabaljot

I was searching for my YouTube website. Very Helpful

Collapse
 
robsonmuniz16 profile image
Robson Muniz

I am glad you like you liked it...
Welcome to the Tribe and happy coding!
bit.ly/3oBQbc0

Collapse
 
real_ib1 profile image
Ibrahim

This is amazing, please could you share spice code, preparing my portfolio and I want to put that there please

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️