CodeAnalogies Blog

Need some ideas for practicing HTML, CSS and JavaScript? Here are a few that you probably would not think of yourself.

Many beginner web developers already know that they need to practice, practice, practice the new skills that they are learning. Building real projects will bring challenges that you will not find in textbooks or interactive tutorials. It will also help you gain confidence if you are going to use HTML. CSS and JavaScript in your career. But, as usual, the experiences that are most useful are also the most difficult.

I see novice developers asking on Reddit, Quora, and Facebook and in every corner of the internet about what projects they should be building. Here are 8 fun ideas which will test all of your new skills, but will also prepare you for the challenges that professional web developers face. All are strictly front-end: HTML/CSS/JS/jQuery. And yes, they are pretty absurd, which will help your portfolio stand out compared to all the others. If you build the same projects as everybody else, you will have a hard time distinguishing yourself from all the others.

1. Big Dave’s Chop Shop

The Idea: A store that contains both a motorcycle repair garage and an open pit barbecue. I hope they are physically separate for the sake of human safety, but you can let your imagination run wild.

Type of Site: Small Business

Key Functions:

• Ability to see what types of service the repair shop does, and which makes/models
• Positive customer reviews for the motorcycle shop from real customers
• Yelp reviews for both the garage and restaurant
• Restaurant menu
• Details on the kitchen/chef/story of how it was founded

Key Design Decisions:

• How will you separate the garage and restaurant so the user can choose the one they are looking for? Will they have similar designs or different themes?
• Who is your key demographic? It is definitely men. But is it older, motorycle-riding men? Urban hipsters?
• How many pictures will you use? This one could be a very picture-dominated site due to the unique concept.
• What will your color scheme be? A more aggressive combination like red and black, or something else?
• What is the typical way people would use this store? Could it be bikers that are on long journeys? Bikers that want a meal while their bike is in the shop? More casual visitors that are just there to check out the unique concept?

What You Will Learn: This one will give you plenty of creative opportunity to create a real attitude on your site. You can show this attitude through pictures, colors, copy or little interactive elements. Whatever you do, you need to build a site that is easy for older men to use, but also reinforces the unique branding of this store.

2. Political Haikus

The Idea: Everybody loves good political humor and poking fun of these figures that the public judges so frequently. This is a site where you (and others, potentially) could post haikus mocking the latest gaffe or statement that a well-known candidate makes. Especially relevant during campaign season!

Type of Site: Blog

Key Functions:

• A blog-type interface with a series of haikus that are easy to browse
• Funny picture of the candidate with each haiku so the reader can easily scan the page
• Either an infinite scroll ability or new page for every 20–50 haikus
• Google Form to allow others to contribute a haiku and picture

Key Design Decisions:

• What color scheme is appropriate for a haiku site? More of a parchment color scheme? How do you style each haiku?
• How can your copy increase the sarcasm/parody feeling? Do you put sarcastic titles with each post?
• Do you allow the user to choose based on candidate, or just one long feed? If the user can choose by candidate, do you want to create a unique personality for each candidate’s subpage?
• How often do you post here, and how often do you expect users to visit? One a day, or every time a candidate makes a funny mistake, or a different timing?

What You Will Learn: Blogs are super simple- they are just reading and looking at pictures. There is no real potential for interaction. This means that your copy has to be exceptionally effective. You will need to create a consistent theme with your copy. If a user is going to visit throughout election season, they are going to want a consistent sense of humor. And you will only have 3 lines to do it! You can also try marketing this one with Twitter- it is a very similar style.

3. The Toilet Paper Depot

The Idea: An online store for just toilet paper. If you have ever used toilet paper (hopefully all of you), you have experienced the significant difference between different types of toilet paper. After you rub yourself with the equivalent of cardboard, you are cursing the building owners and wishing ill upon them. This would be a site for toilet paper aficionados… if those even exist.

Type of Site: E-commerce

Key Functions:

• A variety of toilet paper products that can be categorized/searched based on size, quality, brand or price.
• A shopping cart and checkout process to simulate the buying procedure
• A subscription option so users can sign up to have their favorite toilet paper automatically delivered
• A separate section for toilet paper holders with a variety of designs. These would be gift opportunities!

Key Design Decisions:

• Your users can go ANYWHERE to buy toilet paper. Why would they choose your site? Perhaps humorous copy? An easy buying process? The subscription option? Think of ways to make this unique among e-commerce sites.
• Who are your customers? Are they moms? High-end restaurants? Luxury hotels? Germophobic people? This should determine much of the way products are listed.
• How do you want to structure your landing page? Do you want users to go immediately to the shopping interface, or do you want to have an initial page to introduce your site?

What You Will Learn: E-commerce is a huge industry, and there are many little decisions that go into a pleasant and user-friendly shopping experience. You will get practice with every little step needed to explain products and make the shopping process easy. Think about Amazon.com- what do you like about it? How do they quickly allow you to find the product you want?

Potential Inspiration: Diapers.com

4. Mario’s Personal Website

The Idea: Mario, one of the most popular cartoon characters ever, does not have a personal site! He needs you to build one that represents him as a character. It obviously can’t be just any personal website because he is such a distinctive character. It needs lots of interactivity and animation, just like a video game. You can read about Mario’s history here, and you can check out an incredibly intricate video game-inspired personal site here.

Type of Site: Personal Website

Key Functions:

• Like any personal website, it needs to talk about his accomplishments and all of his experiences/adventures.
• Tell Mario’s story visually- after all, he is a cartoon character. Not just sentences about his work, but use little visual animations to bring those accomplishments to life.
• Use quantifiable numbers to show his accomplishments across his entire career- how many princesses saved? How many games sold? Etc.

Key Design Decisions:

• What color palette is associated with Mario games? This is the one you want to use, as well as an appropriate cartoon font.
• How can you use animation to further tell his story? You may want to check out jQuery UI for this one.
• What imagery is associated with Mario? How can you easily add this imagery without hours of design?
• Can you create a feel of adventure within the site’s experience? Or perhaps the feeling of a timeline throughout all of his stories?

What You Will Learn: You hopefully want your own personal site to tell the unique story of you. This project will let you tell the story of a character with so many accomplishments that it is truly unreal! The design of a personal site should be unique to the subject, and Mario certainly has his own unique style. Additionally, you will learn how to add little animations that add value to the story and please the user- they create an impression without forcing the reader to process more text.

5. avoided connections

The Idea: Craigslist has a famous section called Missed Connections, where individuals can post about a person they saw in public that caught their eye or smiled at them in hopes that the person also reads Missed Connections and will get in touch. This is the opposite: for people you saw in public and quickly looked away from, in hopes that they would not talk to you or notice you. Frequent subjects could be beggars, solicitors or drunks on public transportation. Some of these types of people can be doing particularly notable things especially if they are drunk, so this is an opportunity to share that story.

Type of Site: Blog

Key Functions:

• A list of stories with a headline about the subject i.e. The drunk man talking to himself on the E train at 3 PM. Potentially including pictures.
• The ability to categorize the post by location, time of day and venue (the street, coffee shop, bus etc.)
• A Google Form so users can submit their own stories
• Ability to segment posts by any of the categories so users can look at stories like “Who were the people worth avoiding at 3AM in London?”

Key Design Decisions:

• What kind of activities are worthy of a post? Should only truly deplorable public behavior count. What about political positions that you overheard that you do not agree with? Or unpleasant people encountered at the bar?
• How can you protect the individual’s privacy so that this does not become a harassment site?
• Should this be a funny resource, or more about watching out for creepy people?

What You Will Learn: The little factors that influence a community feeling on a blog. If this became popular, you would hopefully have a stream of funny stories and users that returned consistently for entertainment. You need to provide all the details that make a story believable and allow the readers to pretend they are experiencing it themselves.

6. Snake Oil Enterprises

The Idea: A small shop where you sell all sorts of miraculous remedies that are untested by science. A site where seemingly useless things like ground pig’s tail can somehow cure cancer. The term comes from the 19th century Western US. Fake doctors would claim to have miraculous natural cures to various ailments, when in reality they were fraudulent.

Type of Site: Small Business

Key Functions:

• A dozen naturally occurring substances that you claim will have miraculous cures for different ailments
• An “About” page where you explain the fake qualifications of the owner, and how these fake medications saved his 2nd cousin.
• Ability to sort the cures based on the ailment- are you looking to cure cancer? Arthritis?
• Customer testimonials on each product that swear that they work based on an individual story

Key Design Decisions:

• If a person was actually going to buy one of these “miraculous” cures, what sort of information would they need to see to convince them?
• What color scheme fits this? A natural/earth colors color scheme, or something else?
• What is the demographic that would visit this site? If it is the natural-foods community, you probably want the design to be similar to sites they frequently visit.

What You Will Learn: You need to think up some specific sales copy for selling these fantastical products. You need to make them sound as appealing as possible. Also, this would likely be a small, independent shop, so it would have a specific, unique appeal that makes it more personable than e-commerce.

7. Who is Pissed Off At Your Music? The Quiz

The Idea: Older generations frequently dislike the music of younger generations. Hippies and hipsters frequently dislike the music of the mainstream. And vice versa. In fact, whenever you are playing music in public, you are probably annoying someone. This will allow you to enter your musical taste with a few questions and tell you which group of people dislike you because of it.

Type of Site: Interactive Quiz

Key Functions:

• An series of questions that are presented one at a time. Each is a multiple choice question, and the answer determines the following question. For example, if you answer “I like rap” to one question, the next question might be “Who is your favorite of these 5 artists?” or “What type of rap, specifically?”
• An end page that shows the type of people that your music annoys, and why. You can also include a few humorous YouTube videos or gifs of funny reactions of that group.
• Imagery with each question that is humorous and increases the comical feel of the site. It is not supposed to be serious!

Key Design Decisions:

• How are you going to create a smooth flow between questions? What animations can you use?
• How can you let users know what step they are on? Like Step 1 of 5.
• How can you make the answer humorous? Users are on your site for entertainment, and they are going to be hoping for something funny after the questions they answer.
• What imagery will increase the humorous feeling? What fun facts can you include? This is sometimes called microcopy.

What You Will Learn: You will cover technical skills like embedding with HTML5 and jQuery UI. You are also covering a common pattern of on-boarding sequences in full web apps, so this is practice for a real process!

8. My Weight Gain Chronicles

The Idea: We all eat food that we know we should not be eating. But it tastes so good! This will be an opportunity to post about all the food you feel guilty about, but actually tastes delicious and may lead you to gaining weight. You could even phrase these as fake obituaries. For example, you regret the passing of that wonderful piece of cake.

Type of Site: Personal Blog

Key Functions:

• Every time you eat food that you feel guilty about, you post a picture of it with a quick note about its passing. The picture can either be a plate of crumbs/scraps or the unhealthy food itself.
• Tag the food based on time of day and type of food.
• Google Form to allow others to add their guilt stories.
• A list of self-help resources, like dieting communities and fitness apps.

Key Design Decisions:

• Do you want to actually style this after a funeral website for maximum sarcastic effect? Google examples of funeral websites.
• How can you write these descriptions to make them funny for a wide audience, and not uncomfortable?
• What do you need to make this a full site, rather than just content that could be on Twitter?

What You Will Learn: Humor on the internet can be tricky! The biggest key may be keeping one specific tone so that users can reliably expect one type of content on your site. At the same time, sites with a great sense of humor can be highly viral because people love sharing jokes with friends.

Conclusion

You can turn pretty much any idea into a website! You always want to consider ways to make your site memorable– this will help you stand out in your search for a job or clientele, and it will stand out in your users’ minds if they are deciding whether to return to your site or not. You can distinguish yourself from the rest if you make an effort to stand out!

Did this give you any inspiration? Let me know in the comments!