Download Article
Easily build a webpage with that late 90s or early 2000s aesthetic
Download Article
Want to make an retro 2000s or 90s-style website? While modern designers cringe at the design choices people made in the aughts, you can't deny that websites were more fun back then! It really helps to know HTML, but you can still get that Y2K-era web aesthetic using templates and layout builders. This article covers everything you need to know to make your website authentically 90s or 2000s, and shows you where to find the best HTML layouts/themes, animated GIFs, backgrounds, buttons, and more!
Making a 2000s or 90s Style Website: What You'll Need
- Tons of colorful animated GIFs and buttons
- 3D-style text graphics and lots of Comic Sans text
- Repeating background patterns
- HTML tables
- JavaScript effects
- At least one "Under Construction" GIF
- A hit counter and guestbook
Steps
Section 3 of 3:
Building Your 90s or 2000s Website
-
Get a host for your website. If you really want to capture that Y2k aesthetic and are willing to write (or copy and paste) HTML code from scratch, create an account with Neocities . Their free tier has enough features to cover all your retro website needs. Just be aware that you'll need to work with HTML files on Neocities—there's no website builder. You can edit HTML files on your computer and upload them through the website.
- Really, any web host will do if you feel comfortable with basic HTML. You'll usually want to avoid web hosts that are too modern, like Squarespace or WordPress, as your site won't look like it's from the late 90s or early 2000s.
- If you want to create an authentic 90s- or Y2K-style blog, not a whole website, you don't need to know much HTML. However, it's best to choose a blog host that lets you edit your HTML directly, like Blogger or Tumblr, so you can add some special HTML touches.
-
Create a basic page in any text editor. Even if you don't know HTML, you can use this wikiHow basic HTML guide to create your first HTML file. Alternatively, if your web host has a browser-based editor, you can make your basic HTML page there. Save your HTML file as index.html .
-
Try a theme or layout builder. If your HTML is rusty or you want a good starting point, there are tons of templates and layout builders you can copy and paste right into your HTML!
- Layout builders
- Layouts to copy
- If your web host supports Bootstrap , try the Geo for Bootstrap website template, which is loaded with Comic Sans fonts, rainbow colors, beveled buttons, fake progress bars, and more.
-
Add some color. Today's devices can display millions of colors, but older computers could only show 256 colors at a time. And because only 216 of those colors displayed exactly the same on both PC and Macs, 90s web developers relied on a palette of only 216 "web-safe" colors to ensure their sites looked the same on all platforms. [6] X Research source While the web-safe palette is no longer needed, sticking to the colors from this palette for your website will give you that authentic 90s or Y2K aesthetic.
- Check out our handy guides to Setting Background Color in HTML and Changing Text Color in HTML . To get the hex codes and color names, go to https://www.rapidtables.com/web/color/Web_Safe.html .
- You can use these color hex codes for fonts , tables , and more.
-
Add your images. Download all the animated buttons, text effects, and other goodies you want to add to your page, then add them using the HTML <img> tag. If you're new to HTML, you can learn how easy it is to insert images on How to Insert Images with HTML .
-
Set your background pattern. If you want to use a background image, it's best to set the background using CSS. You can learn how to do this in How to Set a Background Image in HTML . Be sure to use the CSS property background-repeat: repeat; to make your repeating background image cover the page like wallpaper.
-
Insert your HTML tables. To learn how to make tables in HTML, check out our guide to creating tables . You can also skip the learning and use a table maker like HTMLtables.io to generate HTML to paste into your file!
- If you'd rather not mess around with tables, you can get the same effects applying CSS properties to Div tags—especially the border-style: inset property.
- HTML tables of the 1990s had thick beveled borders. In the 2000s, tables became more aesthetically pleasing, either with single 1px borders or no borders at all.
-
Upload your page and images. Make sure to upload your index.html page and all of the pictures to the same directory so the images will show up on the page. If your web host requires you to use FTP or SFTP to upload the site, try the free, open-source app FileZilla .
- Don't forget to paste the code for your guestbook and hit counter into your page!
Advertisement
Expert Q&A
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
Advertisement
Video
Tips
- Want to see something funny? Open Google and search for "GeoCities," and check out the font on the search page!Thanks
- If you download graphics or buttons from a website to use in your design, give that site a link on your links page.Thanks
Submit a Tip
All tip submissions are carefully reviewed before being published
Name
Please provide your name and last initial
Thanks for submitting a tip for review!
Advertisement
Warnings
- Using blinking or flashing images on your website looks cool, but it could negatively affect viewers with seizure disorders. Use these features sparingly, or add a big warning to the top of your page so people can choose to click away.Thanks
- When you find graphics, backgrounds, and buttons online, download them from the site and upload them to your web host before using them in your designs. Hotlinking images (when a website uses an image that's on another person's webserver) is frowned upon, as it uses up the artist or archive's bandwidth. [7] X Research sourceThanks
Advertisement
References
- ↑ https://www.webdesignmuseum.org/
- ↑ http://textfiles.com/underconstruction/
- ↑ https://www.w3.org/WAI/PF/HTML/wiki/Table/layout_TABLE_deprecation
- ↑ https://html.com/media/
- ↑ https://github.com/tholman/cursor-effects
- ↑ https://htmlcolorcodes.com/color-chart/web-safe-color-chart/
- ↑ https://www.pixsy.com/academy/image-owner/hotlinking/
About This Article
Thanks to all authors for creating a page that has been read 41,430 times.
Advertisement