2000's were a chaotic-beautiful decade to be a web dev.
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:
<html> <head> <title>Famous Dinosaurs</title> </head> <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> <ul> <li>T-Rex</li> <li>Velociraptor</li> <li>Triceratops</li> </ul> </body> </html>
Results of those days:
But I wanted my pages to look more like these:
So.. I studied computer science and 20 years later I come here to not disappoint my 2000 self version. 😠
Using Wayback Machine I chose this Cartoon Network version:
Mainly, the website has its header, nav, main, and footer sections.
Now, this is the basic HTML code
<h1>Cartoon Network 2000 Clone</h1> <header> <section id="header-banner"> .. </section> <section id="plugins"> .. </section> <nav> <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> </select> </label> <label for="search"> Search: <input type="text" name="search" id="search"> <button>Go</button> </label> </section> <ul id="nav-menu"> <li><a href="#">Home</a></li> .. <li><a href="#">Tv</a></li> </ul> </nav> </header> <main> <section id="spotlight"> .. </section> <section id="characters"> .. </section> <section id="featured"> <article> <img src="./assets/img/shop-cn.gif" alt=""> <p>Free shipping on Your First Order <a href="#">Click Here for Details</a></p> </article> .. <article> <img src="./assets/img/jbvo.gif" alt=""> <p><a href="#">Click Here!</a></p> </article> </section> </main> <footer> <section id="legalities"> .. </section> <section id="footer-banner"> .. </section> <section id="copyright-information"> .. </section> </footer>
And adding some magic CSS that is all available on the GitHub Repository (if you want to check it out), the result is this:
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?...
Follow me on my social networks
I usually share code and some memes
Like and comment to stay in touch! 😃