My first advice would be to pitch that createjs nonsense in the trash. All it will do is teach you how not to build a website; at least if you care about visitors actually using your content. Just your using the term "object layout" raises warning signs... though that could just be your mis-using the terminology since you just said you're new to web development.
Coming from C++, you're going to have a leg up on a lot of people when it comes to building a site, but one big thing you're going to NEED to do is avoid overusing programming languages like JS or even back-end like PHP, and get a firm grasp on HTML and CSS. "real" programmers scoff at HTML as not being a real 'programming language', but in many ways it can be much more difficult as there are clear rules as to what tags mean and how to build things... than many people ignore by using crappy tools to try and do the work for them, the end result being inaccessible wrecks.
Generally speaking your layouts should be three things:
1) Elastic -- This means that your fonts are dynamically sizing; which is to say declared in % or EM, not pixels!, and your element/container widths are also in EM. This means the fonts and layout will auto-expand based on the users preferences so those with visual impairments or really good high dpi displays aren't sent diving for the zoom.
2) Semi-fluid -- A fluid layout is one that auto-expands and contracts to fit the screen width. This is easy to do as the default behavior of all block-level containers is to auto-expand to fit their parent element; and why it's a total laugh when people go around throwing widths on EVERYTHING. Semi-fluid means that you set a max-width on the layout, so it cannot expand past a certain point. This is done so as to make sure that really long lines of text aren't unwieldy and hard to follow.
3) Responsive -- the new kid in accessibility, the other two listed here should be considered stepping stones to this one. What it means is using something called "media queries" to strip off columns or add columns or otherwise make changes to the layout so as to best fit the available screen space.
"good practice" if you are going to have multiple columns is to make the side columns a 'elastic fixed' width, and leave the center/main/content column fluid to fill the remaining space. Declaring column widths in percentages more often than not just results in broken columns at smaller AND larger sizes.
Some things you should avoid:
1) Fixed widths -- inaccessible rubbish that will be broken for someone, somewhere at sometime.
2) Declaring fonts in pixels -- inaccessible rubbish that leaves many users diving for the zoom. There are a handful of legitimate usage cases like behind a complex image-replacement, but otherwise, just say no.
3) Fixed heights -- as your content should be elastic and the containers dynamically sizing, fixing the height of elements is just begging for something to break. You'll see this folley all the time,
abusive comment deleted by moderator
As to what widths to use as a max-width, side column widths, or as your media query breakpoints - that should be dictated to you by the content, NOT the design. Designing before you have content is putting the cart before the horse...
abusive comment deleted by moderator
There's a reason the method I advocate for creating a site template is thus:
1) CONTENT FIRST -- Take your content or a reasonable facsimile of future content, and place it into a logical order in a flat text editor as if HTML, CSS, JS, PHP or any of the rest of the web technologies never even existed.
2) Mark up that content semantically -- which is to say that you should add HTML tags to say what things ARE, not what they look like!. If you are choosing your HTML tags based on what things look like, you're choosing the wrong tags for all the wrong reasons. To that end the semantically neutral tags <DIV> and <SPAN> have no business in the markup until the next step.
3) Create a non-media query layout with CSS -- a lot of people will tell you to start with a mobile layout, but that just short-changes everyone. The lowest common denominator IMHO is IE8/earlier users where they don't have media queries, so that's what I make first -- a desktop layout for non-modern browsers. This is what old browsers will fall back on. This is the point at which you can add DIV and SPAN as needed to apply styling or group elements -- but only do so once you've expended all you can reliably do with your semantic tags from the last step.
4) Add your media query layouts -- you may need to add more DIV and SPAN at this point as targets for changing the layout, but on the whole it should be a simple matter of stripping off floats, and adjusting margins/paddings and widths for smaller displays, and possibly adding more floats for larger ones if desired.
5) Make it pretty -- this is the point at which I would add fancy colors, backgrounds, etc -- designing them to fit the layout NOT the other way around. Content dictates markup, content and markup dictate layout, layout dictates presentational affectations like background images... if any --
abusive comment deleted by moderator
6) further enhance with JavaScript if desired, keeping in mind the unwritten rule: "If you can't make a fully functional page without JavaScript FIRST, you likely have no business adding scripting to it!"
The above process is called progressive enhancement, and it means that anything you build will "gracefully degrade" should any of the fancy bits along the way be missing/unavailable, ignored or even outright blocked -- be it JS, CSS or even the markup. The first two steps in particular are the most important part since that's what non-visual user-agents will get -- like screen readers, braille readers, and even more importantly SEARCH ENGINES.
To accomplish the above you're going to need a firm grasp of HTML and CSS. The latter is the hard part, but a good place to start would be to find a good HTML reference and just read it beginning to end. I suggest this one:
http://htmlhelp.com/reference/html40/
It's older, but complete and one of the few to explain the HTML 4 specification in plain english. I suggest you concentrate on HTML 4 STRICT (or XHTML 1.0 STRICT) for now, as HTML 5 offers nothing of legitimate value and in many ways seems carefully crafted to set coding practices back a decade and a half.
Read that refernece beginning to end, and pay particular attention to the "contains" and "contained in" parts as those rules are VERY important for cross-browser consistency. (even if the HTML 5-tards are trying to throw them out the window).
... and do yourself a huge favor and stay away from the nube predating halfwit nonsense like bootstrap, blueprint, YUI, grids, jQuery, and anything else that labels itself a "framework". They are at best a crutch for the inept, at worst fat bloated slow train wrecks that in many cases defeat the entire reason HTML and CSS even exist. Same goes for most of the 'preprocessors' like LESS and SASS -- pathetic tools for people who never learned to use CSS properly. Likewise avoid IDE's, WYSIWYGS, and all the other pathetically useless development environments as they will typically teach you more about how NOT to build a website than actually provide anything of value.
There are only a few tools you really should have for building a site template (or even coding an entire site right down to a CMS system)
1) Flat text editor --There are plenty of perfectly good text editors out there. I like Flo's Notepad 2, but editPlus, notepad++, sublime, text-wrangler, gEdit -- there's an endless number of them and every last one of them is free. You need anything more than that, you're probably doing something wrong... see idiotic bloated overpriced nonsense like Dreamweaver. As a dearly departed friend used to say "the only thing you can learn from Dreamweaver is how not to build a website".
2) Browsers; all of them! -- Browsers are free, they all behave a little differently, so get them ALL. This means you will probably need a Windows environment, possibly multiple versions to test as many versions of IE as possible. Likewise you will probably want an OSX setup since you need to test Safari, and Firefox behaves differently on OSX than it does on Win/Lin.
Virtualization software like VMWare or VirtualBox (I prefer the latter) can help greatly with this since it lets you run other OS in a window. I consider it a must-have on my testing machines -- case in point on this workstation right now I'm running OSX ML (to test safari and FF), Win98 (to test IE 5.5 and 6), WinXP (win 7 and 8 'native') and Arch (since linux has different fonts available to it) under a Win7 host.
3) Testing Server -- If you are running linux you could just set up Apache, Mysql and PHP and set yourself off running. Likewise you could configure something similar native on OSX, but if you're on Windows you could either set up a proper LAMP server in a virtualization, or run a pre-configured testing server like WAMP or XAMPP (I prefer the latter). If you're really not into digging around grabbing packages and playing with makefiles and so forth, XAMPP and it's ilk can be a real godsend.
Alright, I'll clam up for a bit -- hope this helps. Any questions fire away.
