Starting a Web Project or Site?

Starting a Web Project or Site? How do you start it? When starting a web based project main question comes in my mind is that What structure should I follow and yes the basic scaffolding will also take time

Starting a Web Project or Site?

Starting a Web Project or Site? How do you start it? When starting a web based project main question comes in my mind is that What structure should I follow and yes the basic scaffolding will also take time. And then after deciding on the framework (now my favorite one is Bootstrap) or basic needs for project; I start collecting the things needed and arranging them to get started.

So I created my own scaffolding and started using it whenever I start a new project. But that also needed a lot of work around. Then I stumbled for it and found some interesting solution for this. There might be some more good solutions for this situation but for now I find it more interesting with less mess.

HTML5 Boilerplate

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

Its a project from H5BP. Its main features are

  • It is HTML5 ready; so you can use new elements with confidence.
  • It is Cross-browser compatible (Chrome, Firefox, IE8+, Opera, Safari).
  • Includes Normalize.css for CSS normalizations and common bug fixes.
  • The latest jQuery via CDN, with a local fallback.
  • The latest Modernizr build for feature detection.
  • Placeholder CSS Media Queries.
  • Useful CSS helpers and default print CSS, performance optimized.
  • Protection against any stray console.log causing JavaScript errors in older browsers.
  • An optimized Google Analytics snippet.
  • Apache server caching, compression, and other configuration defaults for Grade-A performance.
  • Cross-domain Ajax and Flash.

Initializr

Start an HTML5 project in 15 seconds!

Initializr facilitated the easy and fast forward starting to your web project. It provides the options to choose from where you can customize the your scaffolding and initial code. The thing you will choose from are:

  • HTML/CSS Template - Empty template
  • Mobile-first Responsive
  • Twitter Bootstrap
  • HTML5 Polyfills - Modernizr
  • Just HTML5shiv
  • Respond
  • jQuery - Minified or Development
  • H5BP Optional - IE Classes
  • Google Analytics
  • Chrome Frame
  • .htaccess
  • Favicon
  • Apple Touch Icons
  • plugins.js
  • Robots.txt
  • Humans.txt
  • 404 Page
  • Adobe Cross Domain

Mobile Boilerplate

Mobile Boilerplate helps you create rich, performant, and modern mobile web apps. Kick-start your project with dozens of mobile optimizations and helpers.

It's an another project of H5BP. It provides a boilerplate and scaffolding for the Mobile website or App. According to their github page Its main features are:

  • Mobile browser optimizations.
  • CSS normalizations and common bug fixes.
  • The latest jQuery.
  • A custom Modernizr build for feature detection and a polyfill for CSS Media Queries.
  • Home page icon for Android, iOS, Nokia.
  • Cross-browser viewport optimization for Android, iOS, Mobile IE, Nokia, and Blackberry.
  • Mobile IE conditional switch.
  • Better font rendering in Mobile IE.
  • iPhone web app meta.
  • INSTANT button click event.
  • Textarea autogrow plugin.
  • Hide URL bar method.
  • Prevent form zoom onfocus method.
  • Mobile site redirection.
  • Mobile bookmark bubble.
  • User Agent Detection.
  • An optimized Google Analytics snippet.
  • Apache server caching, compression, and other configuration defaults for Grade-A performance.
  • Cross-domain Ajax.

Now with these handy solutions you can kick start your web project/app.

Happy coding.