Live data from Hacker News

An Advanced Guide to HTML and CSS

learn.shayhowe.com

51–60 of 105 posts

Re: An Advanced Guide to HTML and CSS

#51
post #35

Earlier quoted context omitted.

Last time I checked, gmail was still using tables for layout.

I would say that ignoring implementation dogma and going for the best solution to a problem definitely falls under advanced development. It's certainly not something you see coming from developers with a few flavor of the month tutorials and maybe a site build or two under their belt.

I agree, I just don't think gmail is a good example of the "really advanced HTML/CSS" the parent is looking for.

Re: An Advanced Guide to HTML and CSS

#52

Earlier quoted context omitted.

Sure, I've worked with Backbone and advanced JS - this isn't the problem. What I'm talking about is the rich, fluid layouts that these sites have and which distinguishes them from a 'regular' website. Edit: changed Bootstrap to Backbone - always get those two mixed up.

Not really sure what you mean by 'regular' website, it sounds like you're talking about a variety of different things. 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 for…

I think the best way to describe the difference between a 'regular' website and the advanced layouts I talk about is that an 'advanced layout' often looks similar to a desktop application.

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.

Re: An Advanced Guide to HTML and CSS

#53

You lost me at the fade in.

Shouldn't be so snobby. There's cool stuff inside!

It's not that it fades in, it's that the way it does so loads the sidebar information first, and then awkwardly displays all of the main information staggered, but still quickly enough that the animation has no purpose. If you're going to fade content in, do so in a manner that makes it a non-issue for me to know which content is most important.

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.

Re: An Advanced Guide to HTML and CSS

#54
This is truly awesome. What's even more awesome for me as a noob is to see what the web design/dev community is like out there. People really and truly care about educating others and sharing the knowledge they have...now imagine if the people in every industry were as open and awesome?!

Re: An Advanced Guide to HTML and CSS

#55

Does anyone know of any guides or books for really advanced HTML/CSS? I find a lot of these guides target regular websites, which I have experience with, whereas I'd love to know how to create much more advanced layouts (e.g. Gmail, Grooveshark). Does anyone know where I can find information on that kind of stuff?

I think I get what you're asking here. I work for a startup as the sole front-end guy and we have a mess of SASS/JS. It was never really rebased since the beginnings and definitely wasn't structured for performance, reusability, or neatness. I'm going to be reorganizing it soon and I'm reading up on things like this, object oriented CSS, and SASS best practices.

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.

Re: An Advanced Guide to HTML and CSS

#57

Earlier quoted context omitted.

Not really sure what you mean by 'regular' website, it sounds like you're talking about a variety of different things. 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 for…

I think the best way to describe the difference between a 'regular' website and the advanced layouts I talk about is that an 'advanced layout' often looks similar to a desktop application. 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…

I posed what I think is a similar question to a friend of mine that I'm designing a node.js app with. I thought that being in JavaScript, it would handle everything a lot more fluidly, like web apps such as koding.com. In reality, it's just another MVC framework entirely based in JS (let me know if I'm phrasing this wrong).

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.

Re: An Advanced Guide to HTML and CSS

#58

Earlier quoted context omitted.

Not really sure what you mean by 'regular' website, it sounds like you're talking about a variety of different things. 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 for…

I think the best way to describe the difference between a 'regular' website and the advanced layouts I talk about is that an 'advanced layout' often looks similar to a desktop application. 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…

It's actually simpler than you think - just use a lot of absolute positioning. Inspect the source code of grooveshark and gmail to see how they do it.

Re: An Advanced Guide to HTML and CSS

#59

Earlier quoted context omitted.

I'm pretty sure they're just markers telling you what the code is an example of, so they get out of your way when you hover over the code.

You're correct, thanks for the answer here. Feedback has been hot and cool on them, still trying to decide if they are worth it or not.

Having them pop out of existence is jarring; maybe have them fade to near-invisible.
Post reply on HN