DEV Community

Cover image for πŸ–₯️ Cloning an early 00's website using modern HTML + CSS
Luis Mendoza
Luis Mendoza

Posted on • Updated on

πŸ–₯️ Cloning an early 00's website using modern HTML + CSS

2000's were a chaotic-beautiful decade to be a web dev.

A retro story

When I was young, I usually tried to write some HTML with Inline Styles using a book that an uncle lent me.

I used to go to my computer, open notepads and write code like this everyday after school:

    <title>Famous Dinosaurs</title>
<body style="background: darkgreen; color: white;">
    <h1>The Top 10 Famous Dinosaurs</h1>

    <img src="link/to/some/amazing-banner.jpg" 
        alt="Oops something went wrong!">

    <!--how to forget the marquee πŸ’š -->
    <marquee>Woo, its moving :O :D</marquee> 

    <p>Dinosaurs are awesome and the best are:</p>


Enter fullscreen mode Exit fullscreen mode

Results of those days:


But I wanted my pages to look more like these:

retro example dragon ball z screenshot

retro example fox kids screenshot

So.. I studied computer science and 20 years later I come here to not disappoint my 2000 self version. 😠

The design

Using Wayback Machine I chose this Cartoon Network version:

Identifying the structure

Mainly, the website has its header, nav, main, and footer sections.

The Code

Now, this is the basic HTML code

<h1>Cartoon Network 2000 Clone</h1>

    <section id="header-banner"> .. </section>

    <section id="plugins"> .. </section>

        <section id="characters-search">
            <label for="characters">
                Choose a character:
                <select name="characters" id="characters">
                    <option value="" selected disabled>Choose</option>
                    <option value="Bugs Bunny">Bugs Bunny</option> 
                    <option value="Scooby-Doo">Scooby-Doo</option>

            <label for="search">
                <input type="text" name="search" id="search">

        <ul id="nav-menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Tv</a></li>

    <section id="spotlight"> .. </section>

    <section id="characters"> .. </section>

    <section id="featured">
            <img src="./assets/img/shop-cn.gif" alt="">
            <p>Free shipping on Your First Order <a href="#">Click Here for Details</a></p>    
            <img src="./assets/img/jbvo.gif" alt="">
            <p><a href="#">Click Here!</a></p>

    <section id="legalities"> .. </section>
    <section id="footer-banner"> .. </section>
    <section id="copyright-information"> .. </section>
Enter fullscreen mode Exit fullscreen mode

And adding some magic CSS that is all available on the GitHub Repository (if you want to check it out), the result is this:

Mobile version.. Why not?

Also I created a mobile version.

If we had smartphones in the 00's, it would have looked something like this. I think, who knows?...

You can compare original vs clone here:
Original vs Clone

Thanks a lot for reading my post and code!


Repo: Github
Deploy: Webpage Clone


Follow me on my social networks
I usually share code and some memes

Follow @Lmendev on Twitter

Like and comment to stay in touch! πŸ˜ƒ

Discussion (3)

heyprotagonist profile image


lmendev profile image
Luis Mendoza Author

this guy gets it - rick and morty gif meme

heyprotagonist profile image