Join 18,800+ Readers

Tips for Building Effective HTML/CSS/JS Web Applications

by Jake Rocheleau

on June 6, 2013

in Tips

Learn how to earn $125 or more per hour as a freelancer - Click Here
Looking for hosting?. We recommend MediaTemple for web hosting. Use Code MTLOVESDESIGN for 20% off

Developers who have been in the field for a couple years have probably seen a large increase in web applications. Typically these are small pages which serve dynamic content either via Ajax, or through some backend system connected in JavaScript. Lots of free open source JS frameworks have been released and continue to be updated constantly. These are the solutions for web developers who are working to build solid webapps on a frontend language.

javascript class coding cupertino california photo

I want to share just a few tips and resources for web developers creating their own webapps. It is a very difficult process and will require weeks if not months of study & practice. But I have to agree that it is worth the effort, because web apps are becoming very popular among google searchers. Build something great and then share it out to see how many people will care to bookmark or save your links.

Working over APIs

One of the coolest solution I have made was built on top of an API reference. There are lots of online networks you may use such as Etsy, eBay, Instagram, and others. It is important to note that using an external 3rd party API will save you the worry of storing local data. You will not need a database because all of the content will be pulled out of the service’s database.

Recently I had created an API instant search using DeviantArt posts. This will query the most recent signature banners related to any keywords you search, and all the data will be pulled instantly. The reason this helps so much is because the original DeviantArt search page requires a lot of extra settings. It can get annoying when you are waiting around for the results – and my solution is definitely a bit quicker.

webapp html5 css3 api deviantart sigs auto instant searching

This is ultimately the purpose of working on top of APIs. Obviously the service-in-question may choose to do things their own way. But if you do not like it then you can go ahead and build your own solution! It is a great idea and the open source movement has really pushed for this in larger quantities. jQuery and other JS libraries are totally compatible with reading XML/JSON response data, so almost any API is a valid choice for your webapp.

Static Template Designs

Many web applications will follow the MVC Model-View-Controller programming hierarchy. This is a method of splitting your backend codes from the frontend display views, and using the controller to behave like an organizer between the two. This is also just as possible when writing frontend web applications, but I think the concept is unnecessary for smaller ideas.

mvc modal view controller photograph coding tips

Instead you may consider building a single basic HTML/CSS template page without any major content. Then you can duplicate the page, setup your JS libraries and include all the codes you need for dynamic content. Unless you are using a CMS backend then this solution is definitely an option. Frontend developers should already be familiar with the design trends and you will not need to manage complicated .tpl files.

Cloud-Based Code Editors

How many times have you been on another computer without your work to access? Or even without a code IDE to write scripts? If you still have that itch for coding I would recommend visiting any of the free online code editors. jsFiddle is a personal favorite which allows you to sign up for a free account and store all your applications under a single profile page.

jsfiddle ide cloud hosting editing javascript html5 css3

The ability to share your fiddles or keep them private is also tucked away in the account settings. I think this is an excellent method for practicing new ideas without worrying about creating new documents on your HDD. You will not even need to open a single program other than your web browser. And these codes are accessible in the cloud from any computer with Internet access.

Another solution is JS Bin which has a slightly more open layout design. You will find a lot of the same features and a simple library patch for including any other JS scripts into your code. Cloud-based editing is taking the web design community by storm. You may quickly prototype ideas in your spare time with just a basic Internet connection. Keep these tools in mind since you never know when you may need them in the future.

Make Something Useful!

The purpose of making any web application is to offer something of value to the Internet. It could be an instant search, or a puzzle solver, or a translator, or some type of drag-and-drop interface. The ideas are practically endless but that is precisely why you should analyze your ideas to make sure they are worth something. Will you ever go back and use this application?

Even just 2 or 3 people who love what you have built will make it all worthwhile. And if you can find a lot of use for creating, say, a WordPress functions.php generator then, it will be worth any time spent coding. But the worst feeling is when you are 1-2 weeks into a project and you lose all motivation because the idea is lacking direction. Keep yourself motivated and follow through on projects which you know have a sense of purpose.

Related Links

Final Thoughts

There will always be a new library or open source project being released which you can try on your website. Backend languages are also still vitally important for obvious reasons. But when constructing a simple single-page webapp it is often worth the effort to find a great JavaScript library for the task. I hope some of these tips and ideas may prove useful to be included on your next web idea. But if I have forgotten any truly outstanding resources then please share with us in the post discussion area below.

Powered by Shutterstock

About Jake Rocheleau

Jake is a frontend user experience designer and frequent blogger. He writes about all things web and mobile design. Check out his updates on Twitter @jakerocheleau. Connect with Jake on google+