An Advanced Guide to HTML and CSS • Hacker News Board

Re: An Advanced Guide to HTML and CSS

#61

Post by at-fates-hands » Mon, Jan 14, 2013, 5:59 PM UTC

kaolinite wrote: post #52

adamauckland wrote: post #34

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…

Because front-end development is changing so fast, what I've had to do is simply start looking at website galleries and find sites where I like how they've implemented certain features.

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/

Re: An Advanced Guide to HTML and CSS

#62

Post by saint-loup » Mon, Jan 14, 2013, 6:12 PM UTC

wmeredith wrote: post #48

pault wrote: 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.

Gmail uses tables for the list of mails, which makes sense, but there are also tables for things like the logo. I'm not qualified to assess the work of the team behind Gmail, but it's curious notheless.

Re: An Advanced Guide to HTML and CSS

#63

Post by kmfrk » Mon, Jan 14, 2013, 6:12 PM UTC

I already knew about the topics, but I still found the table introduction to be incredibly useful. I haven't seen many who worked on creating beautiful, semantic tables like this.

None of the guides online basically have tables with rounded borders.

Re: An Advanced Guide to HTML and CSS

#64

Post by jaredmcateer » Mon, Jan 14, 2013, 6:13 PM UTC

anonymouz wrote: post #21

What is the deal with those orange buttons that hover on the right hand side of the code snippets? They look like they should be interacted with, but when I hover my mouse over them they fade away. That's terribly irritating.

Yup I definitely tried to click them a couple times... they don't fad away for me in Chrome, they just disappear, left me wondering if I needed to play some sort of game to get to them properly.

Re: An Advanced Guide to HTML and CSS

#65

Post by braveheart1723 » Mon, Jan 14, 2013, 6:24 PM UTC

kaolinite wrote: post #27

bzalasky wrote: post #22

Earlier quoted context omitted.

Learn a front-end MVC framework. JavaScript plays a huge roll in creating applications like Gmail or Grooveshark. Addy Osmani's blog is probably as good a jumping off point as any ( http://addyosmani.com/blog/ ).

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.

Try http://bradfrost.github.com/this-is-responsive/

Re: An Advanced Guide to HTML and CSS

#66

Post by brightghost » Mon, Jan 14, 2013, 6:24 PM UTC

shay-howe wrote: post #36

thedjpetersen wrote: post #20

This looks really nice! Any way that this could also get uploaded as a PDF?

I'd love to get this implemented, hopefully once all the lessons are posted.

I recently spent the better part of a day trying to figure out this seemingly-straightforward problem, so if you do go down this road I'd recommend a tool called wkhtmltopdf: http://code.google.com/p/wkhtmltopdf/

Re: An Advanced Guide to HTML and CSS

#67

Post by optymizer » Mon, Jan 14, 2013, 6:28 PM UTC

kaolinite wrote: post #19

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?

There's no 'really advanced HTML'. There are the standards. Personally, I found that writing a parser for a language does a good job at exposing you to the low-level details, which is what the 'advanced' part usually relies on. Otherwise, you're probably looking for HTML (architectural) design patterns.

Re: An Advanced Guide to HTML and CSS

#68

Post by brightghost » Mon, Jan 14, 2013, 6:28 PM UTC

shay-howe wrote: post #42

dominicrodger wrote: post #24

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.

I'm not really seeing why I would want the label of the section in question hidden when I'm dealing with it, and at least for me there's not really a parity between 'dealing with' and 'hovering over with my cursor' anyway, unless I'm copying the text. The bright orange color and the constant flashing on/off just adds visual noise and makes it difficult to really read the labels anyway, imo.

Re: An Advanced Guide to HTML and CSS

#69

Post by bloggersway » Mon, Jan 14, 2013, 6:36 PM UTC

Thanks for providing it.

Re: An Advanced Guide to HTML and CSS

#70

Post by [deleted] » Mon, Jan 14, 2013, 6:40 PM UTC

pault wrote: post #35

kaolinite wrote: post #19

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?

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

[deleted]