An Advanced Guide to HTML and CSS
learn.shayhowe.com
learn.shayhowe.com
This assertion used to be thrown around as one of the supporting arguments for using OOCSS, but I'm sure I later read that it was largely debunked; the performance implications were negligible and so it was just making CSS less legible/maintainable for no real reward. Has that changed? Have you any recent benchmarks to share?
I've never seen selector performance used as an argument for OOCSS.
>> ...and so it was just making CSS less legible/maintainable for no real reward.
That's a pretty broad sweeping statement that I think you'd be very hard pressed to back up. OOCSS is all about maintainability. Legibility is debatable, but I've seen OOCSS examples that are just as legible, if not more so, than old-school CSS (leaning more on tagname selectors/DOM structure - if that is the opposing stand-point, sometimes it's hard to tell what OOCSS dissenters are really arguing against).
Harry Roberts is one of the most vociferous proponents of OOCSS, and he has written about it a few times, notably here: http://csswizardry.com/2011/09/writing-efficient-css-selecto...
> That's a pretty broad sweeping statement that I think you'd be very hard pressed to back up.
I'll admit it's an opinionated statement, but I don't think that in itself makes it invalid. Opinions are certainly divided when it comes to how to structure CSS selectors, and I am firmly in the camp that OOCSS is bad stuff.
I've had a half-baked article on the whys of an alternative structure to OOCSS drafted for about 18 months now, so I guess it might be time to dust it down and fully write it up.
[0] http://www.stevesouders.com/blog/2009/03/10/performance-impa...
Further reading:
http://csswizardry.com/2011/09/writing-efficient-css-selecto... https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficie...
Edit: changed Bootstrap to Backbone - always get those two mixed up.
Google the following:
Responsive Design, Object Oriented CSS, SASS, Compass, Susy Grids. Any help? I don't think you're going to get tutorials on how to create something like Gmail because AFAIK it's JavaScript generated from JAVA.
Nicole Sullivan writes a lot about this sort of thing.
EDIT fixed formatting
Remember the first BaseCamp? Given designs, I reckon I could build the front-end for that. However given designs for GrooveShark, icloud.com or the new spotify web-app - I wouldn't know where to begin.
I've tinkered with responsive designs, Backbone, LESS, grid layouts and such (by the way, I will check out Compass, it looks interesting) - yet still I feel like I lack the knowledge to build more advanced apps.
I'm unsure if for the type of apps we're talking about it's just the way they handle the loading of their site or if it's the framework it is based upon, but he forwarded me to Meteor (http://meteor.com/) and told me that that was probably what I was looking for.
If someone could chime in on this - and sorry for being so obtuse - I'd be super grateful.
Then I try and replicate it, switch it up and work with it. For me, this is a lot better than waiting for someone to show these techniques in a basic tutorial.
You might interested in learning about parallax scrolling as well. It's getting more popular, but its Achilles heel is its not mobile friendly at all.
I'll keep the list short: http://html5gallery.com/ - this is one of my favorites since it gives a review of each site and what the developer could've done better. http://webcreme.com/ http://cssremix.com/ http://www.webdesign-inspiration.com/ http://www.designfridge.co.uk/
Have you played with Sencha Touch or Google's Angular JS or Ember or Backbone?
These are all great starting points and will teach you a lot about how to structure your code, but for anything large like iCloud, you're going to probably need to write your own libraries because nobody else is doing exactly what you want.
Get good at using jQuery to animate stuff, then re-work your UI using CSS3 transitions (because jQuery suffers performance issues on mobile).
Design for mobile first and scale upwards; by design I don't mean PSDs I mean open an HTML document and just start chopping it up.
It's also worth noting that Gmail especially appears to rely very heavily on Javascript for positioning and styling, rather than pure CSS. Many elements have, eg; `style="width: 123px"`. This is a practice I strive to avoid, so it's interesting to me that Google makes such use of it.
Guess what? Even after the problem has been fixed I'm still on HTML mode. It is so much faster, and more responsive than the javascript version.
Why people make complex javascript frontends, I will never understand.
There's a big difference from creating a simple/moderate website vs an application that has many facets but same styles. It's a tough chore to get everything right but I'm excited to do it.
I'd be interested in hearing your approaches to your current project and would definitely be willing to give whatever advice I can based on what I found through trial and error.
www.youtube.com/watch?v=R-BX4N8egEc
As stated elsewhere in the thread, it is work in progress, so do not be too harsh of a critic.
Once all the lessons are up and a responsive layout is implemented, I believe this to be a beautiful addition for beginners and advanced programmers.
P.S.: Reminds me a bit of http://www.phptherightway.com - Maybe you can borrow a few of the good ideas from that guide?
They look like they should be interacted with, but when I hover my mouse over them they fade away. That's terribly irritating.
Feedback has been hot and cool on them, still trying to decide if they are worth it or not.
Also, looking at the ::selection example, it should mentioned that it's not safe to group vendor prefixes in the selector portion of a declaration block, as, unlike with properties, the whole block will be skipped if an unrecognized selector is encountered by a UA's CSS parser.
Keeping CSS rules clean and well thought-out pays for itself in the long run, I know this; yet - for some reason I don't follow my own advice. Hehe.
Edit: Another great website with no fluff and pure awesome content is www.htmldog.com.
I learned about HTML and CSS there when I was a wee lad, helped me grok floats.
<definition of a term that is difficult to grasp out of context>
<loose context / example for said previously defined term with no real world application>
Stuff the whole thing with formal copy coupled with lorem ipsum placeholder text, and I can't force myself to endure the boredom through the first lesson. I have a similarly difficult time learning by reading textbooks (of which this guide feels reminiscent). It just doesn't click for me, but it does seem to work for many, many people.
Just some feedback. I must say that I feel like the guide so far is representative of most of the gems I came across whilst trying to improve my webdev, doing small-company websites on the side whilst studying, starting with some basic HTML3/4 and CSS2 knowledge and working on 3-4 projects over the course of 2 years. It's what I now wish I had known before diving into my first project.
One small question, why did you chose a non responsive layout? It is pretty unreadable on mobile (at least for me). I'm sure it's work in progress, but this is the first thing I've noticed.
Again, thank you for posting (and creating) I find it useful and looking forward for the next chapters.
Thank you for the kind words!
If I had my druthers, I'd bump up the contrast just a bit, especially in the code blocks.
Also, just a minor thing: looks like you've used a[src...] in your attribute selector examples when I believe you mean to have a[href...].
Site looks really nice, not got much time to check the content whilst I'm at work but I'll have a better look at it. It certainly seems very clear from the quick scan I had.
Let me know what you think of everything once you've had a chance to further check out.
As it stands, the primary content page has no visual hierarchy. Everything is the same size and loads at approximately the same exact time. On refresh, sometimes everything under ul.breakout flashes first before hiding again. The border-radius on the images is also giving them some awful-looking jagged edges which appear to be coming from the filter property.
I haven't taken an extensive look at the current unlocked lessons, but as someone with extensive CSS experience, these little things are what makes me hesitant about the rest of the information contained therein. Additionally, as others have pointed out, the palette is bland if not going to be hard for a lot of people to see, so I don't think a little skepticism is snobby.
The rest of the site looks pretty good, but why do all that on the one page where you're trying to sell your highly-tuned-techniques lessons?
Flexbox, along with regions and columns, is on the list of updates to be made soon.
Thanks for taking the time to put it together!
Also, I think that having the ability to play with some code and see results right there on the site (e.g., tweak all the included numerous demos) would bring even more awesomeness to the project.
Edit: formatting. (Thanks, saraid216, you are right.)
Grumpy old git moans aside, what I really want to say is that layouts like this are so, so easy to come up with on paper, as it were. Lets face it, there is nothing new there at all. But making something so basic look so elegant is the real art.
Yeah, there are nitpicks, but I'm sure you'll smooth those out. The bulk or core is bang on.
As a lazy useless git, I wouldn't mind a template of it!!!!
Nice work.
Which was exactly Microsoft's rationale for Metro.
Whether or not they achieved that goal, though, is another matter.
It's not exactly a bad idea, though it is possible to take things a little too far. Certainty if you observe the trends in web designs recently sites appear to be "flatter", less cluttered and more focused, without the Apple inspired "Web 2.0" glossiness that has taken over from circa 2006 onwards
I noticed one really strange thing - when you hover over any of the circles on the homepage, all the ampersands change font. Never seen this before and I'm sure it can be fixed quickly, just a heads up.
When I saw it I was thinking an advanced guide would cover some of the details found here: http://www.html5rocks.com which I find somewhat hard to digest (especially all new semantics).
In no way do I mean to be negative towards what you have done, it looks awesome, I just expected something else.
"For this to work within Internet Explorer 6 [...] in Internet Explorer on an Apple computer will also [...]"
Seriously, when was this written, in 2003? Totally irrelevant and makes newcomers confused.
None of the guides online basically have tables with rounded borders.
Optimised compression is re-compression of the images, e.g. applications like pngcrush or optipng take a brute force approach and try several different compressions of PNG (all lossless) and give you the best one. Same approach can be taken for JPEG, see eg smush.it, re-compressions here as I understand it provide the same final image data and so this approach differs (and is complementary) with using a Save-for-Web tool in your graphics program.
Best thing IMO is to try something like Google's Pagespeed / Yslow / showslow / webpagespeed / gtmetrix / ... and see if it will give a worthwhile gain on paper - then test with some actual web clients.
I'd say mobile-first is going to be more focussed on bytes than those sites targeting primarily desktop users. I've never seen any metrics on rendering speed of different compression regimes though - small files that are doubly compressed seem like they might take longer decompressing than any saving you'd make in downloading.
Is this really needed for mobile first design? I'd be inclined to say that it's more important for mobile-first since data transfer tends to be slower and more expensive. Remember data caps, whether hard or soft, and overage fees. Every byte you can save is worthwhile to a mobile user. Think of them as the modern equivalent to a dial-up user whose host connection is a long-distance number.
Thank you for your contribution.
I've been using it for a few years for a vCard SVG image (that is probably next to useless).
oh come on, this thread is being astroturfed. no valid hn post has 90% of comments with nothing more than vacuous praise. please flag.