What is Reddit's opinion of HTML5 Boilerplate?

Just make sure you have a fallback. There are many cases where a given CDN won't work:

A user's workplace is blocking the CDN (it happens)
A user's country is blocking the CDN (it happens)
The CDN is down (it could happen)
etc (it happens)

The following code is taken from the HTML5 Boilerplate: ><script src="//ajax.googleapis.com/ajax/libs/jquery/x.y.z/jquery.js"></script>
><script>window.jQuery || document.write("<script src='js/libs/jquery-x.y.z.min.js'>\x3C/script>")</script>

The HTML5 Boiler Plate, one of the most well-researched frontend initiatives, uses it to load Google Analytics:

g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';

[edit] To everyone staring themselves blind at the subdomain switch:

It's not about how they use it: the simple fact that they are using protocol-relative URLs means that people with much time investigating cross-browser compatibility are confident it will work, confirming /u/snf's post.

Well, HTML5 is still in development (same with CSS3) and so utilizing HTML4 and CSS2 isn't wrong. However, starting some new practices doesn't hurt, start with changing the doctype to <!DOCTYPE html>, this will work with 4 and 5. Remember that a lot of HTML 4 is carried into HTML5 (except for the stuff that isn't.) So yes you can mix, in that sense. Here is some links to some new stuff you can use:

CSS3Please! - Example and copyable CSS3 HTML5 Bolierplate - HTML5 starting boilerplate. HTML5 Webitation - a good (HTML5) webslide showing off the newest features.

You don't need a framework, but the html5 boilerplate is a super place to start a project: http://html5boilerplate.com/

For reading and reference, pay a visit to the html5 doctor: http://html5doctor.com/

When you actually start using it, you'll never want to use xhtml again.

I think digging into the HTML5 Boilerplate (which has commented links to why most of the things in there are there) and reading Ethan Marcotte's "Responsive Web Design" should make you feel like you're on solid footing for your next project.

Give the container a width, float .left to the left, float .right to the right, make sure their combined width doesn't exceed the container's width, and add this to your CSS:

.container:before, .container:after { content:""; display:table; } .container:after { clear:both; } .container { zoom:1; }

That's Nicolas Gallagher's clearfix hack, as used in the HTML5 boilerplate.

It's got better backwards compatibility than most of the other solutions here, causes fewer issues than the overflow solution, and doesn't require you to use non-semantic HTML.

CDN's are your friend. Because your user will probably already have it cached for you.

Thousands of the most trafficked sites are using the Google CDN to serve jQuery. Even if someone visits hundreds of sites using the same Google hosted version of jQuery, they will only need download it once!

TL;DR http://html5boilerplate.com/

To be honest, it's better than what most people could do in college. Just keep with it and keep building new things and you'll be a seriously good developer come 4 years, no doubt in my mind.

Specify a doctype, check out http://html5boilerplate.com/ this will set up all of the html defaults and does a lot of nice compatability things for you.

Not much to say other than very nice work.

http://html5boilerplate.com/

6-8 months? Where did you pull that number from? We will be dealing with lack of HTML5 support on legacy browsers for years to come.

To answer op though, yes HTML5 is not only in, it is now and the future.

From the README.md:

> ## Inspiration > > Web Starter Kit is inspired by Mobile HTML5 Boilerplate and Yeoman's generator-gulp-webapp, having taken input from contributors to both projects during development. Our FAQs attempt to answer commonly asked questions about the project.

I prefer the way used by the HTML5 Boilerplate project:

All at the bottom of the html, before your own scripts and the </body> tag. And no, the // isn't a typo.

In my opinion, a flash of unstyled content just isn't as bad as a user thinking the page isn't loading.

Er... No.

IE doesn't apply styling to elements it doesn't recognize. Other browsers do. They just treat everything as inline by default, so they need a little boilerplate to present the elements the way they're supposed to appear (e.g. sections should be block elements).

If you're looking for good, solid styling without much visual flair, check out something like http://www.blueprintcss.org

You can use as much or as little as you want, it looks good, it's very usable, and can be adjusted as necessary. I use it in combination with http://html5boilerplate.com/ for all of my UX prototypes for client review before our graphic designer ever gets her hands on them.

To avoid renaming the files for every update you can use something like this (from H5BP) to return /css/style.css when /css/style.12345.css is requested:

<IfModule mod_rewrite.c> RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.+).(\d+).(css|cur|gif|ico|jpe?g|js|png|svgz?|webp)$ $1.$3 [L] </IfModule>

Webdesign tip (as opposed to dev). Don't have a dark shadow under dark text. The combination of the two darks distorts the letterform and makes it a lot less readable. (This goes for both the shadow on the blue text and the shadow on the black text).

Typography tip! That Muli font is not superb for body copy. Granted, it isn't terrible, but I think you can find something a little less quirky that plays well with the heading font. I would go with a serif that has a nice contrast, and I would bold up the headings.

Lastly. Use CSS Reset/CSS Normalize, and also use a grid system. (960.gs or something).

Also check out HTML5 boilerplate for a standards-compliant, modern HTML/CSS framework. Even if you don't want to redo the site using that framework, take a look at the comments to see how you can improve your coding.

Honestly, and this is gonna hurt, but I would just start playing around with HTML, The stuff HTML5 is implementing is too new and evolving to get a good book that won't be outdated in a year. My recommendation:

HTML5 Boilerplate for a good starting point
Learn Positioning, it's super important
Google, google, google. It's your friend.

Hey guys, I wrote those scripts. I probably shouldn’t have waited 22 hours to say this, but feel free to ask me any questions about them. Some of the other commenters know what they’re talking about and others don’t :)

Edit: also, here are some good resources for HTML5—diveintohtml5 and html5boilerplate. If you’re a physical book person, a book apart has a quick primer on HTML5. As mentioned in my post, the scripts I wrote only perform simplifications for existing HTML tags. And duh… use version control to review the diffs of the changes, which should actually be quick to review!

Good point. If you don't start a project with a reset style sheet, it can really change the way your site looks.

It is, however, very good for maintaining consistency across browsers. It just normalizes the default styles that browsers apply.

Recently, I'm been starting all my sites from Paul Irish's HTML5 Boilerplate

These 2 things have become invaluable to me in dealing with IE. Keep in mind this is in addition to & comes after learning about all of the various little CSS bugs and inconsistencies that IE is famous for, and, of course having solid fundamental knowledge of writing valid CSS/HTML.

modernizr - sniffs out support for CSS3 support, and adds classes to the html element, allowing you to serve up different styles to different browsers.

Conditional comments on the html element. I discovered this though the HTML5 Boilerplate by Paul Irish, et al. Basically you do this:

<html class="no-js" lang="en">

and a class is added to the HTML element based on which version of IE is rendering the page. You can then use that class in your CSS for fine grained control of IE.. But again, using these tools comes after understanding why you need to use them and what to use them for.

The thing about HTML5 is that it's not one big thing. You can use an HTML5 doctype and use only HTML4 elements, eschewing the enhanced features. From there you detect and/or polyfill/shim individual HTML5 features (canvas, for instance), or use something like Modernizr to progressively enhance your site. It classes the html element with a class for each feature, supported or not. With it you can write things like .boxshadow #shadowdiv { ... css3 box shadow declarations for browsers that support them } .no-boxshadow #shadowdiv { border:1px solid black /* for browsers that don't support boxshadows */ }

The HTML5 Boilerplate gives you a great baseline from which to start, and includes Modernizr.

Consider including a Reset block into your stylesheet to better ensure uniformity across browsers. Also check out HTML5boilerplate for more cross-browser and web standards goodness.

Absolutely. It's incredibly authoritarian. And looking at the rest of the page that seems to be the theme they're going for. Look at the HTML 5 Semantics placeholder, it's clearly a military rank insignia, and other related pages like HTML 5 BoilerPlate? Well, it doesn't get much more soviet design than that.

Paul Irish of HTML5 Boilerplate fame retweeted about this today: w3fools.com. I always thought they were affiliated with W3C too. Turns out they aren't. More importantly, they're spreading information that's inaccurate. Check it out.

So much about this is outdated...

My only recommendation would be to get yourself a more modern template (eg. boilerplate) and start from scratch.

working of years old site-snippets is only going to create trouble and headaches

Also check out HtmlEmailBoilerplate, which is sort-of an email version of HTML5 Boilerplate. It uses some CSS, but it's stuff that's tested and known to work in Outlook.

A boilerplate in this industry is a basic collection of web codes used as a fundamental starting-point template for a new web project. The most popular one takes the most obvious name.

A static site generator is a tool, engine, and workflow used to build/assemble/compile dynamic resources into a static website. I don't like them.

That is certainly a very robust and common solution. I prefer to tryout overflow:hidden; first as it prevents me adding another class to my markup (keeps thing neat, especially for someone as anal-retentive as myself).

If using a .clearfix class is your preferred method I suggest you look at the one in HTML5 Boilerplate. It's practically the same, just a little shorter: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L161

Feel free to send me a message or tweet me (same username) if you need anymore advice :).

watch this video on progressive enhancement 2.0 and apply it's principles, use the "football match on a black and white tv vs HDTV" argument.
As long as users can access the content then that is the most important thing.
Make sure you use feature detection and progressive enhancement too so you don't have an extremely slow experience. It also means many of your favourite frameworks might be out of the question, or maybe you might want to use an old version.
Try look at your analytics and trends to see if the argument for IE7 still exists, you might be able to get away with an upgrade message or a simple layout
Also look into the HTML5 boilerplate the conditional elements in the header allow you write IE7,8 & 9 specific styles eg .header { ... } .ie9 .header { ... } .ie8 .header { ... } .ie7 .header { ... }
test regularly look at these : http://www.modern.ie/en-us/virtualization-tools

> Isn't even HTML5 boilerplate non W3 complient?

Well http://html5boilerplate.com/ passes the test, except for two invalid attributes on youtube embed code.

I see W3C validation as a good way to check for syntax errors, unclosed tags, unencoded entities, and other things like that. It's more general cleanup than anything.

If you want to switch to the HTML5 doctype and don't mind adding some boilerplate to your site you can try HTML5 Boilerplate which should eliminate most of the problems with HTML5 elements and also normalize some quirks with IE7-9.

And also with HTML5 you can nest block elements inside anchors (with previous html versions that was considered invalid markup). But if you're doing that then it helps to set the anchors as block elements.

At 19% share, target audience or not, you should probably care - even if just a little. You don't need to worry so much about your IE9 users, but bear in mind that if your site breaks in IE8, IE9 users will most likely be viewing your page in compatibility mode, which is the pits. Fortunately, with a dash of Modernizr and a pinch of conditional comments for IE, your dev time shouldn't increase by very much at all.

All that and more, of course, is bundled in the fantastic HTML5 boilerplate

Design

The logo doesn't actually do anything, so don't put a rotation on it. Same with the heart. This is all just very superfluous. Animation should always help the user, never confuse them.
Left-align your navigation. The "eye" icon in your logo is the first thing to draw my attention and your navigation can use this to its advantage.
The same thing goes with that sidebar navigation, but that didn't seem filled out very much so I'm wondering if you actually need it
Go hand-drawn or go 8-bit. You typography and iconography really clash and breaks up the unity of your design.
Your site's title is "Cloudy Sun" but I see nothing in your logo or design which supports that. Even your favicon is just an iMac, which doesn't really say anything about the site.
If someone tries to click on one of the social links at the top by coming in from underneath the icon, the icon moves and they can't click it as easily. Consider another rollover effect, or expand the hit area. If you specify a width and height on the anchor link, this should right itself out.

Code

You're missing a DOCTYPE! This is going to lead to unpredictable behavior, especially within IE.
You should not have empty content in your anchor tags (share links). Include the text, and use one of the many text/image replacement techniques available (the simplest is to set the text-indent of the element to a large negative number).
There are a lot more Apple device icons to support than just the Touch. I recommend checking out the HTML5 Boilerplate to get a better idea of what you should consider including.

Mental

Don't let my (or anyone else's) overly-critical critique discourage you! At looks as though you're new at this, so it's important to keep learning, studying others' work, and asking for feedback!

Take a look at the HTML5 Boilerplate and see about incorporating some of the things in the project that you're missing. A couple things I noticed was no charset meta tag before the <title> element, and your server doesn't return an "X-UA-Compatible" HTTP response header.

Also, personally, I prefer to remove the "Server" HTTP response header. No reason to broadcast what server infrastructure I'm using, imo.

Also, note that using anything other than an .ico file for your favicon will not work in IE. See http://en.wikipedia.org/wiki/Favicon

Lastly, check out Yahoo's performance analysis tool "YSlow" - it will give you some more ideas for things to improve.

EDIT: Use a tool like "optipng" to losslessly optimize your PNGs, and a tool like "jpegtran" to losslessly optimize your JPGs.

Are you just looking for examples or reference/how-to sites?

The examples in this article are kinda old, but still relevant and I think most of the sites are still up.

Here's a decent tutorial with a demo and downloadable template.

Most of these types of sites are made using HTML5's <section> tag. Basically, set up your CSS headers, paragraph styles, spans, etc., and give each section you want its own id. Then all you have to do is reference each section:

#example-box h1 {font-family: comic-sans; font-size: fucking-huge !important; etc., etc.;}

Also, start out with the HTML5 Boilerplate and save yourself some time. I've noticed that most of these pages are built on it. I apologize if I'm providing a lot of useless info when all you probably wanted was a decent example.

The HTML5 Boilerplate has a great example in it's source code on how to use conditional comments.

tl;dvs: It adds the class .ie6/7/8/9 to the <html> tag, so you can do the following code:

.ie6 #someid{display:none;}

Check out the source codes of some of your favorite sites, that's one way to find out how they did something.

The most basic set up is like this:

<html> <div class="wrapper"> <div class="content"> contents and such go here, nested divs, forms, etc... </div> </div> </html>

In html5, the main content can just be set up like this: <section> <article> Moar stuff! </article> </section>

Then you'd have CSS that applies the style info to the classes and what not...

section, article, .content, .wrapper, etc... { background: blue; border: 1px solid yellow; corner-radius: 10px; etc... }

If you'd like to play with a template, check this one out: http://html5boilerplate.com/

Nice! Glad they're working on responsive design, for now I just use the 1140 Grid for the responsive layout: http://cssgrid.net/ and then I'd recommend using the HTML5 Boilerplate css to "reset" your styles: http://html5boilerplate.com/

try out 320 and up. It makes it easy to use media queries and html 5 to do this exact thing. http://stuffandnonsense.co.uk/projects/320andup/

This uses the html5 boilerplate [(http://html5boilerplate.com/]() and media queries do make responsive web design. it starts at 320px and you go up from there. It also adds in cool stuff for mobile phones like splash screens for iPhone and app icons.

If you get the html5boilerplate latest stuff, there's a nice build thing that it does that will run images through a smushing algorithm (non-destructive).

It will also compress css and javascript too in one process.

Generally people use one container for the entire page (you can actually style the <body> tag to do this for you if you're trying to clean up your div-itis), container divs for individual sections (header, navigation, body, footer), and then the individual divs for the content.

I'd suggest looking up some of the new tags for HTML5 (header, nav, section, footer). Barring that, the HTML5 Boilerplate is an awesome resource, with many great FAQs and details on how to get things organized.

Here's one example that I like, where it's used it to create a 3d effect on the h elements: http://html5boilerplate.com/

Of course you could say, "but that looks like crap!"

I don't have time or desire to prove anything to anyone, especially when it comes to subjective design tastes.

If you don't see any uses for text shadow, by all means, don't use it.

I still think your claim that text-shadow is anywhere near as useless and annoying as marquee or blink is bogus.

<body>

<header><title>Ereptoric - Rogues Do It From Behind</title></header>

...

you have title inside of body, title needs to go inside the head... always... the structure should always be this:

html head charset title css include mandatory scripts other stuff, meta data, description, etc end head body stuff non-mandatory scrips (google analytics, etc) end body end html
header is supposed to be for the top of your site - logo, banner, main links, etc
style tags should be up top in the head
it looks like you're using HTML5, if so...

should just be be

My latest site, here, was made in HTML5 and based off of html5 boilerplate. Check out the source code... that's kind of how it should look.

Great start for a noob... these changes will help you start writing more standard-complaint code.

As you have not given any details for what kind of template you are looking for specifically, I am just going to give you one of the most popular basic ones out there.

http://html5boilerplate.com/

it's already spiced up with all the state of the art web-jazz, modernizr, jquery, etc...

something else you might be looking for is a grid framework like http://996grid.com/ (it's pretty much an extension of boilerplate)

Get rid of tables
Use css and add color. I recommend bootstrap with html5boilerplate (go here for both packaged in a zip)
Use jQuery to modify the DOM instead of using alert();
???
Profit

The resources mentioned so far is what you need.

As en esxtra download one of these free templates (Still read the license): http://html5up.net/ and http://html5boilerplate.com/

You can start working from one of those. See what the code does and modify. It's a great way to learn.

Here's my workflow without a web framework or any tools whatsoever (ex: css frameworks, yeoman, grunt, etc...):

download html5boilerplate and use that as structure starter
convert the original index.html into a PHP file
add an includes folder with your header.php and footer.php files
transfer those sections from the index.php to the above files.
now go. mess with the css, html, php & javascript

Use something like HTML5 Boilerplate to get you off to a good start.
Why in the world are the menu links onclick events to submit forms?
Get rid if div@header so you dont have to do the nonsense of scrollto in ULScripts.js
persue !== pursue
When you are writing your html try and put things in a proper flow. div#sidebar should be after div#content
Why are you doing an @import for layout as opposed to a link tag
inline javascript is really not good unless absolutely necessary.
signup page is so messed up. title and meta tag under div#header-bg and more title and meta tags inside div#page

I have to go now..but Ill be back to nit pick some more later ;-)

I like the concept..I might actually use it to brush up on my math.

The idea is good. I am weird and will not use it because its not nice to look at/not super friendly to use.

Look at drupal like sali1 mentioned. Also, look at Bootstrap to get started in this nice looking site/understand how they did/why they did what they did.

Another thing to look into is H5BP. It can help you configure your server correctly and set some nice standards to get your started faster with whats used today. If you want a easier CMS to use, look into wordpress. It's not the most robust by any means, but could be what you need to get started. If you do the wordpress route then check out ROOTS to get you a base theme which has both bootstrap, H5BP and some other nice little features.

Hope this helps and good luck!

Read the A Book Apart book on HTML5. There are a load of reasons why tables are bad, say SEO. That'll sound good. "The tables are detrimental to the success of our clients websites on google" Essentially just arm yourself with information. Remember that half your job is dealing with people and convincing them.

Start using HTML5 boiler plate for new projects now. You can even still use the tables! The transition will be very painless, but it will be HTML5. From there you just need to look at the different ways of creating meaningful data in HTML and how to style divs and all the shiny new tags like article, section or time.

IMO, I think working with a boss like that it going to greatly hinder your learning. Maybe look into other jobs?

And good luck :)

Try using something like [Skeleton](www.getskeleton.com) or HTML5 Boilerplate. Basically they allow you design to "respond" to changes in screen size (ie. mobile, tablet, computer). It can be somewhat confusing at first, but take your time and try to fully understand them.

The boilerplate's htaccess includes the recommended additions for gzipping. Here's the documentation for it.

TL:DR but I agree with the headings. HTML, CSS, php, MySQL, js. In fact I highly recommend this book: http://www.amazon.com/gp/aw/d/0596157134. For some layout examples use Chromes Inpector to study other peoples sites and play with frameworks such as http://html5boilerplate.com/ and http://blueprintcss.org/. There are lots of great tutorials to get your feet wet with js and php scripts. In fact the book I suggested has awesome scripts you create that are reusable throughout lots of page designs.

From the h5bp site: >Think there's too much? The HTML5 Boilerplate is delete-key friendly. :)

Side note: h5bp doesn't reset anymore... it normalises >retains useful browser defaults and includes several common fixes to improve cross-browser (desktop and mobile) styling consistency.

I never just dump it in there as-is. There's always customization and stripping out the bits I don't need.

But, do I have to reinvent the best-practice wheel? No.

Do I understand what's in there? Yes.

Does it speed up my development process? God yes.

H5BP makes cross-browser css easier to say and do. But focusing only on that neglects the other beneficial parts.

Um, I have no idea what the relation is between a CSS framework and boilerplate is, but instead of just the regular boilerplate you should start off with the mobile version: http://html5boilerplate.com/mobile

I'm really partial to Paul Irish's html5boilerplate. It comes with a build script that does a LOT of optimizing, but it's best to read over the documentation so you know what it actually does.

Older browsers don't understand newer tags like article, header, footer, nav. But there are workarounds to that. I recommend starting off new projects with HTML5 Boilerplate

You need a submission system. But depending how you define "Designer" I'd consider adding Greasemonkey, Firebug, http://html5boilerplate.com/, http://marklets.com/, snipplr. Also links to the API docs of most popular JS libraries (jquery, moo, yui).

Straight from your linked article:

> Developing for the mobile web is difficult. There are no simple solutions that make it easy to provide a great mobile-optimized experience. CSS media queries are a tool, but they are not a silver bullet.

Also, you failed to provide any alternate solutions making your comment simply asinine.

The OP was asking for a front-end solution. He specifically wanted an HTML tag, but as I already stated, it's not in the spec, so I provided a solution with CSS that actual production websites are using today.

Some of the smartest people in the industry have put together a mobile boilerplate as a starting point for building mobile websites, and even they agree that media queries are a good tool to use. They also have an effective back-end solution that simply redirects mobile browsers to a separate URL which would have a better optimized page size/speed. But I assumed the OP needed a front-end solution.

> is there a better over-all approach to that type of logging/monitoring?

The "professional" approach is to take care of it during the build/deploy process.

It could be as simple as an awk script that removes all lines with "console.log", or better yet use something like Closure Compiler or the YUI build tool.

You should check out HTML5 Boilerplate

This is a great skeleton of a modern web-page/app. It comes with a build system based on ANT which will remove debug code, do some minifying/optimization, etc.

In addition to that, it will introduce you to a lot of best practices.

For personal or small projects , there's nothing wrong with the technique you mention, though I'd say learning to use the debugger really effectively can help a lot (i.e. learning to set watches and breaks can eliminate a lot of the need to log everything).

Check out the HTML5 boilerplate or something similar; using things like a CSS reset and the Modernizr library can make it easier to make your site to consistent across browsers.

If you want to make the most profit, then scan the news frequently and look for whatever technology/concept is being hyped. There is always something being hyped, but not everything "sticks" long term.

Then spend a 2-3 days learning the ins and outs of this technology or concept. Learn it well enough that you can outsource a project and understand whether or not a contractor is pulling one over on you (if they're writing sloppy or inefficient code, with security holes, etc). Build up a list of contractors you can fall back on if one fails to perform. And then start bidding on projects on freelance sites. Make sure to add markup to your projects. Never get in over your head - if a client wants you to build a custom cms, for example, don't do it. Leverage off the shelf technology as much as possible.

Look at software that's widely adopted (wordpress, drupal, etc) and look for ways to combine the hype with this software. Look at software or platforms just being introduced, and make an educated guess on what would be most useful for end users of these. Then build it.

In my opinion, HTML5 is going to be huge - insofar as everyone will be talking about it and want in on the action. So, take a look at Html5Boilerplate. It's a pretty well documented starter kit for HTML5 sites. Read up on microformats. Also read up on CSS3 and jQuery.

These are just thoughts off the top of my head, if you have more pointed questions, feel free to ask.

Please please please make the jump to HTML5. HTML5Boilerplate makes it easy to start using HTML5 today.

edit: HTML5.

What is Reddit's opinion of HTML5 Boilerplate?
From 3.5 billion Reddit comments

➔ HTML5 Boilerplate website

By popularity on Reddit, this Service is:

62 reviews of this app found across Reddit:

What is Reddit's opinion of HTML5 Boilerplate? From 3.5 billion Reddit comments

➔ HTML5 Boilerplate website

By popularity on Reddit, this Service is:

62 reviews of this app found across Reddit:

What is Reddit's opinion of HTML5 Boilerplate?
From 3.5 billion Reddit comments